SHOEISHA iD

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

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

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

Dojo道場 ~ 第4回「ビルドでパフォーマンス・チューニング(3)」
XDローダー

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


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

XDローダーの使い方

 XDローダーを使うには、まずxdomainビルドをする必要があり、コードの書き方にも若干注意が必要です。ここでは具体的なXDローダーの使い方といくつかの注意事項を説明します。

xdomainビルド

 XDローダーを利用するには、ビルド・コマンドの引数としてloader=xdomainオプションを指定してビルドします。

> build profile=myapp action=release loader=xdomain

 すると、ビルド・ツールはデフォルト・ローダー用のビルド結果と、XDローダー用のビルド結果の両方を生成します。XDローダー用は.jsの代わりに.xd.jsというサフィックスが付きます。XDローダー用のdojo.jsはdojo.xd.jsとなります。

 なお、ここでビルド・ツールは各dojoモジュールに対し、コードの圧縮以外にもXDローダーの実行に必要なコードの埋め込みを行います。従って、デフォルト・ローダーはソース・コードのままでも実行できましたが、XDローダーはビルドせずに実行することはできません。

ビルド結果の使い方

 これまで<script>タグでdojo.jsを指定していたところをdojo.xd.jsに変えればXDローダーが使われるようになります。

<script src="http://your.server.com/myapp/dojo/dojo.xd.js"></script>

 XDローダーが使われると、dojo.require呼び出しによってモジュールがロードされる場合、自動的に.xd.jsファイルがロードされます。例えば、dojo.require("dijit._Widget")は、_Widget.jsではなく、_Widget.xd.jsをロードします。従って、使用するローダーに応じてdojo.require文を書き換える必要はありません。

遅延読み込みの書き方

 「ビルドでパフォーマンス・チューニング(2)」でdojoによる遅延読み込みの実装例としてリスト3のコードを紹介しました。

リスト3. コードの動的な読み込み
showDatePicker: function(){
    dojo["require"]("acme.widget.myDatePicker");
    var picker = new acme.widget.myDatePicker();
    ....
};

 すでに説明してきたように、XDローダーは非同期モードでコードをロードするため、このコードは動作しません。dojo.requireによってバックグラウンドで走るコードのロードおよび評価が完了するのを待ってから、そのモジュールを使用する後続の処理を開始する必要があります。そのためには、リスト4のように記述します。

リスト4. XDローダー対応のコードの動的な読み込み
showDatePicker: function(){
    dojo["require"]("acme.widget.myDatePicker");
    dojo.addOnLoad(function(){
        var picker = new acme.widget.myDatePicker();
        ....
    });
};

 dojo.addOnLoad()は、もし現在非同期でコードのロードが進行中であれば、すべてのロード処理およびロードしたコードの評価が完了してから引数で指定されたコールバックを呼び出します。dojo.addOnLoad()の前に複数個のdojo.require呼び出しをしたり、一つのdojo.require呼び出しが複数の依存モジュールのロードを発生させたりすることがあり得ますが、dojo.addOnLoad()はそれらすべての処理が完了するまでコールバックを呼ばないので安全に使えます。

 また、dojo.addOnLoad()は、もし現在非同期でコードのロードが進行中でなければ、コールバックを直ちに呼び出します。従って、リスト4はデフォルト・ローダーでも問題なく動作します。遅延読み込みを行うときは、リスト3の書き方の方が実装は容易ですが、普段からできる限りリスト4の書き方の方にしておくと、デフォルト・ローダーとXDローダーの両方をサポートできるコードになります。

同一ドメイン内でのXDローダーの利用

 XDローダーの非同期処理はパフォーマンス改善にも役立つ説明をしました。その効果を得るために、クロスドメイン対策の必要がない同一ドメイン内であってもXDローダーを利用したいケースがあると思います。ここで一つ注意しなければならないことがあります。XDローダーはリクエストされたモジュールのドメインを調べ、もしメインのHTMLファイルと同一ドメインであればデフォルト・ローダーと同じように同期モードのXHRでロードを行います。同一ドメインであっても<script>タグによる非同期ロードを強制させるには、リスト5のようにしてmodulePathsをhttpから始まるフルURLで指定します(※3)。

リスト5. 同一ドメイン内でXDローダーを利用する方法
<script type="text/javascript">
var djConfig = {
    parseOnLoad: true,
    modulePaths: {
        "dojo":  "http://your.server.com/myapp/dojo",
        "dijit": "http://your.server.com/myapp/dijit",
        "acme":   "http://your.server.com/myapp/acme"
    }
}
</script>
<script src="http://your.server.com/myapp/dojo/dojo.xd.js"></script>

 これにより、すべてが同一ドメイン内にあるアプリケーションであっても非同期ロードが行われるようになります。

※3

 相対パスを指定すると同一ドメインとみなされます。

まとめ

 JavaScriptのプログラミング・テクニックとしての一般的なパフォーマンス・チューニング手法も数多く存在しますが、今回の記事では(1)、(2)、(3)を通してdojoのビルド機能に関連したパフォーマンス・チューニング手法を紹介してきました。ビルドによるパフォーマンス・チューニングは比較的小さな労力で大きな効果が期待できるのが特徴です。一般的なJavaScriptパフォーマンス・チューニング手法と組み合わせることでよりパフォーマンスに優れたアプリケーションを開発していただきたいと思います。この記事がその一助となれば幸いです。

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

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

もっと読む

この記事の著者

神山 淑朗(カミヤマ ヨシロウ)

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所に勤務。現在は主にdojoベースのwebアプリケーションの研究開発に従事。

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5695 2012/01/30 11:50

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング