Dojo道場 ～ 第11回「Dojo 最新動向 - Asynchronous Module Definition」

「Dojo道場」～実用アプリ構築のためのベストプラクティス

AMDローダープラグイン

　AMDローダープラグインはAMDローダーに実装されているモジュールをロードする方法とは別な形でモジュールをロードする方法の一つ（これもCommonJSグループに提唱されています）で、次のようなことを可能にします：

• HTML/CSSなど、モジュールとして定義されないリソースのロード
• AMDに準拠しないモジュールのロード
• ブラウザの種類、言語情報など、ブラウザ/アプリケーションの実行時の情報に依存したモジュールのロード

AMDローダープラグインを使ったモジュールのロード

　AMDローダープラグインにより読み込まれるモジュール/リソースは次のようなIDにより指定されます：

リスト9　AMDローダープラグインにより読み込まれるモジュール/リソースのID

loader-plugin-module-id!target-resource

• loader-plugin-module-id： AMDローダープラグインのモジュールID。
• target-resource： AMDローダープラグインにより読み込まれるリソース/モジュールのID。

　例えば、dojo/textと呼ばれる、テキストファイルをロードするAMDローダープラグインは、次のように使います：

リスト10　dojo/text AMDローダープラグインの使い方

require(["dojo/text!my/file.txt"], function(text){
    // 読み込まれたテキストファイルを表示する
    alert(text);
});

AMDローダープラグインの書き方

　AMDローダープラグインの実体はload()というメソッドをもつAMDモジュールです。load()関数は次の形をとります：

リスト11　AMDローダプラグインのload()メソッドの書式

load(id, parentRequire, loaded)

• id： AMDローダープラグインにより読み込まれるリソース/モジュールのID。
• parentRequire： require()関数への参照。
• loaded： リソース/モジュールのロードが完了したときに呼ばれるコールバック関数。引数としてロードされたリソース/モジュールを渡す。

　例えば、モジュールにあらかじめ設定した値をもとにロードするモジュールを決めるAMDローダープラグイン（3番目の実行時の情報に依存したモジュールのロードにあたります）は次のように書くことができます：

リスト12　AMDローダプラグインの実装例

define(function(){
    var ModuleWithSuffix = {
        suffix: "",
        load: function(id, parentRequire, loaded){
            parentRequire([id + ModuleWithSuffix.suffix], function(module){
                loaded(module);
            });
        }
    };
    return ModuleWithSuffix;
});

　これを使い、状況に応じてmy/module-hoge.jsまたはmy/module-fuga.jsをロードするコードは次のように書くことができます：

リスト13　リスト12のAMDローダプラグインの使い方

require(["my/ModuleWithSuffix"], function(ModuleWithSuffix){
    // 実際には乱数でロードするモジュールを決めるということはないでしょうが...
    ModuleWithSuffix.suffix = Math.random() < 0.5 ? "-hoge" : "-fuga";
    require(["my/ModuleWithSuffix!my/module"], function(Module){
        // Moduleはmy/module-hoge.jsまたはmy/module-fuga.jsが定義するモジュールとなる
    });
});