dojo toolkitやってみる 1 - H2Databaseを追っかけていたりしたブログ

dojo toolkit は、基本的なDOM操作や配列の操作、イベントはもとより、UI部品やグラフ、そしてモジュール化の仕組み、ビルドツールまでそろったオールインワンのJavaScriptのライブラリです。

ただあまり日本語情報は多くなく、また、ここ数年で、内部構造の見直しやAMD(Async Module Loader)化などがあり、少し前のサンプルコードがそのままでは適切ではないケースがあるようです。

Hello Worldを書いてみます。まず、ソースをダウンロードしてきます。CDNにあるのを使うのがお手軽ですが、自作のモジュールを使うのに制限があったり、難読化されていたりするので、Dojo Toolkit SDKを持ってくるのが良いと思います(次期メジャーバージョンの2.0はgithubにあるようですが、現行の1.8はsvnのみのようです)

以下のような構成にします。

f:id:ysobj:20130223102501p:plain

sample1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
  </head>
  <body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom','dojo/domReady!'], function(dom){
        var x = dom.byId('greeting');
        x.innerHTML = 'Hello World';
      });
    </script>
  </body>
</html>

こんな感じで使う事が出来ます。

    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>

dojo toolkitの読み込みです。dojoのコアライブラリを非同期読み込みするよう設定しています。

      require(['dojo/dom','dojo/domReady!'], function(dom){

dojo/domとdojo/domReady!が必要な事を宣言します。dojo/domReady!は特別なモジュールで、dojo/domReady!を宣言すると、functionはDOMの構築が終わるまで実行がまたされるようになります。jQueryのreadyと同じですね。

必要なモジュールはrequireの第一引数に配列で書き、functionの引数として受け取ります。この例で言えば、dojo/domモジュールをdomという引数で受けています。dojo/domReady!のほうは、受け取っても使い道が無いので特に引数に指定しません。受け取る必要があるモジュールが複数ある場合は、下記のようにして、受け取る必要の無いモジュールを最後に記述するようにします。

      require(['dojo/dom','dojo/dom-construct','dojo/domReady!'], function(dom,domConstruct){

functionの引数の名前は任意につけられますので、わかりやすい名前を付ければ良いのですが、この形式、必要なモジュールが増えてきたり、一度に必要なモジュールを多数追加すると、"dojo/dom"をdomConstructで受けてしまったりとケアレスミスが発生しがちです。回避方法は無いので、インデントとか工夫して間違わないようにした方が良いです。

        var x = dom.byId('greeting');
        x.innerHTML = 'Hello World';

受け取ったdom("dojo/dom")を使って、idでElementを取得して、innerHTMLを書き換えています。これは見ての通りですね。