Hello, Dojo!

Dojoを使用するには、展開したディレクトリをWebサイト内の任意の場所にコピーした後、＜Dojoのルート＞/dojo/dojo.jsを<script>タグで読み込むところから始まる。以下のサンプルは、テキストフィールドに文字列を入力した後ボタンを押すと「Hello, ＜入力した文字列＞」がアラートで表示されるという簡単なものだ。

Hello, Worldサンプル

このサンプルのソースコードは以下の通りだ。

<html>
<head>
<title>Hello, Dojo!</title>
<!-- (1) dojo/dojo.jsの読み込み -->
<script src="../js/dojo/dojo.js" djConfig="isDebug:true">
</script>
<script type="text/javascript">
  // (2) ページの読み込みが完了した際呼び出される関数 (init) を登録
  dojo.addOnLoad(init);

  function init() {
    // (3) ボタンのDOMを取得
    var button = dojo.byId("button");

    // (4) クリック時のイベントハンドラを登録
    dojo.connect(button, "onclick", function() {
      var name = dojo.byId("name");
      alert("こんにちは、" + name.value + "さん!");
    });
  }
</script>
</head>
<body>
  名前を入力:<input type="text" id="name">
  <input type="button" id="button" value="クリック!">
</body>
</html>

番号を振った部分が、Dojo特有の部分だ。コメントに目を通せば、まずは雰囲気を掴んでいただけると思う。

また、dojo/dojo.jsはダウンロードサイズ軽減のため、コードが圧縮されていて人が読むのには適していない。開発時は、同ディレクトリ内にあるdojo.js.uncompressed.jsを読み込むようにするとよいだろう。

Dojoで頻出するAPIの簡易リファレンス

上のサンプルで使用したAPIも含め、Dojoで頻出するAPIをまずは一通り簡単に紹介したい。ここで紹介するAPIを押さえておけば、Dojoの基本的なコードを読むのにそれほど不自由しなくなるはずだ。

dojo.byId()

document.getElementById()とほぼ同じ。ブラウザ間の互換性に関係なく利用できる。上のサンプルでも利用している (3)。

dojo.connect()

オブジェクトにイベントハンドラを登録するための汎用的な関数。上のサンプルでも、ボタンのクリックイベントを捕捉するために使用している (4)。ここで使用している引数は、「対象のオブジェクト、対象のイベント、イベントハンドラ」というものだが、引数のパターンは他にも複数ある。詳しくは「イベント処理API」の節で解説するが、非常に強力な関数だ。

dojo.addOnLoad()

bodyタグのonload()にイベントハンドラを接続するのとほぼ同じ。内部的にdojo.connect()を使用している。Dojoを使用したコードで、ページ読み込み直後に処理を行う場合には、必ずこの関数を使用すること。上のサンプルでも使用している (2)。

dojo.require()

モジュールを動的に読み込むための関数。「dojo.require("モジュール名")」のように使用すると、モジュール名に対応したJavaScriptファイルを動的に読み込むことができる。dojo.jsに含まれないAPIを使用する場合は必須。詳しくは「Dojoのモジュールシステム」で解説する。

console.debug(), console.debug()

コンソールに文字列を出力する。文字列は、「Firebug」という拡張機能がインストールされたFirefox上ではそのコンソールに、それ以外の環境ではWebページ上にコンソール画面が出現し、そこに出力される。詳しくは「DojoのロギングAPI」で解説する。

dojo.isXXX()

Dojoには、JavaScriptオブジェクトを引数に取り、オブジェクトの情報を簡単にテストするためのメソッドも整備されている。単純だが、ブラウザ間の細かい差異を吸収して動作してくれるのでやはり便利だ。

  • dojo.isAlien() : JavaScriptの組み込み関数ならtrue
  • dojo.isArray() : 配列ならtrue
  • dojo.isArrayLike() : 厳密には配列でなくとも、「配列のようにふるまうオブジェクト」(ArgumentsオブジェクトやDOMのコレクションなど) でもtrueを返す
  • dojo.isFunction() : 関数ならtrue
  • dojo.isObject() : オブジェクト (関数や配列、nullも含む) ならtrue
  • dojo.isString() : 文字列ならtrue

ブラウザ識別用の変数

  • dojo.isIE
  • dojo.isFF
  • dojo.isSafari
  • dojo.isOpera
  • dojo.isKhtml
  • dojo.isMozilla