Web マッピング アプリ開発に便利なツールをご紹介 (Visual Studio Code のコード スニペット)
この記事では「Web マッピング アプリ開発に便利なツールをご紹介」のシリーズ記事として、ArcGIS API for JavaScript を使用して地図アプリ開発を行う方に向けて、開発の役に立つ便利なツールをご紹介します。
前回は webpack を利用したカスタム ビルドの作成方法と CLI を利用したテンプレート アプリの作成方法について紹介しました。
第四回目となる今回は、ArcGIS API for JavaScript Snippets をご紹介します。これは ArcGIS API for JavaScript のコード スニペットを提供する Visual Studio Code のエクステンションです。
Visual Studio Code とは？
Visual Studio Code とはソースコード エディタです。マイクロソフト社により開発され、Windows、Linux、macOS 上で動作します。デバッグ、Git クライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持ちます。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更することができます。Visual Studio Code での開発環境の構築方法については「Web マッピング アプリ開発に便利なツールをご紹介：～Visual Studio Code で開発環境を構築～」の記事もご覧ください。
ArcGIS API for JavaScript Snippets とは？
ArcGIS API for JavaScript Snippets は ArcGIS API for JavaScript のコード スニペットを提供する Visual Studio Code のエクステンションです。皆様は ArcGIS API for JavaScript で開発を行っている際にコードの書き方を思い出せない経験をしたことはないでしょうか？例えば、個別値分類表示したいけど、UniqueValueRenderer の使い方を忘れてしまったので、API リファレンスを参照し、サンプルコードをコピーして、それをご自身の目的に合った形にカスタマイズするといったようなことは開発者の方にとってはよくあることかと思います。ArcGIS API for JavaScript Snippetsを使用することによって、そういった面倒な手間を省き、コード スニペットを使用してより効率的に開発をすることができるようになります。
ArcGIS API for JavaScript Snippets の使用例
コード スニペットの利用例を以下の動画でご紹介します（3D マップでのラベル追加の実装）。動画を見ると、この実装はコード量が多くて複雑ということがわかるかと思います。こういった場合は、動画の中に出てくる LabelClass のプロパティをすべて覚えるのではなく、コード スニペットを利用することによって、効率よく開発を行うことができます。ご自身でつけたコード スニペットの名前（動画では labeling3d という名前）をタイプし、Tab キーを押すだけでそれを実現することができます。
ArcGIS API for JavaScript Snippets のインストール
1. Visual Studio Code で Extensions を押下してください
2. 検索バーで「ArcGIS API for JavaScript」と検索し、「ArcGIS API for JavaScript Snippet」 をインストールしてください
3. 登録されているコード スニペットの名前を確認してください
これらのコード スニペット名をタイプし、Tab キーを押せば、登録されているコード スニペットを使用することができます。登録されているコード スニペットは Github で確認することができます。もし、ここに登録したいコード スニペットがない場合は GitHub にイシューを作成するか、プルリクエストをしてください。もしくは、Github に新しく登録する必要はないけど、ご自身で新しいコード スニペットを作成したいという場合は Visual Studio Code 上に登録することができます。登録方法は「Snippets in Visual Studio Code」の記事（英語）を参照してください。
ArcGIS API for JavaScript Snippetsの対応言語
本ブログではArcGIS API for JavaScript のコード スニペットについてご紹介しているのですが、ArcGIS API for JavaScript SnippetsはArcGIS API for JavaScript 以外の言語にも対応しています。以下に対応言語の一覧を記載しますので、ぜひ使ってみてください。
・ArcGIS API for JavaScript コード スニペット
ブラウザー コンソールでデバッグする際に便利なコード スニペット
開発時だけではなく、デバッグ時に使用できるコード スニペットも用意されています。例えば、以下の動画のように「Pretty print camera」スニペットを使用すると、3D アプリをインタラクティブに操作し、現在表示されているカメラ位置のコードをコンソールに表示できます。アプリではそのコードをそのままペーストするだけで簡単に初期表示位置を設定できます。こちらのコード スニペットも Github で確認することができます。使用方法は「Run Snippets Of JavaScript On Any Page With Chrome DevTools」のチュートリアル（英語）を参照してください。また、チュートリアルでは Google Chrome デベロッパー ツールを使用していますが、Firefox を使用されている方は Scratchpad を使用して同様のことができます。
まとめ
このように ArcGIS API for JavaScript Snippets を使用することによって、コード作成の負担を減らし、開発を効率的に進めることができます。開発工数の削減をお考えの方はぜひ ArcGIS API for JavaScript Snippets を使ってみてください。
