連載：〜ScottGu氏のブログより〜 VS 2010でのJavaScript IntelliSenseの改善 Scott Guthrie 著／Chica 訳 2010/04/12

本記事は、Microsoftの本社副社長であり、ASP.NETやSilverlightなどの開発チームを率いるScott Guthrie氏のブログを翻訳したものです。氏の許可を得て転載しています。 【元記事】 JavaScript IntelliSense Improvements with VS 2010 （2010/04/08）

　これは、VS 2010および.NET 4リリースに向けたブログ投稿シリーズの第20弾です。

　本日のブログ投稿では、VS 2010および無償のWeb Developer 2010 Expressで改善されたJavaScript IntelliSenseについて、いくつかカバーします。VS 2010では、大きなスクリプト・ファイルや大きなライブラリに対して、JavaScript IntelliSenseのロードが非常に速くなっており、以前のVisual Studioのバージョンに比べると、より高度なシナリオに対するステートメント補完サポートも提供できるようになっています。

[ブログに加え、現在Twitterを使って簡単な更新やリンク共有を行っています。twitter.com/scottguで、私をフォローしてください。]

改善されたJavaScript IntelliSense

　JavaScriptのような動的言語に対してIntelliSenseを提供することは、VBやC#のような静的なタイプの言語に比べ、より複雑になります。正確に変数、メソッドなどの形や構造を推論することは、実際のコードを疑似的に実行しない限り、まったく不可能です。なぜなら、JavaScriptは言語として柔軟性があり、実行時にそれらを動的に修正また変形させるためです。

　VS 2010のJavaScriptコード・エディタは、タイピング時に、このタイプの仮想コード実行を行うことができるスマートな機能を持っています。これにより、IntelliSenseによる補完を正確で完全なものに保ちます。以下の簡単なウォークスルーでは、それが最終リリースでどれほどリッチで柔軟性を持っているかを示しています。

シナリオ 1：基本型の推論

　JavaScriptで変数を宣言するとき、その型を宣言する必要はありません。代わりに、変数の型は値に応じて割り振られます。VS 2010はエディタ内でそのコードを仮実行するので、値の型の動的な推論ができ、変数に割り当てられた値に応じた適切なコードのIntelliSenseを提供できます。

　例えば以下では、どのようにVS 2010が文字列（“foo”変数には文字列を割り当てているため）に対して、ステートメント補完を提供しているかをご確認いただけます。

図1

　もし後で“foo”に数値を割り当てた場合、（この割り当ての後の）ステートメント補完は自動的に数値に対するIntelliSenseの提供に変更されます。

図2

シナリオ 2：ブラウザ・オブジェクト操作時のIntelliSense

　ページのDOMの操作や、クライアント上で利用可能なブラウザ・オブジェクトに対する作業は、JavaScriptでは非常によくあります。

　Visual Studioの以前のバージョンでは、標準のブラウザ・オブジェクトに対してはJavaScriptステートメント補完が提供されますが、より高度なシナリオでは、あまり役に立ちません（例えば、動的変数やメソッドの作成など）。VS 2010のエディタ内のコードの仮実行では、より広範囲なシナリオに対してもリッチなIntelliSenseを提供できます。

　例えば以下では、ブラウザのwindowオブジェクトを使用して“bar”という名前のグローバル変数を作成しています。後でそれを使用するときに、VS 2010がどのようなIntelliSense（文字列に対する正確な型の推論）を提供できるのかをご確認ください。

図3

　その“bar”変数に（文字列の代わりに）数値を割り当てると、VS 2010 IntelliSenseのエンジンは正確にその型を推論し、ステートメント補完を適切に数値へ修正します。

図4

シナリオ 3：表示

　VS 2010はエディタ内でコードを仮実行するので、それに対して入力できる多くのシナリオ（実践的なものから奇抜なものまで）を処理でき、それでもなお、適切な型推論とIntelliSenseを提供します。

　例えば以下では、forループ文を使用してそのブラウザのwindowオブジェクトを動的に作成し、複数の動的な変数名（bar1、bar2、bar3、……、bar9）を付けています。どのようにエディタのIntelliSenseエンジンがそれらを認識し、ステートメント補完を提供しているかをご確認ください。

図5

　ブラウザのwindowオブジェクトを通じて追加された変数もグローバル変数であるため、それらもまたグローバル変数のIntelliSenseドロップダウンに表示されます。

図6

　さらによいことに、型推論はまだ完全にサポートされています。そのため、名前付きの変数へ文字列を動的に割り当てた場合でも、文字列に対する型推論を得られます。もし数値を割り当てると、数値に対する型推論を得られます。

　単なる遊びですが（そして見せびらかすために！）、forループ文を調整して、文字列を偶数の変数（bar2、bar4、bar6など）へ割り当てて、数値を奇数の変数（bar1、bar3、bar5など）に割り当てます。

図7

　上記で“bar2”変数に対する文字列のステートメント補完がどのように得られるかを確認してください。

　以下で“bar1”変数に対して数値のステートメント補完がどのように得られるかを確認してください。

図8

■これは単なるクールなパーティ芸ではありません……

　上記の例は少し不自然ですが、動的に変数、メソッド、イベント・ハンドラを即席で作成する方法は、多くのJavaScriptライブラリで非常によく使われています。よく使われているライブラリの多くは、これらのテクニックを使用して、スクリプト・ライブラリのダウンロード・サイズをできるだけ小さくするようにしています。これらのテクニックを使用するライブラリのパースおよび仮実行をVS 2010がサポートすることで、プログラミングを行うときには最初から、より良いコードIntelliSenseが確実に得られます。

まとめ

　Visual Studio 2010（そして無償のVisual Web Developer 2010 Express）は、よりリッチなJavaScript IntelliSenseサポートを提供します。このサポートは、ほぼすべての人気のあるJavaScriptライブラリと非常にうまく動作します。クライアント側のJavaScriptをコーディングする際や、ADO.NETアプリケーションでAJAXのシナリオを有効化するときに、より優れた開発体験を提供する手助けとなるでしょう。

　Hope this helps,

　Scott

　P.S. VS 2008のJavaScript IntelliSenseを読むと、以前のJavaScript IntelliSense（およびそれがサポートするいくつかのシナリオ）について詳細が見られます。当然ながら、VS 2010は以前VS 2008で可能だったすべてのシナリオをサポートします。

　

「〜ScottGu氏のブログより〜」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）