Visual Studio の JavaScript インテリセンス (Intellisense)

自分もそうだが、Visual Studio (Visual Studio 2012 以降) を JavaScript のエディターとして使用するケースは多いだろう。
html や js のサンプル コードをダウンロードした場合など、 Visual Studio で [ファイル] – [開く] – [Web サイト] でフォルダーごと参照すれば良い。1 つのプロジェクト (Web サイト) として JavaScript のデバッグ (ブレークポイントの配置など) が可能だ。

さて、Visual Studio を JavaScript のエディターとして使う最大の理由は、なんといっても Intellisense だ。もはや、マニュアルやオンライン・ドキュメントを必死に探している人は少ないだろう。(まずはインテリセンスを見て、わからなければオンライン・ドキュメントでサンプルなどを見てみる。)
今回、このインテリセンスについて、ちょっと、自分の中で勘違いしていたことがあったので、軽く備忘しておく。

まずは、基本

例えば、下記のページ (html) で、処理本体がこのページ (html 内のインライン スクリプト) ではなく page.js (外部スクリプト) に入っていると仮定する。test1.js には、使用する関数などをまとめている。
これは、 実際にはよくあるケースだ。

<!DOCTYPE html>
<html>
  <body>
    . . .
    <script src='test1.js'></script>
    <script src='page.js'></script>
  </body>
</html>

この場合、page.js の中で test1.js の関数を使っていてもインテリセンスで表示されないが、 page.js に下記の通り記述すればインテリセンスが使えるようになる。

/// <reference path="test1.js" />

下図の通りだ。

js_intellisense2

もちろん、外にあるライブラリーでも同様に指定すれば、インテリセンスを使える。

/// <reference path="http://example.com/test1.js" />

このインテリセンスの参照だが、そこそこ頭が良く、例えば、test1.min.js と test1.js のように Minimization が使用されている場合などでも、 ソースで使用されている test1.min.js を指定すれば、最適なファイルを自動的に参照するようだ。(恥ずかしながら、つい最近まで勘違いしていたので、簡単にメモしておく。)

どういうことか、少し例を見てみよう。 例えば、test1.min.js と test1.js のように Minimization が使用されている場合、 以下のように記述されていると予想するだろう。Mininimation を使っているのだから、test1.js のほうにインテリセンス用のコメントが書かれていることは容易に想像がつく。

test1.min.js

function test1(a) { return "test1"; };

test1.js

function test1(a) {
  /// <signature>
  /// <summary>This is a test</summary>
  /// <param name="a">Param a is dummy</param>
  /// </signature>
  return "test1";
};

ご存じない方のために記載すると、上記の場合、下図の通り、インテリセンスの “親切さ” に違いが出る。当然、後者のインテリセンスを使いたいだろう。

js_intellisense1

js_intellisense2

こうした場合、前述の通り、test1.min.js を指定しておけば、自動的に test1.js のほうを見に行ってくれるのだ。
ソースで test1.min.js を指定している場合に、わざわざ test1.js が存在するかどうか確認し、あればこれ (test1.js) を参照するような面倒なことはしなくて良い。Visual Studio が勝手に見に行ってくれるわけだ。

/// <reference path="test1.min.js" />

この他にも、.intellisense.js という拡張子のファイル (例えば、上記の test1.js の場合、test1.intellisense.js) を使ってさらに親切な記述がされている場合もある。インテリセンスが実行時 (Runtime) のオブジェクトを解決するようなケースだ。
例えば、下記の関数 (test2) では、渡された引数が正数か確認してから結果を出力しているため、引数 (下図の変数 x) がアサインされていない状態でインテリセンスを見ようとしても、下図の通りだ。

test1.js

function test2(a) {
  if (a > 0) {
    return "test2";
  }
}

js_intellisense3

しかし、test1.intellisense.js に以下の通り記述すれば、 コーディングの際には妥当な値が入っているという前提でインテリセンスが使えるようになる。

test1.intellisense.js

window.test2 = function(a) {
  return "test2";
};

js_intellisense4

こうした場合でも、やはり、test1.min.js を参照すれば、 test1.intellisense.js を見に行ってくれるのだ。test1.js が存在している必要もない。

つまり、毎回、test1.js が存在するかといった確認は不要。いつでも気にせず、ソース (html ファイル、js ファイルなど) で参照されているライブラリーと同じものをインテリセンスで参照すれば、 最適なファイルを確認してくれるようだ。

_references.js の利用

さて、Visual Studio で構築したプロジェクトの場合、スクリプト フォルダーを見ていただくと _references.js というファイルがあり、ここに、必要なインテリセンスの参照 (上述の /// <reference … />) が多数入っている。これは Implicit な参照と呼ばれるもので、要は、すべてのプロジェクトに共通に、必ず見に行ってくれるファイルだ。

Visual Studio で [ツール] – [オプション] – [テキスト エディター] – [JavaScript] – [Intellisense] の画面で、下図のように、参照グループとして [Implicit (Web)] を選択すると、どのフォルダーが Implicit 参照されているか確認できる。この中に、下図のように、~/Scripts/_references.js が入っているわけだ。

Implicit_Reference

なお、Visual Studio 2013 以降では、この参照が追加したスクリプト (NuGet パッケージなども含む) によって自動で更新されるようになっているので注意してほしい。もし、ここを独自にカスタマイズしたいなら、_references.js を開いてマウスの右ボタンを押し、表示されるショートカット メニューの [JavaScript リファレンスの自動同期] を解除して編集する。
逆に、自動的に検出したいときには、[JavaScript リファレンスの更新] を選択すると良い。(下図参照)

Update_Reference

JavaScript の Intellisense がきかない場合の Workaround (when not working)

さて、ここまで理解したところで、JavaScript の Intellisense が反映されない場合 (うまく動作しない場合) について、解決方法を例示をしておこう。これは、実は、よくあるトラブルだ。

まず、当然だが、上述の通り、インテリセンスの参照 (/// <reference … />) がちゃんと入っているか見ていただきたい。_references.js も確認要だ。

つぎに、ライブラリーどうしが競合しているケースがあるので確認が必要だ。たとえば、jquery.dataTables 1.9 は jquery 1.10 と一緒に使うことができるが、インテリセンスについてはライブラリーどうしが競合する。このような場合には、インテリセンス参照として、jquery.dataTables に含まれている対応する jquery.js を下図のように参照しておくと良い。(下図の場合は、jquery 1.9 を使用。)
また、あわせて、上述の _references.js の中に別のバージョンの jquery (jquery 1.10 など) が入っていないか確認しておこう。(もし入っていたら削除しておく必要がある。)

Fix_Version

さいごに、これは通常の js ファイルの場合でも同様だが、順番の問題だ。インテリセンスについても順番を間違えると参照できなくなるので注意してほしい。例えば、上図の場合、jquery.js と jquery.dataTables.js の順番を逆にすると、jquery.dataTables のインテリセンスは表示されなくなる。この場合は非常に単純な例だが、実際の開発では、さまざまなライブラリーが関連し、こうした問題を引き起こす場合があるので注意してほしい。

他にも Tips はあるが、上述のような基本的な原理を理解しておくことが重要だ。基本を理解すれば、いろいろ応用的なトラブルに巻き込まれた場合も正しく対処できるだろう。

Advertisements