jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など)

jQuery UIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」などというキャッチを用いて紹介されています。

ところが、どのファイルがどのような役割を持っているかを正しく知っておかないと、どれをダウンロードしたらよいかもわからないし、ページ内で読み込まなくてよいファイルまで読み込んでしまったりするという無駄が生じてしまいがちです。

使用方法が簡単な故にか、多くのサイトで詳しい説明がなされていないようですので、ここらへんで一度自分の備忘録も兼ねて、フォルダ構造や各フォルダやファイルの役割を整理しておきたいと思います。

サマリー

１．jQuery UI のダウンロード方法
２．知っておくべき各機能のこと（uiフォルダ内の説明）
３．その他知っておくべき各フォルダやファイルの役割

１．jQuery UI のダウンロード方法

ココからStable Versionあたりをダウンロードします。
Stable Versionというのは、読んだままですが「安定版」という意味です。

f:id:kojikoji75:20130913171635j:plain

ダウンロード時に、実際に使用する機能だけを選択することができます。各機能は２で説明します。

f:id:kojikoji75:20130913171649j:plain

デフォルト（全てチェック状態）でダウンロードしたzipファイルを解凍すると、下記のようなフォルダ構成となっています。

jquery-ui

demos（各機能ごとのhtmlが用意されておりdemoが見れる）

accordeion

addClass

animate

autocomplete

button

：

external

tests

themes（機能ごとに用意されたcss）

images

minified（cssのminified版）

ui（機能ごとに用意されたjs）

i18n（datepicker関連）

minified（jsのminified版）

２．知っておくべき各機能のこと（uiフォルダ内の説明）

各機能は以下のような分類となります。
（uiフォルダ配下の各jsファイルの説明と同じことになります。）

ウィジット系

ファイル名	機能
jquery.ui.datepicker.js	日付選択
jquery.ui.dialog.js	ダイアログボックス
jquery.ui.menu.js	ネストメニュー
jquery.ui.progressbar.js	プログレスバー
jquery.ui.slider.js	スライダー
jquery.ui.tabs.js	タブを要素に追加
jquery.ui.tooltip.js	ツールチップ（吹き出し）
jquery.ui.accordion.js	アコーディオン
jquery.ui.autocomplete.js	入力候補を表示
jquery.ui.button.js	ボタン、チェックボックス、ラジオボタン
jquery.ui.spinner.js	アップダウン・ボタンを伴う数値入力ボックス

エフェクト系

ファイル名	機能
jquery.ui.effect.js	略
jquery.ui.effect-blind.js	略
jquery.ui.effect-bounce.js	略
jquery.ui.effect-clip.js	略
jquery.ui.effect-drop.js	略
jquery.ui.effect-explode.js	略
jquery.ui.effect-fade.js	略
jquery.ui.effect-fold.js	略
jquery.ui.effect-highlight.js	略
jquery.ui.effect-pulsate.js	略
jquery.ui.effect-scale.js	略
jquery.ui.effect-shake.js	略
jquery.ui.effect-slide.js	略
jquery.ui.effect-transfer.js	略

インタラクション系

ファイル名	機能
jquery.ui.resizable.js	要素のリサイズ
jquery.ui.selectable.js	複数要素を選択
jquery.ui.sortable.js	要素のソート
jquery.ui.draggable.js	ドラッグ機能
jquery.ui.droppable.js	ドロップ機能

ほか

jquery.ui.mouse.js	dialog.js、draggable.js、droppable.js、resizable.js、selectable.js、slider.js、sortable.jsの依存ファイル
jquery.ui.widget.js	accordion.js、autocomplete.js、button.js、dialog.js、draggable.js、droppable.js、menu.js、mouse.js、progressbar.js、resizable.js、selectable.js、slider.js、sortable.js、spinner.js、tabs.js、tooltip.jsの依存ファイル
jquery.ui.position.js	autocomplete.js、dialog.js、menu.js、tooltip.jsの依存ファイル
jquery.ui.core.js	accordion.js、autocomplete.js、button.js、datepicker.js、dialog.js、draggable.js、droppable.js、menu.js、progressbar.js、resizable.js、selectable.js、slider.js、sortable.js、spinner.js、tabs.js、tooltip.jsの依存ファイル

オールインワン

ファイル名	機能
jquery-ui.js	上記を全て含みます。従って面倒なことを考えたくない場合はこれだけを読み込みます。jquery-ui.jsのコードを見るとわかりますが、上記の各functionが寄せ集められただけの状態です。

３．その他知っておくべき各フォルダやファイルの役割

i18nについて

i18nフォルダへは、日付選択ダイアログを実装するためのdatepicker.jsを使用した際に、各国の言語を指定できるファイルが含まれている。
例えば日本だとjquery.ui.datepicker-ja.jsを読み込むことで「○月○日」や「日月火水木金土」の表示がきちんと日本語で表示される。

datepicker.jsについては「jQueryUI の Datepicker によるカレンダー機能実装が簡単便利」に詳しく書いているので参照ください。

ちなみにi18nフォルダへは

jquery.ui.datepicker-ja.js
jquery.ui.datepicker-en-AU.js
jquery.ui.datepicker-ca.js
jquery.ui.datepicker-cs.js
　：
　：

と多くのファイルが含まれていますが、これらは全て「jquery-ui-i18n.js」というファイルにも含有されています。

minifiedフォルダについて

jQueryUIでは、jsファイルとcssファイルにおいてそれぞれminifiedという軽量なファイル群が用意されています。軽量といっても機能は全く同じであるため、理由がなければminified版を使いましょう。通常の非圧縮版（Uncompressed版）はプログラマがメンテナンスがしやすいようなコードが書かれているため、重たいファイルとなっています。

minifiedファイルも