Community

Dojo : きほんのき② - モジュール システム (後編) -

5275
0
11-13-2016 08:21 PM

Dojo : きほんのき② - モジュール システム (後編) -

 

ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。

本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。

前回は Dojo が導入するモジュール システムについてご説明しました。今回は、実際に Dojo からモジュールを読み込んで使用してみます。

 

モジュールを使ってみよう

 

では、さっそく Dojo がどのようにモジュールを読み込み、使用するのかを見てみましょう。

次のコードはブラウザーに地図を表示するサンプルです。

 

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>モジュールを使ってみよう</title>

    <!-- スタイルシートの読み込み -->
    <link rel="stylesheet" href="//js.arcgis.com/4.1/esri/css/main.css">

    <style>
      html, body, #viewDiv {
        padding:0;
        margin:0;
        height:100%;
        width: 100%;
      }
    </style>

    <!-- ライブラリの読み込み -->
    <script src="//js.arcgis.com/4.1/"></script>

    <script>
      require([
        // 読み込みたいモジュール ID
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
      ], function(
        // 読み込まれたモジュールを渡す
        Map, 
        MapView
      ){
        // 処理
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [139.76, 35.68],
          zoom: 5
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

前回、少し触れましたが、AMD ローダーはモジュールを読み込み・使用するための require 関数を定義しています。

require の第１引数に、読み込むモジュールの ID（モジュールのファイル名）を配列で渡し、第2引数に実行したい処理を記述したコールバック関数を設定します。

AMD ローダーはモジュールの読み込みが完了するとコールバック関数を実行します。

 

サンプルを見てみましょう。"esri/Map"、"esri/views/MapView"、"dojo/domReady!" の３つのモジュールを読み込んでいます。

"esri/Map" と "esri/views/MapView" は ArcGIS API for JavaScript が独自に定義した地図を作成・描画するためのモジュールです（独自モジュールの定義や利用方法については後で説明しますが、独自モジュールも AMD に従い記述するので Dojo が提供するモジュールと違いはありません）。

"dojo/domReady!" は DOM の生成前にコードが実行されることを防ぐ特殊なモジュールです。地図は viewDiv 要素に表示するため、"dojo/domReady!" を読み込み、ページ内の全ての要素の生成が終わるまで require に渡したコールバック関数を AMD ローダーが実行しないようにします。

 

読み込まれたモジュールはコールバック関数の引数に渡されます。

サンプルでは "esri/Map" モジュールを Map、"esri/views/MapView" モジュールを MapView という名前で渡しています。

ここで重要なのは、モジュールは第1引数で渡した配列の順に渡されるということです。したがって、引数に渡すモジュール名は自由に定義できますが、モジュール ID に基づいた名前を使うことが推奨されています。

 

最後に、コールバック関数内に処理を記述します。処理内で、読み込まれたモジュールを使用するには、コールバック関数の引数に渡されたモジュール名を参照します。

 

実際にサンプルを動かしてみましょう。どうですか、地図は表示されたでしょうか？

開発者ツールからネットワークを見てみると、地図を表示するのに必要な最小限のモジュール（読み込んだモジュールとそれらが依存するモジュール）だけが読み込まれていることがわかります。

 

 

モジュールを作ってみよう

 

これでモジュールの使い方はバッチリですね。今度は独自のモジュールを作ってみましょう。

次のサンプルは「モジュールを使ってみよう」で作成したサンプルから、地図を作成する処理を抜き出し、独自のモジュールとして定義したものです。

 

define([
  "esri/Map",
  "esri/views/MapView"
], function(Map, MapView){
  return {
    createMap: function(){
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [139.76, 35.68],
        zoom: 5
      });
    }
  };
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

モジュールを定義する define の形を覚えているでしょうか？

define(id?, dependencies?, factory);

サンプルでは id は省略され、dependencies に依存モジュールとして "esri/Map" と "esri/views/MapView" の2つのモジュールが定義されています。

factory には、引数に依存モジュールとして読み込まれた Map と MapView が渡されています。

そして、地図を作成する処理を行う createMap メソッドを定義し、createMap メソッドを他のモジュールから呼び出せるようにオブジェクトとして戻り値を返すようにしています。

 

作ったモジュールを使ってみよう

 

では、作成した独自モジュールを使ってみましょう。

demo フォルダーを作り、作成したモジュールのファイル名を module.js として demo フォルダーに格納してください。

以下は module.js をモジュールとして読み込み使用するサンプルです。

 

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>作ったモジュールを使ってみよう</title>

    <!-- スタイルシートの読み込み -->
    <link rel="stylesheet" href="//js.arcgis.com/4.1/esri/css/main.css">

    <style>
      html, body, #viewDiv {
        padding:0;
        margin:0;
        height:100%;
        width: 100%;
      }
    </style>

    <script>
      // dojoConfig の設定
      var dojoConfig = {
        async: true,
        packages: [{
          name: "demo",
          location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
        }]
      };
    </script>

    <!-- ライブラリの読み込み -->
    <script src="//js.arcgis.com/4.1/"></script>

    <script>
      require([
        // 読み込みたいモジュール ID
        "demo/module",
        "dojo/domReady!"
      ], function(
        // 読み込まれたモジュールを渡す
        module
      ){
        // 処理を記述
        module.createMap();
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

モジュールの読み込み・使用には require 関数を使用するのでしたね。

独自に定義したモジュールも、Dojo にあらかじめ用意されているモジュールと同様、モジュール ID を渡せば AMD ローダーで読み込み、利用することができるようになります。

しかし、独自のモジュールを使う場合、AMD ローダーでモジュール ID を定義する（モジュールの名前や格納場所を設定する）必要があります。

 

サンプルを見てみましょう。Dojo（ArcGIS API for JavaScript）を読み込む前に dojoConfig というオブジェクトを生成しています。dojoConfig は AMD ローダーが参照する Dojo の構成を設定するオブジェクトです。

この dojoConfig オブジェクトの pakcages プロパティにモジュールを設定します（パッケージはモジュールを機能ごとにまとめたものです。例えば、ユーティリティに関連するモジュール群を utils というパッケージにまとめることができます）。

packages プロパティには以下のオプションが用意されています。

  • name：他のモジュールからパッケージを読み込むときに参照するパッケージ名
  • location：参照するパッケージの格納場所へのパス
  • main：標準で読み込むモジュール名（オプション）

 

サンプルでは demo というパッケージ名を付け、パッケージのパスを \demo に設定しています。main は設定していません。

では、require を見てみましょう。"demo/module" がモジュール ID として渡されています。これは demoパッケージの module というモジュールを指定しています（demo フォルダーにある module というファイルを示しています）。

もし main オプションに module を設定していた場合、モジュール ID に "demo" を渡すだけで module を読み込むこともできます。

 

後は、コールバック関数に処理を記述するだけです。

module で定義した createMap メソッドを呼び出してみましょう。

これで独自に定義したモジュールを使って地図を表示することができます。

 

モジュール システムは、はじめて Dojo を使い始めるときに戸惑う原因のひとつかもしれません。

しかし、モジュール システムを用いることで、複雑なコードも簡単に管理でき、機能ごとに分かれているためメンテナンスも容易です。

モジュール システムを理解することで、Dojo を最大限に活かしたアプリ開発を行うことができます。

 

次回は JavaScript の基本的な操作である要素の取得や操作についてご紹介したいと思います。

 

Tags (2)
Version history
Last update:
‎11-12-2020 10:26 PM
Updated by:
Esri Contributor