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

TOP＞システム開発＞外部JavaScriptの呼び出し方法

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

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

外部JavaScriptの呼び出し方法

YUIライブラリのように大規模になると、ライブラリ自体のコードが長くなり、メモリ消費やページ描画処理速度への影響が懸念されます。実際のWebページ中でライブラリ内の全てのモジュールを同時に使用することは皆無ですから、モジュールごとの分割呼び出しが必要になるわけです。

YUI以外のライブラリでも、例えばエフェクト関係ライブラリscript.aculo.us（図4、注6）も複数のファイルで構成されます。

図4：script.aculo.usライブラリの配布サイト

※注7：
http://script.aculo.us/

リスト3に示すように「?load=」という特殊記法で外部JavaScriptファイルの動的呼び出しをサポートしています。

リスト3：script.aculo.usでエフェクトを利用する例


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

		<script src="inc/scriptaculous.js?load=effects" type="text/javascript"></script>

その他、dojoライブラリ（図5、注7）ではリスト4のようにオブジェクト名を指定して必要な外部ファイルを動的に読み込むdojo.require()メソッドを実装しています。

図5：dojoの配布サイト

※注8：
http://dojotoolkit.org/

リスト4：dojoライブラリを利用する例


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

		<script type="text/javascript">

		   dojo.require("dojo.event.*"); // sophisticated AOP event handling

		   dojo.require("dojo.io.*"); // for Ajax requests

		   dojo.require("dojo.storage.*"); // a persistent local data cache

		   dojo.require("dojo.json"); // serialization to JSON

		   dojo.require("dojo.dnd.*"); // drag-and-drop

		   dojo.require("dojo.lfx.*"); // animations and eye candy

		   dojo.require("dojo.widget.Editor2");// stable, portable HTML WYSIWYG

		</script>

JavaScript言語としては外部ファイルを動的に読み込む標準仕様が存在しませんが、dojoでは他言語と近い感覚でプログラムを記述できるように配慮しているわけです。

このように大規模なライブラリを構築する際には、複数ファイルの分割構成を検討する必要があります。しかし、そこまで豊富な機能を提供しない軽量ライブラリでは、無理にファイルを分割せずにscript要素1つだけで利用できるような、お手軽な構成にした方がライブラリ利用者（開発者）にとっても便利でしょう。

次回は

次回は、オリジナルのWebサービスとJavaScriptライブラリを作成していきます。

前のページ 1 2

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

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

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

JSライブラリ・ラボ - これで君もライブラリ開発者だ！
第1回	Prototypeライブラリの内部
第2回	jQueryライブラリの内部とonloadイベント記法
第3回	YUIライブラリと外部JSの呼び出し手法
第4回	JavaScriptライブラリの作成
第5回	グローバル変数の制御と更新履歴ファイル
第6回	自作ライブラリの公開とJavaScriptライブラリの今後

タイプ

連載

特集

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

新着記事

人気記事トップ10

企画広告も役立つ情報バッチリ！ Sponsored