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

Document created by yuki_ozawaesrij-esridist Employee on Apr 12, 2019Last modified by yuki_ozawaesrij-esridist Employee on Apr 17, 2019
Version 3Show Document
  • View in full screen mode

本シリーズ記事では、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.jsnpm を使用してインストールできます。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 フォルダーにコピーされます。

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

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

 

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

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

 

 

関連リンク

1 person found this helpful

Attachments

    Outcomes