Dojo Toolkit 1.8で導入されたAuto Requireを試してみる
この記事を書いた時点でのDojo Toolkitのバージョンは1.8.0です。
DojoではリッチなUI（いわゆるウィジェット）が多数提供されています（この辺りでサンプルが見られます）。
これらのウィジェットを使うには、JavaScript内でnewしてDOMへ挿入する方法と、
HTMLタグをマークアップして、dojo/parserモジュールによって変換する方法があります。
1.7までのマークアップ
HTMLのマークアップで記述する場合、これまでは以下のように、予め利用するウィジェットのモジュールを読み込んでおく必要がありました（サンプル）。
require([ "dojo/on", "dojo/parser", // 以下、利用するウィジェット "dijit/form/Button", "dijit/Dialog" ], function(on, parser) { … });
... <!-- HTMLタグにdata-dojo-typeで変換先ウィジェットを指定する --> <button data-dojo-type="dijit.form.Button" data-dojo-id="openBtn">ダイアログを開く</button> <!-- data-dojo-idは各ウィジェットをJavaScriptから参照するための変数名、data-dojo-propsは変換時の追加プロパティー --> <div data-dojo-type="dijit.Dialog" data-dojo-id="dialog" data-dojo-props="title:'解説',style:'width:200px'"> ... </div> ...
1.8から使えるマークアップ
一方、1.8ではこれまでのドット区切りの代わりに、各モジュールをスラッシュ区切りで記述することで、
未ロードのモジュールを自動的にrequire（Auto Require）してくれるようになりました（サンプル）。
require([ "dojo/on", "dojo/parser" // 利用するモジュールへの参照を省略 ], function(on, parser) { … });
<button data-dojo-type="dijit/form/Button" data-dojo-id="openBtn">ダイアログを開く</button> <div data-dojo-type="dijit/Dialog" data-dojo-id="dialog" data-dojo-props="title:'解説',style:'width:200px;'">
便利な機能ですが、意図していない所でAuto Requireされた場合など、
実行順などにまつわるバグが発生する可能性もあるので、利用には多少の注意が必要です。
このため、Auto Requireが発生したとき、dojoConfigでisDebugをtrueにしている場合は、コンソール上に警告が表示されるようです。
正常に記述していても警告が出るのは少し気になりますが、Auto Requireの警告は全モジュールを一行にまとめて表示しますし、isDebugを切れば消えるので、それほど邪魔にはならないかと思います。
変更時の修正箇所を減らす意味でも、利用する価値はありそうです。
ちなみに、明示的にrequireすれば警告は消えます。
jQuery風にウィジェット化
また、Dojo 1.8からは、JavaScriptからのウィジェット化について、
jQueryでよく見るような、指定したノードからの変換にも対応しています（サンプル）。
require([ "dojo/query", "dojo/parser", "dijit/form/Button" ], function(query, parser, Button) { // 全体のパース（data-dojo-typeが付いたDOM要素のみ対象） parser.parse(); // 指定したDOM要素を指定したウィジェットとしてパース query("button").forEach(function(node) { parser.construct(Button, node); }); });
... <button>ボタン1</button> <button>ボタン2</button> <button id="btn3" data-dojo-props="label:'カーソルを重ねてください'">ボタン3</button> ...
こちらの機能に関しては、多くの場合かえって回りくどい記述になりそうですので、利用する場面は少なそうです。
