Dojo Toolkitの使い方 - phithonのブログ

JavaScript フレームワークのDojo Toolkitに触ったので、簡単な覚え書きを残しておきます。
この記事を書いた時点でのバージョンは1.7.2です。

2014/03/01追記：
バージョン1.9現在でもこの記事の内容は有効です。

2018/09/30追記：
サンプルのリンク先をJSFiddleに置き換え。
バージョン1.12現在でもこの記事の内容は有効です。

Dojo Toolkitの導入

Download - The Dojo Toolkit
上記公式サイトへ行くと、4つほどの選択肢があります。

1. Builds > Cloud hosting via CDN

お勧めその1。書いてあるscriptタグをhtmlに貼り付ければ、Googleなどでホストされているのがそのまま使えます。
少し試すにも良し、実際のWebサイトにも特に問題なく使えると思います。
ただし、最適化でコメントが消えていますし、そもそもディレクトリ構造が見えないので
ソースを読みながら使って行くのには、一番下のSource版がお勧めです。

2. Builds > Download X.X.X > Dojo Toolkit Release

さっさと作るときのために最適化されてるみたいです。
外部サイトに繋げない環境ならCDN版の代わりに使えるかも知れません。

3. Builds > Download X.X.X > Dojo Base

上のさらに基本部分だけのものです。
DOM操作や基本的なアニメーション、Ajaxはこれだけで出来るようです。

4. Source > Dojo Toolkit SDK X.X.X

お勧めその2。Dojoの使い方を覚えながら開発して行くには必須です。
ソースのコメントに各種モジュールの使い方が結構ちゃんと書かれてます。
テスト用フレームワーク（Dojo Objective Harness）などもついてきます。
本番環境で使う場合は最適化するか、CDN版などに切り替えた方が良いです。

簡単なサンプル

CDN版のDojoを使って、実際に簡単なサンプルを作ってみます。

イベント処理

まずは、ボタンクリックに対してアラートダイアログを上げてみます（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojoでイベント処理</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<button id="btn1">LoVE Me Do</button>
<script>
require([
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"
], function(on, dom) {
    // btn1のclickイベントとして関数を設定
    // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/on.html
    on(dom.byId("btn1"), "click", function() {
        alert("Look at me");
    });
});
</script>
</body>
</html>

Dojoライブラリをロードするときにdata-dojo-configに指定している値は、それぞれ以下の意味になるようです。

parseOnLoad	画面ロード時にhtmlタグをDojo ウィジェットに変換する（今回はウィジェットを使っていないので特に影響なし）
async	ライブラリを非同期で読み込む（高速化）
isDebug	追加の警告などを出す

基本的にはrequire関数の第1引数に使いたいモジュールを指定すれば、
指定した全モジュールがロードされた瞬間に、第2引数の関数が実行されます。
ただし、今回のようにdojo/domReady!を指定してやると、htmlがちゃんと読み込まれるまでは関数が実行されないようになります。
それに加え、今回はイベント用にdojo/on、DOM取得用にdojo/domをロードし、on, domという変数として受け取って使っています。

DOM操作

毎回アラートを上げるだけではつまらないので、今度はDOM要素を作成して、予め用意したdivタグに追加してみます（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojoでイベント処理/DOM操作</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<button id="btn1">LoVE Me Do</button>
<div id="container"></div>
<script>
require([
    "dojo/on",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/domReady!"
], function(on, dom, domConst) {
    // btn1のclickイベントとして関数を設定
    // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/on.html
    on(dom.byId("btn1"), "click", function() {
        // div要素を作成
        // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/create.html
        var item = domConst.create("div", {
            innerHTML : 'Look at me '
        });
        // containerの最後に追加
        // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/place.html
        domConst.place(item, dom.byId("container"));
    });
});
</script>
</body>
</html>

今回はdojo/dom-constructモジュールを読み込んで、要素の作成と追加を行いました。

アニメーション

