Visual Studio 2008で進化するASP.NET 3.5の開発手法（前篇）

VS 2008を利用したASP.NET 3.5の開発方法を学習する 1

JavaScriptのインテリセンスとデバッグ

　VS 2008ではJavaScriptまわりのサポートが大幅に強化されています。VSの開発担当者も、Beta 2提供の段階で製品リリース時の99％の機能を付加させたとコメントしていました。しかし細かい部分では、まだベータ段階という事もあり、動作が重かったり、動作しなかったりします。これらの部分は製品出荷時には改良されていると思いますので、現時点での機能として紹介します。

JavaScriptのインテリセンス

　VS 2005では、JavaScriptの編集がメモ帳とほとんど変らなかったため、IDEが提供する機能として優秀とは言いづらいものでした。なぜ今までインテリセンスが実装されていなかったかと言うと、JavaScriptは動的言語であり、型の定義もサポートされていなかったため、実装するのが難しかったようです。しかし、VS 2008からは型の推測機能が実装され、JavaScriptの正確なインテリセンスがサポートされるようになりました。

　JavaScriptのインテリセンスはインラインスクリプトだけでなく、外部のJavaScriptファイル上も対象にすることができます。まず初めに、Webページ内に直接JavaScriptを記述するインラインスクリプト部分について解説します（図32）。

図32 インラインスクリプト上のインテリセンス

　これらのインテリセンスには入力のヒントを表示するツールチップも付いているので、VBやC#をコーディングする時と非常に近い感覚でコーディングできます（図33）。

図33 インテリセンスによる入力のヒントツールチップ

　また、前述したJavaScript独特の動的な変数の型変化にも対応しているため、一度変数にHTML要素を当てた後に、数値を上書きして当てると、変数はHTML要素として必要なインテリセンスではなく、数値として必要なインテリセンスを表示します（図34～35）。

図34 文字列として認識された場合のインテリセンス

図35 数値として認識された場合のインテリセンス（動的に表示が変化）

　上記のようなインテリセンスは、外部のJavaScriptファイル上でも同様に利用することができます。

外部JavaScriptライブラリをインテリセンスに設定する方法

　続いて、外部のJavaScriptファイル上の関数や変数を別のファイルや、インラインスクリプト上で利用する方法を紹介します。例えば次のような関数を含んだJavaScriptファイルがあるとします。

JScript.js

function JSIntellisense(Message){
    //テキストボックスに入力された値をボタンの表示テキストにする
    var text = document.getElementById("inputtext").value;
    var button = document.getElementById("requestbutton");
    button.value=text;
}

　このファイル内ではJSIntellisense関数が呼び出し可能となっています。インラインスクリプト上でインテリセンスを追加したい場合は、ソリューション エクスプローラから「JScript.js」ファイルをドラッグ&ドロップでHTMLデザイナ上に貼り付けます。これだけで、インラインスクリプト上で「JScript.js」ファイルのJSIntellisense関数をインテリセンスから呼び出すことができるようになります（図36）。

図36 インラインスクリプト上でのインテリセンス呼び出し

　次に外部のJavaScriptファイル上でインテリセンスを追加する方法についてですが、これもインラインスクリプトに非常に似ています。インテリセンスを追加したいJavaScriptファイル上にソリューション エクスプローラからドラッグ&ドロップで追加するだけです。図37の1行目に書かれている<reference>要素内にパスを記述して、コメント化する事でインテリセンスの追加が行われます。

図37 UseJScript.jsファイル上でのインテリセンス呼び出し

　この機能は現在ベータ段階のためライブラリによっては認識できないものもあります。

Microsoft AJAX Libraryのインテリセンス

　詳細な記述は後篇で行いますが、ASP.NET AJAXの一部であるMicrosoft AJAX Libraryのインテリセンスも活用できるようになっています。ただし、ベータ段階では.NET Frameworkのバージョンを3.5に設定しておく必要があります（2.0、3.0でもインテリセンスは表示されますが実行時エラーが発生します）。

　 外部のJavaScriptファイル上でMicrosoft AJAX Libraryを利用したい場合は、以下の一文をファイルのトップに記述する必要があります（図38）。

/// <reference name="MicrosoftAjax.js"/>

図38 JavaScriptファイル上でのMicrosoft AJAX Libraryのインテリセンス呼び出し

　インラインスクリプト上で利用したい場合は、AJAX ExtensionsのScriptManagerコントロールをWebページ上に貼り付ける必要があります。ScriptManagerコントロールが動的にMicrosoft AJAX Libraryを出力するので、インラインスクリプト上でMicrosoft AJAX Libraryを利用することができるようになります（図39）。

図39 インラインスクリプト上でのMicrosoft AJAX Libraryのインテリセンス

.NET Framework 3.5で利用できる3種類のJavaScriptファイル

　マルチターゲッティングサポートで.NET Framework 3.5を選択している場合に、新しい項目の追加ダイアログ内にJavaScriptファイルの形式が3種類追加されます（図40）。

図40 新しい項目の追加ダイアログ

　各項目は次のようになっています。

• AJAX クライアント コントロール
  • AJAX 対応 Web アプリケーション用 AJAX クライアント コントロール
