[ThinkIT] 第3回：YUIライブラリと外部JSの呼び出し手法 (1/2)

TOP＞システム開発＞ YUIライブラリを解剖する

JSライブラリ・ラボ - これで君もライブラリ開発者だ！

第３回：YUIライブラリと外部JSの呼び出し手法
著者：川崎有亮 2007/4/2

1 2 次のページ

YUIライブラリを解剖する

「第２回：jQueryライブラリの内部とonloadイベント記法」で解説したPrototypeとjQueryはどちらも個人がリリースするライブラリでしたが、今度は、より規模の大きなライブラリの事例をご紹介します。Yahoo! UIライブラリ（YUI）は、米国Yahoo!がBSDライセンスで提供するJavaScriptライブラリです（図3、注5）。

図3：Yahoo! UIライブラリの配布サイト

※注5：
http://developer.yahoo.com/yui/

個人だけでなく、YUIのように大手企業もライブラリを公開する事例が増えてきています。YUIでは、Ajaxやイベント管理といった基本機能に加えて、アニメーションやドラッグ＆ドロップ処理のユーティリティ、さらにカレンダー／ツールチップ／ダイアログ／タブ表示／ツリー表示といった豊富なウィジェットが提供されているのが特徴です。

YUIは、表3に示す14のモジュールで構成されています。

モジュール名	主な用途
animation	アニメーション
autocomplete	オートコンプリート
calendar	カレンダー・ウィジェット
connection	Ajax通信
container	ツールチップ、ダイアログなど
dom	DOM操作
dragdrop	ドラッグ＆ドロップ
event	イベント管理
logger	デバッグ用ログ管理
menu	メニューバー・ウィジェット
slider	スライダ・ウィジェット
tabview	タブ・ウィジェット
treeview	ツリー・ウィジェット
yahoo	ベースクラス

表3：YUIライブラリのモジュール構成

このうち、ベースとなるyahoo.jsモジュールは必須ですが、それ以外のモジュールはWebページ内で必要な機能に応じて、適切なモジュールのみを呼び出して利用します（表4）。

モジュール・ファイル名	主なオブジェクト
build/animation/animation.js	YAHOO.util.Anim、YAHOO.util.Easing、YAHOO.util.Motion
build/autocomplete/autocomplete.js	YAHOO.widget.AutoComplete、YAHOO.widget.DataSource
build/calendar/calendar.js	YAHOO.widget.Calendar、YAHOO.widget.CalendarGroup、YAHOO.widget.Calendar2up
build/connection/connection.js	YAHOO.util.Connect
build/container/container.js	YAHOO.widget.Tooltip、YAHOO.widget.Panel、YAHOO.widget.Dialog
build/dom/dom.js	YAHOO.util.Dom、YAHOO.util.Region、YAHOO.util.Point
build/dragdrop/dragdrop.js	YAHOO.util.DragDrop、YAHOO.util.DDProxy、YAHOO.util.DDTarget
build/event/event.js	YAHOO.util.CustomEvent、YAHOO.util.Subscriber、YAHOO.util.Event
build/logger/logger.js	YAHOO.widget.LogMsg、YAHOO.widget.LogWriter、YAHOO.widget.Logger
build/menu/menu.js	YAHOO.widget.Menu、YAHOO.widget.ContextMenu、YAHOO.widget.MenuBar
build/slider/slider.js	YAHOO.widget.Slider、YAHOO.widget.SliderThumb
build/tabview/tabview.js	YAHOO.util.Element、YAHOO.widget.Tab、YAHOO.widget.TabView
build/treeview/treeview.js	YAHOO.widget.TreeView、YAHOO.widget.Node、YAHOO.widget.RootNode
build/yahoo/yahoo.js	YAHOO、YAHOO.util、YAHOO.widget

表4：YUIライブラリのモジュールと主なオブジェクト

例えば、カレンダー・ウィジェットを利用する場合は、リスト2のように4つのJavaScriptファイルを呼び出します。

リスト2：YUIライブラリでカレンダーを利用する例


			<script src="inc/yahoo.js" type="text/javascript"></script>

			<script src="inc/event.js" type="text/javascript"></script>

			<script src="inc/dom.js" type="text/javascript"></script>

			<script src="inc/calendar.js" type="text/javascript"></script>

カレンダーモジュールを例にすると、表5のようなファイルで構成されています。

ファイル名	内容
build/calendar/README	モジュールの更新履歴
build/calendar/calendar.js	JavaScriptファイル（通常版）
build/calendar/calendar-debug.js	デバッグ用ログ出力付バージョン
build/calendar/calendar-min.js	コメント除去した軽量バージョン
build/calendar/assets/	画像ファイルやCSSファイルなど
docs/Calendar.js.html	calendar.jsソース閲覧用HTML
docs/YAHOO.widget.Calendar.html	Calendarクラスのドキュメント
docs/module_calendar.html	calendarモジュールのドキュメント
examples/calendar/index.html	calendarクラスのサンプルコード

表5：calendarモジュールの主な構成ファイル

実際のWebページで利用する際に必要となるのは、軽量版のcalendarmin.jsまたは通常版のcalendar.jsのどちらかのJavaScriptファイルみです。また、JavaScriptソース中にJavaDocの形式で記述したコメントから、各種ドキュメントファイルを自動生成する仕組みを利用しているようです。

※注6： YUIに関して、本稿では執筆時点の最新版であるバージョン0.12.2を解説しますが、2007年4月現在ではバージョン2.2.0がリリースされています。バージョンが大きく上がっていますが、ルールの変更により、0.12.2の直後のバージョンが2.2.0となっています。2.2.0では新しいコンポーネントが複数追加された他、カレンダーモジュールなど従来な主要な機能もそのまま利用できます。

1 2 次のページ

著者プロフィール
川崎有亮
1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax／実装のための基礎テクニック」（共著）など書籍・雑誌記事の執筆も多数。

Kawa.net xp：http://www.kawa.net/

INDEX
第3回：YUIライブラリと外部JSの呼び出し手法
	YUIライブラリを解剖する
	外部JavaScriptの呼び出し方法