連載:〜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で可能だったすべてのシナリオをサポートします。End of Article

   
 
インデックス・ページヘ  「〜ScottGu氏のブログより〜」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH