CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、グレープシティが提供するJavaScriptライブラリWijmo(ウィジモ)について、サンプルとともに利用例を紹介します。今回はVisual Studioなどの開発環境と組み合わせて、Wijmoを用いた開発をより効率よく行う方法について紹介します。

はじめに

 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のトライアル版に含まれています。

図1 Wijmoのトライアル版をダウンロードできる
図1 Wijmoのトライアル版をダウンロードできる

 トライアル版のダウンロードファイルに含まれる「WijmoAppProjectTemplates.vsix」ファイルをダブルクリックするとインストーラーが起動するので、「インストール」ボタンをクリックして拡張機能をインストールします。

図2 Wijmo開発用の拡張機能をインストール
図2 Wijmo開発用の拡張機能をインストール

 拡張機能がインストールされると、Visual StudioにWijmo関連プロジェクトテンプレートが追加されます。「新しいプロジェクト」画面で右上の検索バーに「Wijmo」と入力するとWijmoテンプレートを表示できます。AngularJSの利用有無と言語の違い(JavaScriptまたはTypeScript)で4種類のテンプレートが利用できます。

図3 Visual Studio 2015にインストールされたWijmo開発テンプレート
図3 Visual Studio 2015にインストールされたWijmo開発テンプレート

 テンプレートから作成したプロジェクトは、図4のようにWijmoファイルの参照などが設定済みなので、そのままコーディングを開始できます。

図4 プロジェクト生成直後のHTMLにはWijmoファイルなどの参照が設定済み
図4 プロジェクト生成直後のHTMLにはWijmoファイルなどの参照が設定済み

TypeScriptと型定義ファイルでIntelliSenseを利用する

 Visual Studio 2015のコード補完機能はIntelliSenseと呼ばれます。一般的なHTMLタグやJavaScriptの標準関数、AngularJSのディレクティブ(独自タグ)などは、テキストエディタで途中まで入力すると候補が表示されます。また変数やメソッドの名前を変更するリファクタリング機能も利用できます。

図5 Visual Studio 2015のHTMLエディタでAngularJSのタグ候補を表示
図5 Visual Studio 2015のHTMLエディタでAngularJSのタグ候補を表示

 今回はVisual Studio 2015の支援機能を試すため、図6のようなサンプルを作成します。実行するとWijmoのゲージ(LinearGauge)が表示され、マウスやタッチで値を操作できます。下部のボタンを押すとゲージの左右が入れ替わります。完成したプロジェクトは、記事上部からダウンロードできるサンプルに含まれています(001_VisualStudio)。

図6 Visual Studio 2015で作成するWijmoのサンプル(001_VisualStudio)
図6 Visual Studio 2015で作成するWijmoのサンプル(001_VisualStudio)

 まずテンプレート「Wijmo 5 TypeScriptアプリケーション(AngularJS)」からプロジェクトを生成します。次に型定義ファイルを追加するため、ソリューションを右クリックして「ソリューションの NuGet パッケージの管理...」メニューを選択します。NuGetはVisual Studioで利用できるパッケージ管理ツールです。

図7 NuGetでソリューションにパッケージを追加
図7 NuGetでソリューションにパッケージを追加

 検索ボックスに「AngularJS DefinitelyTyped」と入力して検索し、型定義ファイル「angularjs.TypeScript.DefinitelyTyped」と「jquery.TypeScript.DefinitelyTyped」をそれぞれインストールします。jQueryは今回サンプルで利用しませんが、AngularJSの型定義ファイルが内部的にjQueryの型定義ファイルに依存するため、インストールする必要があります。

図8 AngularJSとjQueryの型定義ファイルをインストール
図8 AngularJSとjQueryの型定義ファイルをインストール

 さらにWijmoのトライアル版に含まれる型定義ファイルを図9のようにプロジェクトに追加します。今回はwijmo.d.tsとwijmo.gauge.d.tsのみを追加していますが、それ以外のWijmoコンポーネントを利用する場合は対応する型定義ファイルを追加します。

