Dojo：きほんのき① - モジュール システム（前編）-
ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。
Dojo は、DOM（Document Object Model）の操作をサポートする機能や、Ajax 機能、ウィジェットと呼ばれる UI パッケージ、統一されたテーマなど、効率的にアプリ開発を進めるための非常に多くの機能を提供しています。
また、モジュール システムやクラスベースの継承システムを導入しており、Dojo が提供する様々な機能を簡単に使用したり、拡張したりできるようデザインされています。
このような Dojo の特徴はアプリ開発を行う上で役立ちますが、はじめて Dojo を使い始めるときには戸惑うことが多いかもしれません。
この連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介していきます。
第１回目となる今回は、Dojo の特徴のひとつであるモジュール システムについてご紹介します。
モジュール システムとは？
単純な Web アプリでは、すべての処理をひとつの JavaScript ファイルにまとめるだけで十分なことが多いです。
しかし、アプリの規模が大きくなるとコードの量も増えて、ひとつの JavaScript ファイルにすべてのコードを書くことは困難になってきます。
そんなとき、コードを機能ごとに分割して、複数の JavaScript ファイルとして管理する方法がとられることもあるでしょう。
ただし、それにより分割されたシンプルなコードの管理は簡単になるかもしれませんが、複数の JavaScript ファイルを読み込む際には、コード同士の依存性を考えて読み込む順番を決めなければなりません。
このような複雑になりがちな依存関係を整理するために用いられるのが JavaScript ファイルのモジュール化です。
モジュール（ファイル）を必要に応じて読み込むため、JavaScript ファイルの依存関係を気にする必要がありません。
Dojo とモジュール システム
モジュール化を実現する方法はいくつかありますが、Dojo は AMD（非同期モジュール定義）と呼ばれる形式で記述されたモジュールをサポートしています。
AMD は、モジュールと、そのモジュールが依存するモジュールを非同期で読み込む仕組みを定義する仕様のひとつです。
AMD でのモジュール読み込みは、遅延読み込みを実現し、Web ページの表示速度が向上するというメリットもあります。
AMD では define という関数を使ってモジュールを定義します。AMD でのモジュール定義方法は以下の通りです。
define(id?, dependencies?, factory);
- id：モジュールを識別するための ID。モジュール ID は通常、AMD ローダー（後述）により定義されるため、省略されます。
- dependencies：モジュールが依存するモジュール ID の配列。依存モジュールがない場合は省略します。依存モジュールは factory が実行される前に読み込まれ、読み込まれたモジュールは factory の引数へ渡されます。
- factory：モジュールをインスタンス化するために実行される関数、またはオブジェクト。dependencies に定義された依存モジュールの読み込みが完了すると実行されます。戻り値にオブジェクトを返した場合は、他のモジュールから呼び出すことができます。
AMD の仕様に従い定義されたモジュールを読み込み、使用するライブラリのことを AMD ローダーと呼びます。AMD ローダーは require という関数を使いモジュールを読み込み、使用するように定められています。Dojo も AMD ローダーのひとつです。
Dojo はこのような AMD の仕様に従い、モジュールを定義するための define、モジュールを読み込み、使用するための require という２つの関数を提供しています。
また、Dojo には AMD ローダーとしての役割のほかに、モジュールとして定義された様々な機能が用意されています。もちろん、それらのモジュールは define を使用しているので、require を使って読み込み、使用することができますし、define を使い独自のモジュールを定義することも可能です。
次回は Dojo がどのようにモジュールを使うのかをご紹介したいと思います。
- 関連リンク
- Dojo Toolkit：https://dojotoolkit.org/
- AMD：https://github.com/amdjs/amdjs-api/wiki/AMD
- ArcGIS API for JavaScript：https://developers.arcgis.com/javascript/
