JavaScript IntelliSense

[アーティクル]
03/12/2013

IntelliSense ではコード入力中に情報が表示されるため、コードの記述が速くなり、エラーも減少します。JavaScript のエディターでクライアントスクリプトを使用すると、IntelliSense では、現在のコンテキストに基づいて使用できるオブジェクト、関数、プロパティ、およびパラメーターを示します。IntelliSense で表示されるポップアップリストから入力するコードを選択し、コードを完成することができます。

IntelliSense を使用して、次のタスクを簡単に実行できます。

メンバー情報を検索する。
言語要素をコードに直接挿入する。
コードエディターを離れることなくコンテキストを維持する。
XML ドキュメントコメント、および JavaScript IntelliSense の機能拡張の IntelliSense をカスタマイズする。

新しい JavaScript の言語サービスの機能の詳細については、Visual Studio 2012 の新機能を参照してください。

このトピックは、次のセクションで構成されています。

IntelliSense のコンテキストの確認
IntelliSense の情報の処理
JavaScript IntelliSense の機能
JavaScript IntelliSense の機能拡張
JavaScript 検証

Visual Studio の IntelliSense の機能の詳細については、「IntelliSense の使用方法」を参照してください。

IntelliSense のコンテキストの確認

JavaScript IntelliSense では、現在のスクリプトのコンテキストに関連するすべてのスクリプトに基づいてコードを選択できます。これには、現在のファイル内のスクリプト要素が含まれます。また、スクリプトファイル参照、アセンブリスクリプト参照、サービス参照、ページに関連付けられた参照など、作業中のスクリプトから直接的または間接的に参照されるコードもすべて含まれます。

現在のスクリプトのコンテキストは、次の項目に基づいて作成されます:

すべてのスクリプトで定義される関数はアクティブなドキュメントにブロック。ファイル名拡張子が .aspx、.ascx、.master、.html、および .htm のファイルでは、インラインスクリプトブロックがサポートされています。
別のスクリプトファイルを指定する src の属性のscript の要素。参照先スクリプトファイルのファイル名拡張子は .js であることが必要です。
JavaScript は reference ディレクティブを使用してその参照を他の JavaScript ファイルします。
グローバルオブジェクト、IntelliSense の拡張機能、遅延読み込みスクリプトファイルグループの参照。
XML Web サービスへの参照。
Web アプリケーションが ASP.NET AJAX アプリケーションの場合は、ScriptManager コントロールおよび ScriptManagerProxy コントロール。
AJAX 対応の ASP.NET Web アプリケーションの作業をしている場合は、Microsoft Ajax Library。

[!メモ]

IntelliSense は、HTML 要素のイベントハンドラー属性内のスクリプトや href 属性に定義されたスクリプトではサポートされません。

IntelliSense の情報の処理

JavaScript IntelliSense を提供するには、言語サービス、次の操作を実行します:

アクティブドキュメント内の参照に基づいており、再帰的にチェックのスクリプトに基づいて、参照ファイルで参照する依存の JavaScript ファイルのリストを作成します。
リストを走査し、各ファイルから型情報やその他の関連データを収集します。
データを集計して、IntelliSense に型情報やデータを使用できる JavaScript の言語サービスに渡します。
ファイルで IntelliSense のリストに影響する可能性がある変更を監視し、必要に応じてリストを更新します。リモートストアのスクリプトは、(HTTP を使用して参照されるような) 監視するしません。

JavaScript IntelliSense の機能

JavaScript IntelliSense では次のオブジェクトをサポートします:

