Visual Studio 2017 RC で JavaScript 開発がより生産的に

Article
12/06/2016

本記事は、マイクロソフト本社の The Visual Studio Blog の記事を抄訳したものです。【元記事】 More Productive JavaScript in Visual Studio 2017 RC 2016/11/28

開発者に Visual Studio が選ばれているのは、JavaScript 編集の生産性を高める各種のツールが用意されているためです。これまで Visual Studio 2017 RC では、開発者がよく使用する機能を強化することに重点が置かれてきました。その結果、開発者はコーディングにより多くの時間を割り当てられるようになっています。この記事では、Visual Studio 2017 RC で現在提供されている IntelliSense とコード参照の機能強化の中でも特に便利なものをいくつかご紹介します。

機能が豊富になった IntelliSense

Visual Studio 2017 RC の JavaScript IntelliSense では、パラメーターやメンバー一覧に関する情報がさらに多く表示されるようになりました。この新しく追加された情報は TypeScript から補充され、バックグラウンドでのスタティック分析に基づいて開発者のコードを適切に理解します。TypeScript の複数のソースを基に情報が生成されます。

jQuery ajax() 関数に関するリッチな IntelliSense

JSDoc に基づいた IntelliSense

既定での型の推定で望ましい型の情報が提示されないときは、JSDoc アノテーションから明示的に型情報が提示される場合があります。たとえば、部分的に宣言されたオブジェクトに特定の型を持たせるには、下図のように @type タグを使用できます。

これはパラメーターの情報を指定する際にも非常に便利です。JSDoc の @param を使用すると、下図のように関数のパラメーターに型を追加できます。

現在サポートされている JSDoc アノテーションについては、GitHub のこちらのドキュメント (英語) をご覧ください。

TypeScript 宣言ファイルに基づいた IntelliSense

TypeScript では、特によく使用されている JavaScript ライブラリのそれぞれの API は .d.ts ファイルで宣言されています。また、それらの定義が集められている場所として最も知られているのが DefinitelyTyped (英語) です。Visual Studio はこれらの .d.ts ファイルをバックグラウンドで使用して IntelliSense を強化します。
使用されている JavaScript ライブラリを Visual Studio が検出し、対応する .d.ts ファイルを自動的にダウンロードして参照します。ダウンロードされたこれらのファイルは %LOCALAPPDATA%\Microsoft\TypeScript のユーザーフォルダーの下にキャッシュされます (注: tsconfig.json 構成ファイルを使用している場合は、この機能は既定で無効になります)。

現時点では、npm (package.json ファイルの読み取り)、Bower (bower.json ファイルの読み取り)、または広く使用されている JavaScript ライブラリ上位約 400 種類と一致するプロジェクト内の不正確なファイルからダウンロードされた依存関係に対して自動検出機能が働きます。たとえば、プロジェクト内に jquery-1.10.min.js がある場合、jquery.d.ts ファイルがフェッチされロードされます。この .d.ts ファイルはコードの完成度、シグネチャ、コンテキストヘルプを強化する以外にユーザーのプロジェクトに影響を及ぼすことはありません。

ES6 および JSX の構文サポート

JavaScript は常に進化しており、Visual Studio でも構文の更新を迅速にサポートすることで、開発者が言語の変更点に対応していけるように支援します。ECMAScript は毎年 TC39 において標準化が行われ、言語の変更を公式にリリースしています。これらの更新によって、クラス、アロー関数、テンプレート文字列といった構文が新しくなり、JavaScript を記述する別の生産性の高い方法が登場します。Visual Studio 2017 では、モジュール、クラス、アロー関数を含む ES7 (ECMAScript 2016) の構文を完全にサポートしています。

Visual Studio 2017 RC での ES6 の構文

公式の更新に加えて、JSX (英語) のような非公式の言語拡張もあります。JSX は React 開発でよく使用される XML 風の拡張構文であり、構文のより柔軟なサポートをうたっています。Visual Studio 2017 では、jsx と tsx の両方のファイル拡張子のほか、JS ファイルや TS ファイルに直接記述された JSX 構文をサポートしています。

Visual Studio 2017 RC での JSX 構文

一般的な機能強化

言語に関する機能強化のほかに、コード参照に関する一般的な機能強化も便利です。まったく新しいナビゲーション機能である [Go To] を使用すると、全体の検索をすばやく実行し、型、関数、ファイルなどを見つけることができます。結果はカテゴリごとに絞り込め、一元的なすばやいコード参照が可能です。

[Go To] での参照 (ctrl + t または ctrl + ,)

大規模なプロジェクトまたはライブラリで開発を行っていると、すべての検索結果が非常に大量になることがあります。そうした一覧のサイズをすばやく減らすために、関数、プロパティといったカテゴリごとに全体の一覧を絞り込めるようになりました。これらの絞り込みはすべて、論理的なホットキーですばやく切り替えられます。ホットキーは IntelliSense の絞り込みボタンアイコンをマウスでポイントすると表示されます。

IntelliSense での絞り込み (Alt + m)

上記の機能強化に関する詳細や、Visual Studio 2017 に実装されている一般的な機能強化の概要については、Mark Wilson-Thomas が執筆したブログ記事「Visual Studio 2017 RC での生産性向上 (英語)」をご覧ください。

フィードバックのお願い

Visual Studio 2017 RC の新たなレベルの生産性が皆様の JavaScript 開発にお役立ていただければ幸いです。上記の機能を詳しく紹介する短いビデオ (英語) もありますが、ぜひ Visual Studio 2017 RC をダウンロードして実際にご利用ください。何か問題がありましたら IDE またはインストーラーの右上隅にある問題の報告 (英語) ツールからお気軽にお寄せください。UserVoice (英語) からのご提案もお待ちしております。

それでは、Happy Hacking!

Bowden Kelly (VS クライアント、プログラムマネージャー)@bowdenk7Bowden Kelly は、Visual Studio における開発者の生産性向上を目指して JavaScript の編集エクスペリエンスの強化に取り組んでいます。趣味はサッカーをすることやプログラミングの基礎を教えることで、トライアスロンにも挑戦したいと思っています。