SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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が定義するモジュールとなる
    });
});

次のページ
AMD APIを使ったDojoアプリケーションの書き方

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

須藤 哲(スドウ アキラ)

2000年ロータス株式会社(現日本アイ・ビー・エム株式会社)入社, 現在ソフトウェア開発研究所に所属. Lotus iNotesおよびIBM Connections MailのUIフレームワークを中心に携わる.

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6482 2012/04/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング