SHOEISHA iD

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

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

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

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

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

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

AMDに関するDojoの環境設定

 dojoConfigオブジェクト(Dojo 1.6以前はdjConfig)はDojo全般の環境設定をするものですが、Dojo 1.7ではこの中にAMD APIの環境設定が加わっています。AMD APIの環境設定は非常に多くありますが、ここではその中で重要なものについて触れます。

 なお、AMD APIでの本来の環境設定の方法はAMDローダー(Dojo 1.7ではdojo.js)をロードする前にrequireグローバル変数をセットしたり、AMDローダーをロードした後require()関数の第一引数に配列でないオブジェクトをセットする形なのですが、ここでは便宜上dojoConfigオブジェクトを使う方法を説明します。

AMD本来のモードか以前のDojoローダーとの互換モードかの選択(async)

 AMD APIはその名のとおり、非同期的なモジュールのロードを前提としたAPIです。非同期でのモジュールのロードは最適なユーザ体験につながりますが、アプリケーションが以前のDojoで同期的なモジュールのロードを前提したコードを書いていた場合を考え、Dojo 1.7でのAMDローダー(require()関数)では同期的なモジュールのロードをデフォルトとしています。

 dojoConfig.asyncをtrueとすることによりAMDローダー(require()関数)がAMDローダーの本来のモード(非同期)となり、これは1.7から新しくDojoを使い始める場合や、新しいDojoを使うプロジェクトにおすすめの設定です。

 以前のdojo.require()を使う場合はdojoConfig.asyncの設定は影響しません。

パッケージ間共通のモジュールの位置の指定(baseUrl)

 Dojo 1.7以前にもあったパッケージ間共通のモジュールの位置を指定するbaseUrlはAMDローダーでもそのまま使えます(通常、デフォルトはdojoパッケージがあるディレクトリとなります)。

カスタムパッケージの追加(packages)

 Dojo 1.7以前ではmodulePathsかdojo.registerModulePath()で指定していたカスタムパッケージの追加はAMD APIではCommonJS Packages/1.1のスペックの一部を実装する形になっており、次のように書くことができます:

リスト19 カスタムパッケージの追加
dojoConfig.packages = [
    {
        name: "mypackage",
        location: "../mydirectory/mypackage"
    }
];

 locationに相対パスを指定した場合、それはdojoConfig.baseUrlに対するものとなります。

最初にロードするモジュールの指定(deps)

 AMDローダがロードされ、初期化された後すぐにロードするモジュールを次のような形で指定することができます:

リスト20 最初にロードするモジュールの指定
dojoConfig.deps = [
    "dojo/_base/window",
    "dojo/dom-class",
    "dojo/domReady!"
];

最初のモジュールがロードされたときに呼ばれるコールバック関数の指定(callback)

 AMDローダが最初のモジュールをロードし終わったときに呼ばれるコールバック関数を指定することができます。このときの引数はdepsで指定したモジュールとなります。次の例ではリスト20とあわせて、AMDローダーがロードされたのと同時に、DOMが使える状態になるのを待った上で<html>タグにCSSクラスを追加するコードを走らせることができます:

リスト21 最初のモジュールがロードされたときに呼ばれるコールバック関数の指定
dojoConfig.callback = function(win, domClass){
    domClass.add(win.doc.documentElement, "myclass");
};

モジュールファイルのサーバ上の位置の指定(paths)

 モジュールファイルのサーバ上の位置がパッケージが指定するものとは違う位置にある場合、それを指定することができます。次の例ではdojo/mainモジュールに対するリクエストが../mypackage/dojo-main.jsにリダイレクトされます(つまりdojo/mainモジュールを差し替えることができます):

リスト22 モジュールファイルのサーバ上の位置の指定
dojoConfig.paths = {
    "dojo/main": "../mypackage/dojo-main"
};

モジュールの別名の指定(aliases)

 DojoのAMDローダーではモジュールの別名を正規表現で指定することができます。次の例ではURLのパラメータで"xxx/server/yyy"が参照するモジュールを切り替えることができます:

リスト23 モジュールの別名の指定
dojoConfig.aliases = [
    [
        /^(.*)\/server\/(.*)$/,
        function(match, token0, token1){
            return token0
             + "/" + ((location.search.match(/[\?&]server=([^&]+)/) || [])[1] || "defaultServer")
             + "/" + token1;
        }
    ]
];

まとめ

 これまで説明した通り、Dojo 1.7ではDojoがより広く使われ、さらにほかのJavaScriptフレームワークとの親和性を高める大きな進化を遂げました。またシンプルな形で非同期的なモジュールの遅延ロードができるようになったことにより、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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング