はじめに
Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。
Wijmoの利用では、ソースコードはHTMLやJavaScriptなどのプレーンテキストなので、「メモ帳」のようなシンプルなテキストエディタでも編集できます。とはいえ現実的な開発の現場では、何らかの開発環境を利用することになるでしょう。Visual Studioに代表される統合開発環境から、Visual Studio CodeやSublime Textのようなコーディングに特化したテキストエディタまで、目的に応じてさまざまな環境が選択できます。後述のようにWijmo 5は開発環境と組み合わせやすいライブラリで、開発環境が提供する支援機能を活用して開発効率を向上できます。
本記事ではWijmoを利用した開発で、各種開発環境の支援機能を利用する方法を紹介していきます。
対象読者
- より軽量／高速なJavaScriptのUI部品を探している方
- 今までテキストエディタで開発していて効率の悪さを感じていた方
- 開発環境の支援機能なしでは開発ができないと思っている方
使用する開発環境
今回記事では以下の開発環境について紹介します。動作OSはWindows 10 64bit版です。
- Visual Studio Community 2015 Version 14.0.25123.00 Update 2
- Visual Studio Code 1.1.1
- WebStorm 2016.1.2
- Eclipse 4.5.2
- Sublime Text 3
また開発環境が依存する以下ライブラリをインストールしています。
- Node.js v6.2.0 64bit版
- Java SE 8u92 64bit版
なおサンプルコードの動作確認はWindows 10上のMicrosoft Edge（25.10586.0.0）で行っています。Wijmo 5の動作対象ブラウザはWijmoのWebサイトを参照してください。
TypeScriptで開発されたWijmo 5は開発環境との相性良好
APIの候補を表示するコード補完や、変数やメソッドの名前を一括変更できるリファクタリングなど、開発環境の支援機能は開発効率の向上に大きく貢献します。しかしJavaScriptは変数に型定義がなく、開発環境が変数の内容を静的に判断できないため、利用できる支援機能は限定的です。
そこで型定義が行えるようにJavaScriptを拡張した言語がTypeScriptです。マイクロソフトが提唱した言語なのでVisual Studioで標準サポートされていますが、他の環境でもサポートが広がってきています。TypeScriptからJavaScriptファイルを変換して生成する、いわゆるAltJS言語です。
TypeScriptを利用すると開発環境が型定義を参照できるため、コード補完やリファクタリングなどの支援機能が利用できます。また既存のJavaScriptライブラリを参照する場合も、ライブラリが持つメソッドやプロパティなどを記述した「型定義ファイル」があれば支援機能が利用できます。Wijmo 5はもともとTypeScriptで開発されており、型定義ファイルも標準で提供されるため、TypeScriptや開発環境との相性がよいライブラリといえます。
以下では各種開発環境で支援機能を利用してWijmo開発を行う方法を説明します。
Visual Studio 2015にはWijmo用の拡張機能が提供
Visual Studio 2015はマイクロソフトが提供する統合開発環境です。以下でWijmo開発をVisual Studio 2015で行う方法を説明します。
拡張機能をインストールしてプロジェクトテンプレートを利用
Visual Studio 2015向けには、Wijmo用の公式拡張機能が提供されています。拡張機能のファイルはグレープシティが提供しているWijmo Enterpriseのトライアル版に含まれています。
トライアル版のダウンロードファイルに含まれる「WijmoAppProjectTemplates.vsix」ファイルをダブルクリックするとインストーラーが起動するので、「インストール」ボタンをクリックして拡張機能をインストールします。
拡張機能がインストールされると、Visual StudioにWijmo関連プロジェクトテンプレートが追加されます。「新しいプロジェクト」画面で右上の検索バーに「Wijmo」と入力するとWijmoテンプレートを表示できます。AngularJSの利用有無と言語の違い（JavaScriptまたはTypeScript）で4種類のテンプレートが利用できます。
テンプレートから作成したプロジェクトは、図4のようにWijmoファイルの参照などが設定済みなので、そのままコーディングを開始できます。
TypeScriptと型定義ファイルでIntelliSenseを利用する
Visual Studio 2015のコード補完機能はIntelliSenseと呼ばれます。一般的なHTMLタグやJavaScriptの標準関数、AngularJSのディレクティブ（独自タグ）などは、テキストエディタで途中まで入力すると候補が表示されます。また変数やメソッドの名前を変更するリファクタリング機能も利用できます。
今回はVisual Studio 2015の支援機能を試すため、図6のようなサンプルを作成します。実行するとWijmoのゲージ（LinearGauge）が表示され、マウスやタッチで値を操作できます。下部のボタンを押すとゲージの左右が入れ替わります。完成したプロジェクトは、記事上部からダウンロードできるサンプルに含まれています（001_VisualStudio）。
まずテンプレート「Wijmo 5 TypeScriptアプリケーション（AngularJS）」からプロジェクトを生成します。次に型定義ファイルを追加するため、ソリューションを右クリックして「ソリューションの NuGet パッケージの管理...」メニューを選択します。NuGetはVisual Studioで利用できるパッケージ管理ツールです。
検索ボックスに「AngularJS DefinitelyTyped」と入力して検索し、型定義ファイル「angularjs.TypeScript.DefinitelyTyped」と「jquery.TypeScript.DefinitelyTyped」をそれぞれインストールします。jQueryは今回サンプルで利用しませんが、AngularJSの型定義ファイルが内部的にjQueryの型定義ファイルに依存するため、インストールする必要があります。
さらにWijmoのトライアル版に含まれる型定義ファイルを図9のようにプロジェクトに追加します。今回はwijmo.d.tsとwijmo.gauge.d.tsのみを追加していますが、それ以外のWijmoコンポーネントを利用する場合は対応する型定義ファイルを追加します。
ここまで下準備ができたらコードを記述していきます。まず生成されたHTMLファイルのbodyタグ内にリスト1を記述します。
<h3>ゲージ（LinearGauge）</h3>
<!-- ゲージ ...（1）-->
<wj-linear-gauge
min="0" max="100" ...（1a）
is-read-only="false" ...（1b）
value="linearGaugeValue"...（1c）
control="linearGauge1" ...（1d）
style="width:400px">
</wj-linear-gauge>
<!-- テキスト出力 ...（2） -->
<p>設定値：{{linearGaugeValue}}</p>
<!-- ボタン ...（3） -->
<button ng-click="onToggleButtonClicked()">
ゲージの左右入れ替え
</button>
（1）でゲージ（LinearGauge）を定義します。（1a）はデータの範囲（0～100）、（1b）はマウスやタッチで操作できるようにする設定です。設定値は（1c）で指定されたlinearGaugeValue変数に格納されます。（1d）はゲージ部品自身をlinearGauge1という名前の変数で参照するための記述です。
（2）はゲージで設定された設定値（linearGaugeValue）を画面に表示する記述です。（3）はボタンで、押下時にonToggleButtonClickedメソッドを実行します。
次にコントローラーappCtrl.jsのファイル名をappCtrl.tsに変更してTypeScriptにしたあと、リスト2のように編集します。
// 型定義ファイルの参照 ...（1）
/// <reference path="../typings/angularjs/angular.d.ts" />
/// <reference path="../typings/wijmo/wijmo.d.ts" />
/// <reference path="../typings/wijmo/wijmo.gauge.d.ts" />
// get reference to the app
var app = angular.module('app');
// コントローラーの定義 ...（2）
app.controller('appCtrl', function appCtrl($scope) {
// 初期値設定 ...（3）
$scope.linearGaugeValue = 80;
// ボタン押下時の処理 ...（4）
$scope.onToggleButtonClicked = function () {
// LinearGaugeオブジェクトを取得 ...（4a）
// linearGauge1はTypeScriptで型指定されているのでIntelliSenseが有効
var linearGauge1: wijmo.gauge.LinearGauge = $scope.linearGauge1;
// directionプロパティを切り替え ...（4b）
if (linearGauge1.direction == wijmo.gauge.GaugeDirection.Left) {
linearGauge1.direction = wijmo.gauge.GaugeDirection.Right;
}
else {
linearGauge1.direction = wijmo.gauge.GaugeDirection.Left;
}
};
});
（1）でTypeScriptの型定義ファイルを参照しています。（2）がコントローラーの定義で、（3）でゲージ値（linearGaugeValue）の初期設定をしています。（4）はボタン押下時の処理です。（4a）でLinearGaugeのオブジェクト（linearGauge1）を取得し、（4b）でオブジェクトのdirectionプロパティを参照して値（LeftまたはRight）を切り替えています。
実装完了後、Visual Studioの実行ボタンを押すと、図6のようにWebページが表示されます。この時内部的にはVisual Studio 2015がTypeScriptをJavaScriptに自動的に変換しています。
ところでリスト2（4a）でlinearGauge1変数を宣言時、変数名の後ろに「: wijmo.gauge.LinearGauge」という記述を付加しています。これはTypeScriptの記法で、変数がwijmo.gauge.LinearGauge型のオブジェクトであることを表しています。この記述により開発環境がlinearGauge1変数の型を識別できるようになり、IntelliSenseが使えるようになります。
また変数やメソッドを右クリックして「名前の変更」を選択すればリファクタリングができます。
リスト2のように「型定義ファイルが参照されているTypeScriptファイル」であれば、他の開発環境でも支援機能が利用できます。以下では他ツールの利用例を紹介します。
Visual Studio CodeでもIntelliSenseを利用可能
Visual Studio Codeはマイクロソフトが提供するコードエディタです。コーディングにより特化した、Visual Studio 2015より軽量なツールです。
Visual Studio Codeでは、Visual Studioのプロジェクト一式をそのまま読み込み、コードを編集できます。Visual Studio 2015同様のIntelliSenseやリファクタリングも利用可能です。Visual Studio 2015で作成したプロジェクトをちょっとだけ修正したいといった時に便利です。
Web開発にフル対応のWebStorm
WebStormはJetBrainsが提供するHTML／JavaScript向け開発環境です。Node.jsやAltJS・AltCSSなど、Web関連技術を広くサポートしたWeb開発専用環境です。有料ツールですが、30日間の評価利用ができます。
WebStormは標準でTypeScriptに対応しているので、Visual StudioやVisual Studio Codeで作成したコードをそのままインポートすれば、コード補完やリファクタリング機能が利用できます。ダウンロードできるサンプルに含まれるWebStormプロジェクト（002_WebStorm）で動作を確認できます。
なおWebStormは標準でTypeScriptコンパイラが利用できますが、デフォルトで無効にされています。「File」-「Settings...」設定でTypeScriptコンパイラを有効にできます。利用にはNode.jsがインストールされている必要があります。
EclipseではプラグインでTypeScript対応
Eclipseは、Eclipse Foundationが提供する統合開発環境です。もともとはJava向けの開発環境ですが、プラグインによりHTML／JavaScriptなどの様々な言語に対応します。
TypEcsは、EclipseにTypeScriptのエディタ機能を付加するプラグインです。Eclipseの「Install New Software」メニューからインストールします。インストール方法の詳細はインストールガイドを参照してください。
TypEcsプラグインがインストールされたEclipseでリスト2のTypeScriptファイルを表示させると、Wijmoオブジェクトのプロパティやメソッド名のコード補完を利用できます。リファクタリング機能で変数名を変更することもできます。
なおダウンロードできるサンプルにはEclipseプロジェクト（003_eclipse）を含めています。このプロジェクトはEclipseがC:\eclipseにインストールされていることを想定しています。
Sublime Textではプラグインの導入手順に注意
Sublime TextはSublime HQ Pty Ltdが提供するテキストエディタです。プログラマーがソースコードを記述することを想定した機能を備え、プラグインによる拡張に対応しています。WebStormと同様に有料ソフトですが、無料でダウンロードして評価利用できます。評価期間に制限はありません。
Sublime TextにはMicrosoft純正のTypeScriptプラグインが提供されています。プラグインの導入にはまずSublime Textでプラグイン（パッケージ）を管理するツール「Package Control」をインストールします。インストール手順のWebサイトに記載されたコードをコピーして、Sublime Textの「View」-「Show Console」で表示されたコンソールに貼り付け実行します。
次に「Tools」-「Command Pallet...」（またはCtrl＋Shift＋Pショートカットキー）でコマンドパレットを開き、テキストボックスに「install」と入力して表示される「Install Package」メニューを選択します。
パッケージのリストが表示されるので「TypeScript」パッケージを検索して選択するとインストールされます。
一連のインストール後、TypeScriptファイルを表示させると、メソッドやプロパティの候補を表示できます。
またTypeScriptファイルを表示した状態でCtrl＋Bショートカットキーを押すと、TypeScriptファイルをJavaScriptファイルに変換できます。
なおダウンロードできるサンプルには、これらの動作を確認できるプロジェクト（004_SublimeText）を含めています。
まとめ
本記事では、グレープシティのJavaScriptライブラリ「Wijmo 5」をVisual Studioなどの開発環境と組み合わせて利用する方法を紹介しました。Wijmo 5はTypeScriptで開発されているため、コード補完やリファクタリングといった開発環境の支援機能が利用できるメリットを享受できます。
TypeScriptはマイクロソフトが提唱した言語ですが、本記事で紹介したようにマイクロソフト製以外のツールも多く利用できるようになってきています。またTypeScriptを全面的に導入しないまでも、開発環境の支援機能を利用するだけの目的で、リスト2のように「コード補完したい変数にだけ型定義する」記述方法もできます。
TypeScriptには次世代JavaScriptであるECMAScript 2015の仕様が先取りで採用されています。Wijmo 5をより便利に利用しつつ、次世代JavaScriptへの準備も進められる意味で、TypeScriptを試してみてはいかがでしょうか。
