チュートリアル : Visual Web Developer での Web ページのコード編集
更新 : 2007 年 11 月
多くの ASP.NET Web ページでは、Visual Basic、C#、またはその他の言語でコードを記述します。Visual Web Developer のコード エディタを使用すると、コードを簡単に記述できるだけでなく、エラーを防ぐこともできます。また、再利用できるコードを作成する方法が用意されているので、コーディングに必要な作業の量を減らすことができます。
このチュートリアルでは、コード エディタのさまざまな機能を示します。コード エディタの一部の機能は、コーディングに使用する言語に依存します。したがって、このチュートリアルでは、プログラミング言語として Visual Basic を使用するページと、C# を使用するページの 2 種類を作成します。
このチュートリアルでは、次の作業を行う方法について説明します。
エラーの修正 (Visual Basic)
コードのリファクタリングと名前変更 (C#)
シンボルの名前変更
コード スニペットの挿入 (Visual Basic および C#)
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Studio または Visual Web Developer。
Visual Web Developer については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。
Web サイトおよびページの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順などを実行して Visual Web Developer で Web サイトを作成済みの場合は、その Web サイトを使用し、次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスの [Visual Basic] をクリックします。
選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
Visual Basic でのエラーの修正
Visual Web Developer のコード エディタを使用すると、コーディングでのエラーを防ぐことができます。エラーがある場合は、コード エディタがエラーの修正を手助けします。ここでは、エディタのエラー修正機能を示す数行のコードを記述します。
コード エディタの動作は、コーディングに使用する言語によって異なります。一般に、Visual Basic 2008 のコード エディタは、より詳細なエラー情報をコーディング時に提供します。
Visual Basic でエラー修正をテストするには
デザイン ビューで空白のページをダブルクリックして、ページの Load イベントのハンドラを作成します。
このイベント ハンドラは、単に、コードを記述する場所として使用します。
ハンドラの内部に、エラーを含む次の行を入力します。
dim var1 as inger
Enter キーを押すと、コード エディタによって、"inger" という単語に下線が引かれ、この単語が認識されないことが示されます。下線の一部は小さいアンダースコアです。
"inger" の上にマウス ポインタを置くと、エラーの内容を示すツールヒントが表示されます。
マウス ポインタを下線のアンダースコアの上に置きます。
アンダースコアが拡大し、アイコンになります。
アイコンをクリックします。
"inger" に対して修正候補の一覧が表示されます。
['inger' を 'Integer' に変更します。] をクリックします。
C# でのリファクタリングと名前変更
リファクタリングはソフトウェア手法の 1 つであり、コードを再構成して、コードの機能を維持しつつ、可読性を高め、保守を容易にすることです。簡単な例を 1 つ示します。データベースからデータを取得する 1 つのイベント ハンドラにコードを記述したとします。ページの開発を進めるに従って、複数の別のハンドラからデータにアクセスする必要があることに気付きました。このため、ページでデータ アクセス関数を作成し、これらのハンドラにこの関数の呼び出しを挿入することで、ページのコードをリファクタリングします。
コード エディタには、さまざまなリファクタリング タスクを実行する際に役立つ複数のツールが用意されています。このチュートリアルでは、シンボルの名前変更とメソッドの抽出という 2 つのリファクタリング機能を使用します。リファクタリング オプションとしては、この他にフィールドのカプセル化、ローカル変数のメソッド パラメータへの上位変換、メソッド パラメータの管理などがあります。どのリファクタリング オプションを利用できるかは、コードの位置によって決まります。たとえば、フィールド宣言でないコードを強調表示した場合、[フィールドのカプセル化] オプションは選択できません。イベント メソッドの変数を強調表示した場合、[ローカル変数をパラメータへ昇格] は選択できません。その理由は、イベント ハンドラのシグネチャは定数であるためです。
コードのリファクタリング
一般的なリファクタリングの例としては、別のメンバ内にあるコードからのメソッドの作成 (抽出) があります。これにより、元のメンバのサイズを小さくでき、抽出されたコードを再利用できます。
ここでは、簡単なコードを記述し、このコードからメソッドを抽出します。リファクタリングは C# でサポートされるので、プログラミング言語として C# を使用するページを作成します。
C# のページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[言語] ボックスの [C#] をクリックします。
メモ : Default2.aspx という名前はそのままにしておいてかまいません。
[追加] をクリックします。すると、新しいページが作成され、開かれます。
C# のページのメソッドを抽出するには
デザイン ビューに切り替えます。
ツールボックスの [標準] タブから、Button コントロールをページにドラッグします。
Button コントロールをダブルクリックしてボタンの Click イベント ハンドラを作成し、次の強調表示されたコードを追加します。
protected void Button1_Click(object sender, EventArgs e) { System.Collections.ArrayList alist = new System.Collections.ArrayList(); int i; string arrayValue; for(i=0; i<5; i++) { arrayValue = "i = " + i.ToString(); alist.Add(arrayValue); } for(i=0; i<alist.Count; i++) { Response.Write("<br />" + alist[i]); } }
このコードは、ArrayList オブジェクトを作成し、ループを使用してこのオブジェクトと値を読み込み、別のループを使用して ArrayList オブジェクトの内容を表示します。
Ctrl キーを押しながら F5 キーを押してページを実行します。次に、ボタンをクリックして、以下の出力を確認します。
i = 0 i = 1 i = 2 i = 3 i = 4
コード エディタに戻り、イベント ハンドラで以下の行を選択します。
for(i=0; i<alist.Count; i++) { Response.Write("<br />" + alist[i]); }
選択した行を右クリックし、[リファクタ] をクリックし、[メソッドの抽出] をクリックします。
[メソッドの抽出] ダイアログ ボックスが表示されます。
[新しいメソッド名] ボックスに「DisplayArray」と入力し、[OK] をクリックします。
DisplayArray という名前の新しいメソッドが作成され、Click ハンドラの、当初はループがあった場所にこの新しいメソッドの呼び出しが挿入されます。
protected void Button1_Click(object sender, EventArgs e) { System.Collections.ArrayList alist = new System.Collections.ArrayList(); int i; string arrayValue; for(i=0; i<5; i++) { arrayValue = "i = " + i.ToString(); alist.Add(arrayValue); } i = DisplayArray(alist, i); }
Ctrl キーを押しながら F5 キーを押してページを再度実行します。次に、ボタンをクリックします。
ページは、前と同じように機能します。
シンボルの名前変更
変数やオブジェクト (これらはシンボルとも呼ばれる) を操作する場合、シンボルを既にコードで参照した後にシンボルの名前を変更する必要が生じることがあります。しかし、シンボルの名前を変更する場合、シンボルへの参照の 1 つで名前を変更し忘れると、コードが動作しなくなる可能性があります。このような場合、リファクタリングを使用して名前変更を行うことができます。
リファクタリングを使用してシンボルの名前を変更するには
Click イベント ハンドラで次の行を探し出します。
System.Collections.ArrayList alist = new System.Collections.ArrayList;
変数名 alist を右クリックし、[リファクタ] をクリックします。次に、[名前の変更] をクリックします。
[名前の変更] ダイアログ ボックスが表示されます。
[新しい名前] ボックスに「ArrayList1」と入力し、Enter キーを押します。
[変更のプレビュー] ダイアログ ボックスが開き、名前を変更するシンボルへのすべての参照を含むツリーが表示されます。
[適用] をクリックして、[変更のプレビュー] ダイアログ ボックスを閉じます。
選択したインスタンスを厳密に参照している変数の名前は変更されます。ただし、次の行の変数 alist の名前は変更されません。
private int DisplayArray(System.Collections.ArrayList alist, int i)
この行の変数 alist は、名前を変更した変数 alist と同じ値を表していないため、名前は変更されません。DisplayArray 宣言の変数 alist は、そのメソッドのローカル変数です。これは、リファクタリングを使用してシンボルの名前を変更する場合、エディタで単に検索と置換アクションを実行するのとは違うことを示しています。リファクタリングでは、操作しているシンボルのセマンティクスの知識を使用して名前を変更します。
スニペットの挿入
Web ページ開発者は多数のコーディング作業を行う必要があることが多いので、コード エディタにはスニペット (作成済みのコード ブロック) のライブラリが用意されています。これらのスニペットをページに挿入できます。
コード スニペットの挿入方法は、Visual Studio で使用する言語ごとにわずかに異なります。Visual Basic でのスニペットの挿入方法については、「方法 : コードにスニペットを挿入する (Visual Basic)」を参照してください。Visual C# でのスニペットの挿入方法については、「方法 : コード スニペットを使用する (C#)」を参照してください。
次の手順
このチュートリアルでは、コードのエラー修正、コードのリファクタリング、シンボルの名前変更、コードへのコード スニペットの挿入に関する Visual Studio 2008 の基本的な機能を示しました。エディタのその他の機能により、アプリケーション開発が高速かつ容易になることもあります。たとえば、次の場合です。
IntelliSense のオプション、コード スニペットの管理、コード スニペットのオンライン検索など、IntelliSense の機能について詳しく調べる場合。詳細については、「IntelliSense の使用方法」を参照してください。
独自のコード スニペットの作成方法を調べる場合。詳細については、「IntelliSense コード スニペットの作成と使用」を参照してください。
スニペットのカスタマイズやトラブルシューティングなど、IntelliSense コード スニペットの Visual Basic 固有の機能について詳しく調べる場合。詳細については、「Visual Basic の IntelliSense コード スニペット」を参照してください。
リファクタリングおよびコード スニペットなど、IntelliSense の C# 固有の機能について詳しく調べる場合。詳細については、「Visual C# のコード エディタの機能」を参照してください。
参照
概念
Visual Basic の IntelliSense コード スニペット