AngularJS を Visual Studio 2013 で使用する

マイクロソフトでは JavaScript の編集エクスペリエンスの改良に継続的に取り組んでおり、その一環として、開発者向けの一般的なライブラリやパターンのサポートを進めています。AngularJS は特に一般に広く使用されている JavaScript ライブラリの 1 つ (英語) であり、多くの開発者の方から Visual Studio でのサポートを強化してほしいというご要望をいただいていました。この記事では、AngularJS の使用によって Visual Studio 2013 でのエクスペリエンスがどのように改善されたかについて説明します。このフレームワークの使用経験がない方は、まず AngularJS の Web サイトのチュートリアル (英語) をご覧ください。

今回の改良により、Visual Studio では angular オブジェクトから直接 IntelliSense によって API の候補が表示されるようになりました。

ところが、実際に AngularJS を使用して作業を始めてみると、IntelliSense が有効に機能していないと感じられるのではないかと思います。これは、Angular がアプリ起動時にオブジェクト参照を動的に読み込む方法 (依存関係挿入) を JavaScript エディターが理解していないためです。この問題を解決するために、Visual Studio コミュニティのメンバーである John Bledsoe 氏が Visual Studio エディターを補助する優秀な拡張機能を開発しました。コードの作成中に Angular アプリケーションの実行がシミュレートされることにより、IntelliSense のエクスペリエンスが飛躍的に改善されます。

ここで、拡張機能がインストールされる前の IntelliSense エクスペリエンスを見てみましょう。

スクリーンショットのアイコンを見るとわかるとおり、これは、ファイル内に存在する各識別子 (変数、パラメーター、オブジェクト メンバーなど) がリストアップされただけです。これを、.when() 関数などの $routeProvider で使用可能な API が表示されるようにしたいと思います。

拡張機能をインストールします。すると、リストの中身が大きく改善されたのがわかります。

これで、$routeProvider オブジェクトで使用可能な API が表示されるようになりました。

AngularJS をプロジェクトに追加する

これにはまず、Visual Studio 用の AngularJS 拡張機能をインストールします。angular.intellisense.js というファイルをダウンロードし、PC の Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References フォルダーに配置します。

この拡張機能は、Apache Cordova、ASP.NET (英語)、LightSwitch、Windows ストア アプリなどの JavaScript を使用する他のプロジェクトと同様に動作します。

今後リリースが予定されている Visual Studio 2015 では、Visual Studio 2015 CTP 5 (英語) からこの拡張機能を使用できます。

次に、NuGet パッケージ マネージャーを使用して AngularJS を Visual Studio のプロジェクトに追加します (https://www.angularjs.org (英語) から直接 AngularJS をダウンロードして、プロジェクトの他のスクリプトのファイルと同じ場所に配置するという方法もあります)。

これで、ソースから angular.js ファイルや angular.min.js ファイルを参照したときに、Visual Studio で AngularJS 拡張機能が使用され、JavaScript エディターのサポートが強化されます。

編集時に AngularJS を使用する

AngularJS 拡張機能を使用することで IntelliSense やコード参照などの機能を効果的に利用できるため、コーディングの時間を短縮できます。ここからは、AngularJS 拡張機能によって編集エクスペリエンスが改善されている例を簡単に見ていきます。

Angular アプリケーションを構成する

Angular アプリケーションを作成するときには、まずアプリを表すモジュールを JavaScript で作成します。ここでは、“project” という名前のモジュールを作成します。

次に、メインの HTML ファイルでこれを参照します。

project モジュールを定義したら、アプリケーションの URL を構成します。それには Angular のルーティング機能 (英語) を使用して、アプリケーション用のカスタム URL にバインドして動作させます。次に示すコードは、アプリへのルーティングのセットアップを始めているところです。組み込み済みの Angular ngRoute モジュールと $routeProvider API を使用しています。URL の定義には .when() 関数を使用しています。この関数では、該当する URL にアクセスされたときに表示する HTML と実行するアプリ ロジックを定義します。

以下は、“/list” という URL を構成した最終形のコードです。“/list” にアクセスが行われた時に listController を読み込みます。このコントローラーは、該当する URL に list.html というページを割り当て、データやモデル、動作のセットアップを処理します。

コントローラーを定義する

次に、listController という名前のコントローラーを定義します。ここでは $scope パラメーターを使用します。これは Angular で定義されている特殊なパラメーターで、HTML ビューからアクセスできます。つまり、$scope に割り当てたメンバーはすべて HTML で表示できます。

$scope API を使用するときに、IntelliSense が JSDoc のコメントを表示します。この機能により Web ブラウザーで API のドキュメントを確認する必要がなくなるため、コーディングの時間を短縮できます。

サービスを追加する

次の段階として、コントローラーから HTML ページにデータを渡します。すべてのデータをコード化して listController に含めることもできますが、アプリケーションを細かく分割して、他の機能から独立させて再利用やテストができるようにすることをお勧めします。この場合、Angular では、サービスを定義しておいてコントローラーから呼び出す方法が一般的です。サービスは、アプリの他のパーツと組み合わせて再利用することができる単一インスタンスのオブジェクトと考えることができます。

projects というサービスを定義します。このサービスをコントローラーで呼び出して、project のデータを取得することができます。ここではわかりやすくするために、オブジェクトがハードコードされたリストを戻します。

次に、projects サービスへの参照を listController に追加します。projects サービスを呼び出すと IntelliSense が機能し、allProjects メンバーが表示されるようになります。

ディレクティブを作成する

ここからはカスタム HTML コンポーネントを作成して、projects サービスから名前をリスト表示できるようにします。それにはディレクティブを作成します。ディレクティブとは自己完結型のコンポーネントで、視覚的なレイアウトと、アプリケーションで HTML の DOM 要素に割り当てる動作を組み合わせて指定します。

次のコードでは、“listProjects” という名前のディレクティブを定義しています。HTML の生成に使用する HTML テンプレートは事前に含めてあります。ここで、このディレクティブのコントローラーを記述します。IntelliSense の AngularJS 拡張機能によって、$elements パラメーターを使用するときに候補が表示されます。$elements パラメーターを使用してディレクティブの DOM 要素にアクセスすることができます。

ディレクティブを定義したら、これを HTML で使用して projects のリストを表示します。

Angular コードのナビゲーション

Go To Definition 機能では、アプリケーションで定義されている関数や変数を右クリックして [Go To Definition] を選択すると、ソースで使用している API の定義へのナビゲーションを利用できるようになります。この例では、[Go To Definition] を選択すると、projects サービスで定義した allProjects メンバーに移動します。

TypeScript で AngularJS を使用する

ここまでは、JavaScript エディターで Angular のコード編集エクスペリエンスがどのように改善されたかについて説明してきました。TypeScript 1.4 (英語) 以降を使用して Angular アプリケーションを作成する場合、DefinitelyTyped のサイトから Angular の .d.ts ファイル (英語) をダウンロードするか、または AngularJS TypeScript 1.4 の NuGet パッケージ (英語) をインストールし、それをプロジェクトに追加すると、Angular 用の API シグネチャを取得できます。

AngularJS 2.0 への展望

AngularJS 拡張機能では AngularJS 1.2 以降をサポートしています (本稿執筆時点では AngularJS 1.3 への対応のテストが進められています)。今後、AngularJS 2.0 では AngularJS 1.x とは異なる開発手法が導入される予定 (英語) で、Visual Studio で AngularJS 2.0 のコード作成パターンのサポートが必要となる見込みです。マイクロソフトは Angular チームと協力し、AngularJS 2.0 についても Visual Studio の優れたエクスペリエンスを使用できるように開発を進めています。

AngularJS 拡張機能の改良にご協力ください

この拡張機能に対するご意見をお持ちの方、またはこの取り組みにお手伝いいただける方は、ぜひ AngularJS IntelliSense プロジェクト (英語) にご参加ください。

拡張機能の開発にご協力いただける場合は、プロジェクト サイトでソース コードを確認し、Visual Studio 用の JavaScript IntelliSense 機能拡張 API のドキュメントを参照してください。この API は、John Bledsoe 氏が AngularJS 拡張機能を作成する際に使用したものです。

この拡張機能は、John Bledsoe 氏の熱心なご協力により、この数か月間で大幅に改良されました。改めてここに感謝の意を表します。また、JavaScript 開発者ツールに高い関心をお寄せいただいている開発者の皆様のご協力に深く感謝いたします。

Jordan Matthiesen (Visual Studio JavaScript ツール チーム、プログラム マネージャー) Jordan Matthiesen はマイクロソフトで 3 年間、クライアント アプリケーション開発者向けの JavaScript ツールを担当しています。それ以前は 14 年間にわたって、ASP.NET/C#、HTML、CSS、および JavaScript を使用した多種多様な Web アプリケーションや製品の開発に携わっていました。