ただ単に追加しても味気ないので、今度は追加時にアニメーションさせてみます（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dojoでイベント処理/DOM操作/アニメーション</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<button id="btn1">LoVE Me Do</button>
<div id="container"></div>
<script>
require([
    "dojo/on",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/_base/fx",
    "dojo/domReady!"
], function(on, dom, domConst, fx) {
    // btn1のclickイベントとして関数を設定
    // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/on.html
    on(dom.byId("btn1"), "click", function() {
        // 透明なdiv要素を作成
        // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/create.html
        var item = domConst.create("div", {
            innerHTML : 'Look at me ',
            style : {
                opacity : 0
            },
        });
        // containerの最後に追加
        // 参考: http://dojotoolkit.org/reference-guide/1.7/dojo/place.html
        domConst.place(item, dom.byId("container"));
        // 要素の透明度を徐々に下げて画面に表示させる
        // 参考: http://dojotoolkit.org/reference-guide/1.7/quickstart/Animation.html
        fx.fadeIn({
            node : item
        }).play();
    });
});
</script>
</body>
</html>

dojo/_base/fxモジュールを読み込んで、透明度0で追加した要素を徐々に表示させています。
そもそもどのモジュールにどんな機能が入っているのかについてですが、
公式チュートリアルを読んだりググったりするのが基本になるかと思います。
日本語の情報が少なそうなので、自分も覚え書きをかねてちょくちょく書いて行こうと思います。

Dojo関連の情報源

ざっと調べた限りの情報源を書いておきます。

2014/03/01追記：
関連書籍は何冊か出ています（オライリーのDojo: The Definitive Guide: The Definitive Guide(Amazon)など）が、
Dojoはバージョン1.7（2011/12/01リリース）でrequire.js形式の非同期モジュール定義（AMD *1）を導入しており、
大幅に高速化され、モジュール間の依存関係がより明確になった代わりに、書き方がガラッと変わっています。
一応後方互換性も残されてはいますが、バージョン1.7より前に出版された書籍はほとんど役に立たないと考えて良いでしょう。
以下に挙げているDojo道場なども、最初の方の記事は以前の書き方になっている場合があるので、その点は頭に入れておいてください。
一番簡単な見分け方としては、1.7以降ではrequire/define関数のコールバック引数に処理やモジュール定義を記載している所を、それより前のバージョンではdojo.require/dojo.provideというメソッドでモジュールをロード/宣言し、次以降の行に処理を記載しています。
また、1.7以降ではdojo/domモジュールなど、比較的よく使うメソッドも別々のモジュールに定義することで本体をコンパクトに保っているのに対し、以前のバージョンではdojo.byIdメソッドなど、グローバルなdojoオブジェクトに多くのメソッドを持たせています。
基本的にはdojo.xxxという名前のメソッドが出て来たら、そのコードは古い書き方をしていると考えて良いと思います。

英語

Documentation - The Dojo Toolkit: 公式のチュートリアル。
Dojo Toolkit Reference Guide - The Dojo Toolkit - Reference Guide: 各モジュールごとの詳細な使い方。右下のQuick searchで一応全文の検索もできるようです。
API Documentation - The Dojo Toolkit: APIドキュメント。ソースコードから自動生成されてるだけで基本的に使えませんが、メソッドなどの継承関係を追うときは多少役に立つかも知れません。
The Dojo Toolkit Blog | Unbeatable JavaScript Tools: 公式サイトのブログ。リリース情報などが載るようです。

日本語

「Dojo道場」〜実用アプリ構築のためのベストプラクティス：CodeZine（コードジン）: テーマごとにいろいろ詳しく解説されているようです。

他にも見つけたら追加しておきます。

まとめ

というわけで、ごく基本的な部分について書いてみました。
元々日本語の情報が少ないのに加え、最近のバージョンアップで書き方が変わって来ているようなので、新しく始める人の参考になればと思います。
あまりフレームワークの恩恵が感じられませんが、基本も書いておかないと応用は書きようがないので、今回はここまでで。