• AJAX クライアント ライブラリ
  • AJAX 対応 Web アプリケーション用 AJAX クライアント ライブラリを作成するためのファイル
• AJAX クライアント動作
  • AJAX 対応 Web アプリケーション用 AJAX クライアント動作

　各項目では<reference>要素内に「MicrosoftAJAX.js」の記述がされているため、Microsoft AJAX Libraryのインテリセンスが活用できます。AJAX クライアント ライブラリはそれしか記述されていないので、最初からMicrosoft AJAX Libraryのインテリセンスが活用できる以外は通常のJScriptファイルと何ら変わりません。AJAX クライアント動作とAJAX クライアント コントロールを選択すると次のようなテンプレートが作成されます（違いはClientControlの部分がClientBehaviorと表示されます）。下記のソースではプロジェクト名をMicrosoftAJAXLibraryTestとしているため、名前空間も同一名となっています。

AJAX クライアント コントロールのテンプレート

/// <reference name="MicrosoftAjax.js"/>
//名前空間の定義
Type.registerNamespace("MicrosoftAJAXLibraryTest");

//MicrosoftAJAXLibraryTest.ClientControlクラスのコンストラクタの作成
MicrosoftAJAXLibraryTest.ClientControl = function() {

//継承元すべてのメンバを
    //MicrosoftAJAXLibraryTest.ClientControlクラスに引き継ぎ初期化
    MicrosoftAJAXLibraryTest.ClientControl.initializeBase(this, [element]);
}

//MicrosoftAJAXLibraryTest.ClientControlクラスの定義
MicrosoftAJAXLibraryTest.ClientControl.prototype = {
    //initializeの設定
    initialize: function() {
        MicrosoftAJAXLibraryTest.ClientControl.callBaseMethod(
            this, 'initialize');

        // ここにカスタムの初期化を追加してください
    },
//クラスの破棄
    dispose: function() {
        //ここにカスタムの破棄アクションを追加してください
        MicrosoftAJAXLibraryTest.ClientControl.callBaseMethod(
            this, 'dispose');
    }
}

//クラスの登録
MicrosoftAJAXLibraryTest.ClientControl.registerClass(
    'MicrosoftAJAXLibraryTest.ClientControl', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

　現時点で明確な住み分けは、テンプレートのファイル名同様に「動作」と「コントロール」に分けてファイル内に記述をしていく点だと考えられます。

JavaScriptのデバッグ

　VS 2005でも事前の設定を行う事でJavaScriptのデバッグは行えたものの、インラインスクリプト上のブレークポイントが設定できないなど、いくつかの制約がありました。しかし、VS 2008では、インラインスクリプト上でもVBやC#のような感覚でブレークポイントを設定してJavaScriptのデバッグが行えるようになりました。これは非常に重要で、JavaScriptによるコーディングをより効果的に行うことができます（図41）。

図41 JavaScriptのデバッグ画面

　 また、実際にデバッグ実行中にブレークポイントの追加・削除などが行えるようになっているので細かなデバッグ作業を行えます。そして、動的ページ上で設定したブレークポイントは元のファイル（.aspxファイルなど）にも反映されるようになっています。設定したブレークポイントは、VSを終了した時に保存されるため、VSを起動し直した際にブレークポイントを再度設定する必要はありません。これらの機能により編集・デバッグ効率が非常にアップしています。

ソリューションエクスプローラ内のスクリプトドキュメント

　VS 2008では、デバッグ実行中にソリューションエクスプローラ内で実際にブラウザ上に送られたJavaScriptファイルをリスト化してみることができます。外部のJavaScriptファイルや、ASP.NET AJAXのサーバーコントロールがサーバー上で生成するJavaScriptファイルも見ることができます（図43）。

図43 スクリプトドキュメント

　リスト化されたJavaScriptファイルはダブルクリックする事で、そのJavaScriptファイルの中身を見ることができます。もちろん、それらのファイル内にもブレークポイントを設定してデバッグを行うことができます。

ウォッチ・イミディエイトウィンドウなどのサポート

　ここまでにJavaScriptのデバッグがVBやC#と同等に行えることを何度か書いてきましたが、それはウォッチやイミディエイトウィンドウのサポートがしっかりされていることを表しています（図44）。

図44 スクリプトドキュメント

　ウォッチでは、ランタイムのオブジェクトメソッド、イベント、プロパティ、プロパティのタイプがすべて表示されるので詳細な情報を取得することができます。

まとめ

　前後篇に分かれているため、まだ重要な機能を紹介しきれていませんが、VS 2003からVS 2005へとバージョンアップした時よりもWebデザイナ部分の進化を感じられたかと思います。現在はまだベータということもあり、要所要所で気になる部分もありますが、今回紹介した機能に触れてみたいと思った方はぜひダウンロードして実際に利用してみてください。ただし、あくまで「ベータ」ですので、今後正式版の登場までに変更が発生する可能性があります。十分に注意をしてください。

　後篇では、ASP.NET 3.5で利用できる新機能を中心に解説します。

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. ScottGu's Blog（英語）
3. Chica's Blog