本シリーズ記事では、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 のカスタム モジュールの作成について紹介したいと思います。
関連リンク