Web マッピングアプリ開発に便利なツールをご紹介 : - TypeScript を使用したアプリ開発 -

本シリーズ記事では、Web マッピングアプリケーション開発を行う際に知っておくと便利なツールをシリーズでご紹介しています。

前回は Visual Studio Code を使用した開発環境の構築について紹介しました。今回は TypeScript を使用した開発と環境設定について紹介します。

TypeScript は JavaScript にコンパイル可能で、JavaScript の変数に型を設定してコーディングができるのが特長の言語です。

Web アプリ開発でよく使われる多くの API が TypeScript で利用な型定義ファイルを公開していて、それらを使うことでコードのメソッドの引数を確認できたり、型のチェックをしてくれるので、タイプミスも減らせて効率的にコーディングができます。

使用したい API に型定義ファイルが用意されているかは、TypeSearch のページで調べられます。

ArcGIS API for JavaScript にも型定義ファイルが用意されています。

本記事では TypeScript と ArcGIS API for JavaScript の型定義ファイルを使うための開発環境の設定方法を紹介します。

ArcGIS API for JavaScript は地図アプリ開発用の API です。機能や使い方は「はじめての Web マッピングアプリケーション開発」シリーズで紹介しているので、こちらもご覧ください。

TypeScript のインストール

TypeScript は Node.js と npm を使用してインストールできます。Node.js をインストールしていない場合は Node.js のサイトからインストーラーをダウンロードして実行します（Node.js をインストールすると npm も自動でインストールされます）。インストールが完了したら、以下のコマンドで Node.js と npm のバージョンを確認します。

node --version
npm --version

Visual Studio Code に用意されたターミナル画面で確認できます。

次に TypeScript をグローバルに使えるようにインストールします。

npm install -g typescript

これにより TypeScript のコードを JavaScript にコンパイルするために使用される tsc と呼ばれるコマンドラインツールがインストールされます。

TypeScript がインストールされたバージョンを確認します。

tsc -v

続いて作成するアプリのフォルダー構成を決めます。今回は以下のようなフォルダー構成にします。

ルートフォルダー/
      index.html
      package.json
      tsconfig.json
      app/
            main.ts

各ファイルの役割は後ほど説明します。

ArcGIS API for JavaScript の型定義ファイルのインストール

アプリのルートフォルダーで次のコマンドを実行します。

npm init --yes
npm install --save @types/arcgis-js-api

最初のコマンドは package.json をルートフォルダーに作成します。2番目のコマンドで ArcGIS API for JavaScript の型定義ファイルをインストールします。

Dojo の型定義ファイルをインストールする（オプション）

ArcGIS API for JavaScript は Dojo をベースに作成されているので、アプリを開発する際にも Dojo を使う機会があるかもしれません。

Dojo を TypeScript で使用するために、オプションで Dojo 1 Typings をインストールします。

npm install dojo-typings --save-dev

アプリの作成

以下のコードで index.html を作成します。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>my map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
    <script>
      var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
      window.dojoConfig = {
        packages: [
          {
            name: "app",
            location: locationPath + "/app"
          }
        ]
      };
    </script>
    <script src="https://js.arcgis.com/4.11"></script>
  </head>
  <body
    <div id="viewDiv"></div>
    <script>require(["app/main"]);</script>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

続いて、以下のコードで main.ts （TypeScript ファイル）を作成します。

import EsriMap = require("esri/Map");
import MapView = require("esri/views/MapView");

const map = new EsriMap({
  basemap: "streets"
});

const view = new MapView({
  map: map,
  container: "viewDiv",
  center: [139.745433, 35.658581],
  zoom: 15
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

例えば、main.ts ファイルの最後の行に view. と入力すると MapView オブジェクトで利用可能なプロパティやメソッド、引数などが表示されます。

これで TypeScript を使用して開発する準備が整いました。

TypeScriptをコンパイルする

ある程度コーディングして動作を確認したいとなったら、TypeScript を JavaScript にコンパイルする必要があります。

アプリのルートフォルダーに tsconfig.json ファイルを作成し、以下のように設定します。

{
    "compilerOptions": {
      "module": "amd",
      "noImplicitAny": true,
      "sourceMap": true,
      "jsx": "react",
      "jsxFactory": "tsx",
      "target": "es5",
      "experimentalDecorators": true,
      "preserveConstEnums": true,
      "suppressImplicitAnyIndexErrors": true
    },
    "include": [
      "./app/*"
    ],
    "exclude": [
      "node_modules"
    ]
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

tsconfig.json ではコンパイルのパラメーターを設定します。主なオプションは次のとおりです。

compilerOptions.esModuleInterop: true の場合は、import x from 'xyz' のような import 構文を使用できます
compilerOptions.module: ArcGIS API for JavaScript に合わせて、TypeScript コードを AMD モジュールにコンパイルします
compilerOptions.target: サポートされている全てのブラウザで動作するように ES5 に出力します
include : コンパイルするファイルを指定します（グロブのようなファイルパターンを使用できます。ここでは app フォルダー以下の全てのファイルをコンパイルします）

次に、アプリケーションのルートで、次のいずれかのコマンドを実行します。

tsc: このコマンドは tsconfig.json の設定に基づいて TypeScript を JavaScript にコンパイルします
tsc -w: このコマンドも tsc と同じですが、ファイルの変更を監視し、TypeScript ファイルが編集されたら自動で再コンパイルします

tsc -w コマンドを実行してみましょう。

実行すると app フォルダーに main.js ファイルが作成されます。index.html を Web ブラウザで開くと ArcGIS Online の道路地図が表示されます。

試しに main.ts の MapView コンストラクタの zoom プロパティを適当な値に変更してファイルを保存すると、自動で JavaScript ファイルにコンパイルされるので、ブラウザをリロードすると、地図の初期表示スケールが変わります。

※ 型定義がされているので、例えば zoom プロパティ（Numbaer 型）に文字列を入力してみるとエラーが表示されコンパイルが行われません。

必要なファイルをコピーする

最終的にアプリが完成し、実際のサーバーに配置する際には main.ts や tsconfig.json 等のファイルは不要であるため、必要なファイルのみを指定のフォルダーにコピーします。

npm では package.json に定義したスクリプトをコマンドから実行することができます。

package.json のスクリプトに以下の copy コマンドを定義します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "copy-js": "cpx \"./app/*.js\" ./dist/app",
    "copy-html": "cpx \"./*.html\" dist",
    "copy-all": "npm run copy-js & npm run copy-html"
  },‍‍‍‍‍‍

cpx はファイルコピーに使用できるモジュールです。

最初に以下のコマンドで cpx モジュールをインストールします。

npm install --save-dev cpx

次に以下のコマンドを使用して copy コマンドを実行します。

npm run copy-all

dist フォルダーが作成され、フォルダー構造を維持して .html と .js ファイルのみが dist フォルダーにコピーされます。

対象のファイルが更新されたら、自動でコピーされるような設定も可能です。

より複雑な処理が必要な場合は Grunt や Gulp などのタスクランナーを使用できます。

これで TypeScript と ArcGIS API for JavaScript の型定義ファイルを使用してアプリケーションを開発する最低限必要な環境が整いました。

次回は ArcGIS API for JavaScript のカスタムモジュールの作成について紹介したいと思います。

関連リンク

ArcGIS API for JavaScript 製品ページ（Esri / ESRIジャパン）
はじめての Web マッピングアプリケーション開発シリーズ

Web マッピング アプリ開発に便利なツールをご紹介 : - TypeScript を使用したアプリ開発 -