図9 Wijmoの型定義ファイルを配置
図9 Wijmoの型定義ファイルを配置

 ここまで下準備ができたらコードを記述していきます。まず生成されたHTMLファイルのbodyタグ内にリスト1を記述します。

リスト1 HTMLファイルの記述(001_VisualStudio/default.html)
<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のように編集します。

リスト2 コントローラーの記述(001_VisualStudio/controllers/appCtrl.ts)
// 型定義ファイルの参照 ...(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が使えるようになります。

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

 また変数やメソッドを右クリックして「名前の変更」を選択すればリファクタリングができます。

図11 変数名を変更するリファクタリングが可能
図11 変数名を変更するリファクタリングが可能

 リスト2のように「型定義ファイルが参照されているTypeScriptファイル」であれば、他の開発環境でも支援機能が利用できます。以下では他ツールの利用例を紹介します。

Visual Studio CodeでもIntelliSenseを利用可能

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

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

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

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

Web開発にフル対応のWebStorm

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

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

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

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

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

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

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

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

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

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

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

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

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

Sublime Textではプラグインの導入手順に注意

 Sublime TextはSublime HQ Pty Ltdが提供するテキストエディタです。プログラマーがソースコードを記述することを想定した機能を備え、プラグインによる拡張に対応しています。WebStormと同様に有料ソフトですが、無料でダウンロードして評価利用できます。評価期間に制限はありません。

図19 コーディング向け機能を備えプラグインに対応するSublime Text
図19 コーディング向け機能を備えプラグインに対応するSublime Text

 Sublime TextにはMicrosoft純正のTypeScriptプラグインが提供されています。プラグインの導入にはまずSublime Textでプラグイン(パッケージ)を管理するツール「Package Control」をインストールします。インストール手順のWebサイトに記載されたコードをコピーして、Sublime Textの「View」-「Show Console」で表示されたコンソールに貼り付け実行します。

図20 コンソールにPackage Controlのインストールコード(赤枠部)を貼り付けて実行
図20 コンソールにPackage Controlのインストールコード(赤枠部)を貼り付けて実行

 次に「Tools」-「Command Pallet...」(またはCtrl+Shift+Pショートカットキー)でコマンドパレットを開き、テキストボックスに「install」と入力して表示される「Install Package」メニューを選択します。

図21 コマンドパレットでInstall Packageを実行
図21 コマンドパレットでInstall Packageを実行

 パッケージのリストが表示されるので「TypeScript」パッケージを検索して選択するとインストールされます。

図22 TypeScriptパッケージをインストール
図22 TypeScriptパッケージをインストール

 一連のインストール後、TypeScriptファイルを表示させると、メソッドやプロパティの候補を表示できます。

図23 Sublime TextでTypeScriptのコード補完を実現
図23 Sublime TextでTypeScriptのコード補完を実現

 またTypeScriptファイルを表示した状態でCtrl+Bショートカットキーを押すと、TypeScriptファイルをJavaScriptファイルに変換できます。

図24 Sublime Textで変換されたJavaScriptファイル
図24 Sublime Textで変換されたJavaScriptファイル

 なおダウンロードできるサンプルには、これらの動作を確認できるプロジェクト(004_SublimeText)を含めています。

まとめ

 本記事では、グレープシティのJavaScriptライブラリ「Wijmo 5」をVisual Studioなどの開発環境と組み合わせて利用する方法を紹介しました。Wijmo 5はTypeScriptで開発されているため、コード補完やリファクタリングといった開発環境の支援機能が利用できるメリットを享受できます。

 TypeScriptはマイクロソフトが提唱した言語ですが、本記事で紹介したようにマイクロソフト製以外のツールも多く利用できるようになってきています。またTypeScriptを全面的に導入しないまでも、開発環境の支援機能を利用するだけの目的で、リスト2のように「コード補完したい変数にだけ型定義する」記述方法もできます。

 TypeScriptには次世代JavaScriptであるECMAScript 2015の仕様が先取りで採用されています。Wijmo 5をより便利に利用しつつ、次世代JavaScriptへの準備も進められる意味で、TypeScriptを試してみてはいかがでしょうか。

参考資料

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5