ドキュメントオブジェクトモデル (DOM: Document Object Model) 要素
組み込みオブジェクト
ユーザー定義の変数、関数、およびオブジェクト
スクリプト参照、参照ディレクティブと参照グループなどの参照を使用して外部ファイルで定義されているオブジェクト。
パラメーターやフィールドなどの [XML ドキュメントのコメント]で、指定されたオブジェクト。
標準的な JavaScript のコメントでタグを使用して記述するオブジェクト (//)。詳細については、「JavaScript IntelliSense の拡張」を参照してください。
JavaScript IntelliSense の機能拡張機構を使用してサポートされるオブジェクト。詳細については、「JavaScript IntelliSense の拡張」を参照してください。
ASP.NET AJAX オブジェクト

IntelliSense がオブジェクトの種類を決定できないときにアクティブドキュメント識別子を使用してステートメント入力候補のオプションを提供します。詳細については、「識別子の入力候補」を参照してください。

HTML DOM 要素

JavaScript IntelliSense は body、formと divなどの HTML (DHTML) の DOM 要素に動的プログラミングの参照を提供します。現在のドキュメントとマスターページに含まれる要素だけが IntelliSense によって表示されます。JavaScript IntelliSense では、window と document のオブジェクトとメンバーをサポートします。

組み込みオブジェクト

JavaScript IntelliSense は、組み込みオブジェクト Array、String、Math、Dateと Numberのプログラミングで参照をネイティブに示します。組み込みオブジェクトの詳細については、「組み込みオブジェクト (JavaScript)」を参照してください。

ユーザー定義の変数、関数、およびオブジェクト

JavaScript ファイルを変更すると使用可能なすべてのコードリソースを確認するには、Visual Studio 開かれる、リファレンスドキュメントで検索します。これには、ユーザーが作成した変数、関数、およびオブジェクトが含まれます。これらのリソースは、JavaScript IntelliSense で利用できます。

ユーザー定義の変数、関数、およびオブジェクトの詳細については、MSDN Web サイトの「Creating Your Own Objects」を参照してください。

外部ファイル参照

コードの IntelliSense のサポートを実現するために、外部ファイル参照のさまざまな型を含めることができます。外部ファイル参照がスクリプト参照、参照ディレクティブでない可能性もあるので、参照はグループを使用して指定できます。

スクリプト参照

ページ内にすべてのクライアントスクリプトを記述する代わりに、スクリプトコードを格納した外部ファイルを参照できます。これによって、ページ間でのコードの再利用が容易になり、ブラウザーでクライアントスクリプトをキャッシュできるようになります。

ASP.NET AJAX 対応の Web ページで作業していない場合は、script 要素の開始タグにある src 属性を使用して外部スクリプトファイルを参照できます。src 属性には、ソースコードまたはデータを格納した外部ファイルへの URL が指定されます。

script タグの src 属性を使用してスクリプトファイルを参照するマークアップの例を次に示します。

<script type="text/javascript" src="~/Scripts/JavaScript.js">
  
</script>

ASP.NET AJAX 対応の Web ページで作業している場合は、ScriptManager コントロールの ScriptReference オブジェクトを使用してスクリプトファイルを参照できます。

ScriptManager コントロールの ScriptReference オブジェクトを使用してスクリプトファイルを参照するマークアップの例を次に示します。

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/Scripts/JavaScript.js" />
  </Scripts>
</asp:ScriptManager>

IntelliSense では、ASP.NET AJAX Web アプリケーションのアセンブリ内にリソースとして埋め込まれるスクリプトファイルもサポートされます。埋め込みスクリプトリソースの詳細については、「Embedding a JavaScript File as a Resource in an Assembly」を参照してください。

参照ディレクティブ

reference ディレクティブを使用すると、現在編集中のスクリプトとその他のスクリプトとの間の関係を Visual Studio で確立できます。reference ディレクティブにより、現在のスクリプトファイル内のスクリプトのコンテキストにスクリプトファイルを含めることができます。これにより、コードの入力時に、外部で定義されている関数、型、およびフィールドを IntelliSense で参照できます。

XML コメントの形式で reference のディレクティブを作成します。このディレクティブは、ファイル内で他のいずれのスクリプトよりも前に定義する必要があります。reference ディレクティブには、ディスクベースのスクリプト参照、アセンブリベースのスクリプト参照、サービスベースのスクリプト参照、またはページベースのスクリプト参照を含めることができます。

ディスクベースの参照ディレクティブを使用する例を次に示します。最初の例では、言語サービスはプロジェクトファイル (たとえば、.jsproj) を含む同じフォルダー内のファイルを検索します。

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

/// <reference path="Scripts/ScriptFile2.js" />

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

/// <reference path="~/Scripts/ScriptFile4.js" />

アセンブリベースのスクリプトへの参照を作成する方法の例を次に示します。

/// <reference name "Ajax.js" assembly="System.Web.Extensions, ..." />

サービスベースのスクリプトへの参照方法の例を次に示します。

/// <reference path="MyService.asmx" />

/// <reference path="Services/MyService.asmx" />

/// <reference path="../MyService.asmx" />

/// <reference path="~/Services/MyService.asmx" />

[!メモ]

JavaScript IntelliSense は、Web アプリケーションプロジェクト (WAP) Web サービス (.asmx) ファイルに含まれるスクリプトではサポートされません。

ページベースのスクリプトへの参照方法の例を次に示します。

/// <reference path="Default.aspx" />

/// <reference path="Admin/Default.aspx" />

/// <reference path="../Default.aspx" />

/// <reference path="~/Admin/Default.aspx" />

reference ディレクティブには、次の規則が適用されます。

reference XML コメントは、他のいずれのスクリプトよりも前に定義する必要があります。
XML コメントの構文を 3 つのスラッシュと共に使用する必要があります。標準のコメントの構文 (2 つのスラッシュ) を使用して作成された参照は無視されます。
ディレクティブごとに、1 つのファイルまたは 1 つのリソースだけを指定できます。
ページベースのスクリプトへの複数の参照は指定できません。
ページ参照を指定する場合、これ以外の種類の参照ディレクティブは指定できません。
ファイル名には相対パスを使用します。ティルダ演算子 (~) を使用すると、アプリケーションルートに対する相対パスを指定できます。
絶対パスは無視されます。
参照されるページにある参照ディレクティブは処理されません。つまり、参照ディレクティブは、ページに対して再帰的には解決されません。ページによって直接参照されるスクリプトだけが含まれます。

参照グループ

IntelliSense 特定の .js ファイルがすべての JavaScript、プロジェクトのスコープ内にあることを指定するために参照グループを使用できます。3 人の参照:グループを使用できます。暗黙の (Windows)、暗黙 (Web)、およびワーカー専用のグループの参照。暗黙的な (Windows) 参照は JavaScript を使用して Windows ストアの apps 用であり、暗黙の (Web) 参照は HTML5 プロジェクト用です。これらの暗黙的な参照変換グループに含まれるファイルがコードエディターで開かれた .js ファイルのスコープ内にあります。

専用のワーカー HTML5 Web 参照はグループのワーカースレッド用です。このグループに指定したファイルは、専用のワーカー参照グループへの明示的な参照する .js ファイルのスコープ内にあります。暗黙の参照は、専用のワーカー参照グループへの明示的な参照する .js ファイルには適用されません。

JavaScript コードエディターで暗黙の参照を指定できるように構成オプションを使用できます。詳細については、「[オプション]、[テキストエディター]、[JavaScript]、[IntelliSense]」を参照してください。

ヒント
IntelliSense の参照は、通常、グローバルなオブジェクトと IntelliSense 拡張機能の IntelliSense サポートを提供するために使用されます。スクリプトまたはローダーを使用して、実行時に読み込む必要があるスクリプトでは、この機能を使用できます。

XML ドキュメントのコメント

XML ドキュメントコメントは、スクリプトに追加される説明テキストです。これらの説明テキストは、IntelliSense には、コメントされたスクリプトを参照すると表示されます。たとえば、関数のパラメーターと戻り値に関する情報を提供します。XML ドキュメントコメントは、参照ファイル、アセンブリ、およびサービスでのみ使用できます。詳細については、「XML ドキュメントコメント (JavaScript)」および「方法: JavaScript XML ドキュメントのコメントを作成する」を参照してください。

IntelliSense では、次のファイル参照が使用されているときに XML コメントのコード参照を表示できます。

別の .js ファイルを参照する .js ファイル。
.aspx ファイルを参照する .js ファイル。
.js ファイルを参照する .aspx ファイル。

いずれかの .aspx ファイルで別の .aspx ファイルを参照している場合、IntelliSense は使用できません。

ASP.NET AJAX オブジェクト

ASP.NET AJAX も JavaScript IntelliSense をサポートしています。ASP.NET AJAX では、ECMAScript (JavaScript) で使用できる標準の型を拡張するクライアントフレームワークが含まれています。ASP.NET AJAX オブジェクトに関する詳細を提供すると、JavaScript IntelliSense を有効にするには、XML ドキュメントコメントは Microsoft Ajax Library全体に追加されました。これらの XML ドキュメントコメントは ASP.NET AJAX ライブラリに含まれる型およびメンバーを使用すると表示されます。

[!メモ]

プライベートメンバーは JavaScript IntelliSense によって表示されます。プライベートメンバーは、ASP.NET AJAX ではアンダースコア (_) で始まるメンバーとして表されます。

JavaScript IntelliSense の機能拡張

JavaScript の言語サービスは、サードパーティのライブラリを使用する開発者の IntelliSense の機能を変更できる関数とオブジェクトが用意されています。これらの機能は既定の言語サービスが貴社に提供するすべての情報を提供する場合に特に役立ちます。詳細については、「JavaScript IntelliSense の拡張」を参照してください。

JavaScript 検証

検証スクリプトを JavaScript では、Background に連続的に発生します。Visual Studio が JavaScript コードの構文エラーを検出すると、フィードバックは次のように提供されています:

エディター内の下線付き要素。赤い波型の下線はエラーを示します。マウスポインターをエラーの上に置くと、ツールヒントにエラーの説明が表示されます。
[エラー一覧] ウィンドウ。[エラー一覧] ウィンドウに、エラーの説明、エラーが発生したファイル、行番号と列番号、およびプロジェクトが表示されます。[エラー一覧] ウィンドウを表示するには、[表示] メニューの [エラー一覧] をクリックします。
[出力]ウィンドウに読み込まれていない参照が表示されます。

ページのトップへ

参照

次の方法で共有