Visual Studio 2015 の JavaScript エディターの機能強化

JavaScript は、Web、モバイル アプリ、サーバー プログラミングなど、さまざまなプラットフォームでの開発で重要な役割を果たしている技術です。Visual Studio 2013 では、IntelliSense、定義への移動、色付け、JavaScript ソースの書式設定などの機能が既にサポートされていました。新しい Visual Studio 2015 ではこうしたサポートを引き継ぎ、JavaScript 開発を効率化するために以下の 3 つの分野が強化されました。

1. 主要な JavaScript ライブラリを使用する開発作業の改善
2. 新しい JavaScript ECMAScript 2015 (ES2015、旧 ES6) の言語および Web ブラウザー API のサポートの追加
3. 複雑な JavaScript コード ベースにおける生産性の向上

これらの分野は、UserVoice (英語)、ソーシャル メディア、Visual Studio の [Send-a-Smile] および [Send-a-Frown] 機能 (英語)、さらには開発者との直接的な対話から得られたフィードバックに基づいて決定されました。

この記事では、上記の分野ごとに JavaScript エディターの新機能をご紹介します。これらの新機能は Visual Studio でサポートされるすべての JavaScript プロジェクトで利用できます。

主要な JavaScript ライブラリのサポート

AngularJS 1.x と RequireJS のサポート

Visual Studio 2015 は、一般に広く使用されている AngularJS (英語) ライブラリと RequireJS (英語) ライブラリを既定でサポートします。ブログでは以前に、Visual Studio 2013 でこれらのライブラリを使用するための設定についてご説明しました (AngularJS を Visual Studio で使用する、RequireJS を Visual Studio で使用する (英語))。Visual Studio 2015 ではこれらのライブラリが標準でサポートされ、追加で設定を行う必要がなくなりました。

コードで angular.js (または angular.min.js) ライブラリを参照すると、IntelliSense、定義への移動、ナビゲーション バーのサポートが自動的に提供されます。

Angular 1.3 の IntelliSense のサポートにより、routeProvider サービスの候補を表示

同様に、require.js ライブラリを参照すると、RequireJS の IntelliSense とナビゲーションのサポートが自動的に有効になります。RequireJS のサポートをカスタマイズする方法については、RequireJS の IntelliSense のカスタマイズ (英語) を参照してください。

RequireJS の IntelliSense を使用して参照されたモジュールの候補を表示

JSDoc ドキュメントコメント

ドキュメント コメントは、作成しているアプリケーション内の API について詳細な情報を提供できる優れた方法です。また、コードを記述する際に、IntelliSense でより適切な候補を表示できるようにするためにも役立ちます。Visual Studio 2015 では、エディターが JSDoc 形式のドキュメント コメント (英語) を認識できるようになり、開発者のコーディング作業が効率化されます。JSDoc は Web の JavaScript コメントとしては非公式ながら標準となり、Angular (英語) や Ember (英語) などのライブラリで使用されています。以下に、このようなコメントを使用し、getPhotos() 関数の文書化をサポートする IntelliSense のヒントを表示した簡単な例を示します。

IntelliSense のヒントに JSDoc コメントを表示

コメントにパラメーター型を記述するときは、上記の Array のように、JavaScript の標準的な組み込みの型およびオブジェクト (String、Number、Array など) を使用できます。また、カスタム オブジェクトを定義することもできます。カスタムオブジェクトは、構成設定など、カスタム プロパティを含むパラメーターを文書化する場合に便利です。次の例では、savePhoto() 関数に渡すことができる options オブジェクトの候補が表示されています。

JSDoc を使用した構成オブジェクトの文書化

JSDoc コメントに加えて、XML 形式のドキュメント コメント (英語) も Visual Studio 2013 と同様に引き続きサポートされます。エディターでサポートされる JSDoc タグの一覧については、MSDN のドキュメント (英語) を参照してください。

言語およびブラウザーの新機能

JavaScript エディターは、言語標準や Web API の進化に合わせて更新されています。今回のリリースでは、ES2015 標準 (英語、旧 ES6) の新しい言語機能と新しい DOM API のサポートが強化されました。これは、最近発表された Microsoft Edge Web ブラウザーの同じ機能に合わせて更新されたものです。

ECMAScript 2015 (旧 ECMAScript 6) のサポート

Microsoft Edge ブラウザーは多数の ES2015 機能をサポートしていますが、これと同様に、Visual Studio の JavaScript エディターも ES2015 の大部分をサポートします。具体的には、Visual Studio 2015 は以下の機能をサポートします。

• クラス (英語)
• アロー関数 (英語) (ラムダとも呼ばれる)
• テンプレート文字列 (英語)
• rest (英語) および spread (英語) 演算子
• オブジェクト リテラルの機能強化 (英語)
• Proxy (英語)
• Symbol (英語)
• Map、Set、Weakmap、Weakset、Promise などの新しい ES2015 API とその他の API のさまざまな変更

これにより、次のようなコードを記述することが可能になります。

ES2015 の新しい言語機能を使用

LayoutManager クラスに使用されている class キーワード、メッセージ変数のテンプレート文字列、addEventListener API の 2 番目の引数として関数のコールバックを定義するために使用されているアロー関数に注目してください。詳細については、GitHub で Eric Douglas が提供する ES6 Learning (英語) レポジトリにまとめられている学習資料を参照するか、JavaScript の ES2015 バージョンの仕様 (英語) を確認してください。

モジュールなど、ES2015 機能の一部はまだサポートされていません。最新の ES2015 言語機能のサポートが重要だというご意見 (英語) が寄せられており、できるだけ早く ES2015 の仕様を完全にサポートすることを目指しています。

新しい Web ブラウザー API の IntelliSense

Visual Studio 2015 では、Microsoft Edge で使用できる新しい Web ブラウザー API でも IntelliSense をサポートします。主な API は以下のとおりです。

• タッチ イベント (英語)
• Web オーディオ API (英語)

サポートされる API の一覧を参照するには、https://status.modern.ie (英語) の Web サイトにアクセスし、フィルターを使用してプレビュー リリースで使用可能な API (英語) を表示してください。

複雑な JavaScript コードでの作業

最後にご紹介するのは、複雑な JavaScript ソースで作業しているときに、コード内での移動が困難だという開発者の皆様からのご意見に応える機能です。JavaScript ソース内で重要なコメントや API を見つけやすくするために、エディターに 2 つの機能が追加されました。これにより、コード内をより簡単に移動できるようになります。

タスク一覧

Visual Studio のタスク一覧 (英語) を使用して、ソース内の // TODO、// HACK、// UNDONE、またはカスタムのコメント トークンを把握できます。これにより、修正が必要な箇所や問題の可能性を表示できます。

タスク一覧を使用して JavaScript ソース内の TODO および HACK コメントを表示

ナビゲーションバー

JavaScript エディターではナビゲーション バーが有効になっており、JavaScript 開発者がよく使用する設計パターンとライブラリがサポートされています。これにより、コードで頻繁に使用する識別子に簡単にジャンプできるため、ソースファイルを目で確認して探す時間を短縮できます。

次の例は、エディターが ECMAScript 5 のソースを認識していることを示しています。

ナビゲーション バーを使用して、ES5 で記述された JavaScript ソースを参照

次の例は、ナビゲーション バーが ES2015 の新しい class キーワードをサポートしていることを示しています (これにより、前の例と同等のプロトタイプ構文を大幅に簡略化して記述できます)。

ナビゲーション バーを使用して、ES2015 で記述された JavaScript ソースを参照

今後の予定

ここでご紹介した機能の他にも、JavaScript エディターの優れた操作性を実現するために、さまざまなバグ修正やパフォーマンスの強化などの更新が行われています。今後も、大規模な JavaScript ソリューションの構築に役立つように、エディターをさらに強化していく予定です。

また、ES2015 のモジュールやジェネレーターなど、JavaScript 言語の最新の変更をサポートするエディターの存在が開発者にとって重要であることも理解しており、Visual Studio でそうした最新の変更を適切にサポートするように取り組んでいます。

ぜひ Visual Studio 2015 をダウンロードして、新しい機能をお試しください。オープン ソース開発者や学生、一般ユーザー、小規模な開発チームに属するプロフェッショナルの皆様には、無償の Visual Studio 2015 Community エディションが提供されています。[Send-a-Smile] や [Send-a-Frown] (英語) を使用して、この JavaScript エディターに対するご感想をお聞かせください。また、将来の JavaScript ツール開発のために UserVoice サイト (英語) での投票にもぜひご参加ください。

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