開発環境の便利機能で「Wijmo（ウィジモ） 5」開発をパワーアップ

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第8回

Visual Studio CodeでもIntelliSenseを利用可能

　Visual Studio Codeはマイクロソフトが提供するコードエディタです。コーディングにより特化した、Visual Studio 2015より軽量なツールです。

図12　Visual Studio Codeはよりコーディングに特化

　Visual Studio Codeでは、Visual Studioのプロジェクト一式をそのまま読み込み、コードを編集できます。Visual Studio 2015同様のIntelliSenseやリファクタリングも利用可能です。Visual Studio 2015で作成したプロジェクトをちょっとだけ修正したいといった時に便利です。

図13　Visual Studio CodeでもIntelliSenseが利用できる

Web開発にフル対応のWebStorm

　WebStormはJetBrainsが提供するHTML／JavaScript向け開発環境です。Node.jsやAltJS・AltCSSなど、Web関連技術を広くサポートしたWeb開発専用環境です。有料ツールですが、30日間の評価利用ができます。

図14　Web開発を広くサポートするWebStorm

　WebStormは標準でTypeScriptに対応しているので、Visual StudioやVisual Studio Codeで作成したコードをそのままインポートすれば、コード補完やリファクタリング機能が利用できます。ダウンロードできるサンプルに含まれるWebStormプロジェクト（002_WebStorm）で動作を確認できます。

図15　WebStormでWijmoオブジェクトのプロパティ候補を表示

　なおWebStormは標準でTypeScriptコンパイラが利用できますが、デフォルトで無効にされています。「File」-「Settings...」設定でTypeScriptコンパイラを有効にできます。利用にはNode.jsがインストールされている必要があります。

図16　設定画面でWebStormのTypeScriptコンパイラを有効化

EclipseではプラグインでTypeScript対応

　Eclipseは、Eclipse Foundationが提供する統合開発環境です。もともとはJava向けの開発環境ですが、プラグインによりHTML／JavaScriptなどの様々な言語に対応します。

　TypEcsは、EclipseにTypeScriptのエディタ機能を付加するプラグインです。Eclipseの「Install New Software」メニューからインストールします。インストール方法の詳細はインストールガイドを参照してください。

図17　TypEcsプラグインでEclipseにTypeScriptエディタを追加

　TypEcsプラグインがインストールされたEclipseでリスト2のTypeScriptファイルを表示させると、Wijmoオブジェクトのプロパティやメソッド名のコード補完を利用できます。リファクタリング機能で変数名を変更することもできます。

図18　TypEcsプラグインのエディタでWijmoオブジェクトのプロパティ候補を表示

　なおダウンロードできるサンプルにはEclipseプロジェクト（003_eclipse）を含めています。このプロジェクトはEclipseがC:\eclipseにインストールされていることを想定しています。