Visual Studio 2013 で ASP.NET Web フォームのコードを編集する

作成者 : Erik Reitan

多くの ASP.NET Web フォーム ページでは、Visual Basic、C#、または別の言語でコードを記述します。 Visual Studio のコード エディターは、エラーを回避しながらコードをすばやく記述するのに役立ちます。 さらに、エディターには、必要な作業量を減らすために再利用可能なコードを作成する方法が用意されています。

このチュートリアルでは、Visual Studio コード エディターのさまざまな機能について説明します。

このチュートリアルでは、次の作業を行う方法について説明します。

  • インライン コーディング エラーを修正します。
  • コードをリファクタリングして名前を変更します。
  • 変数とオブジェクトの名前を変更します。
  • コード スニペットを挿入します。

必須コンポーネント

このチュートリアルを完了するための要件は次のとおりです。

  • Microsoft Visual Studio 2013 または Microsoft Visual Studio Express 2013 for Web。 .NET Frameworkは自動的にインストールされます。

    Note

    Microsoft Visual Studio 2013 と Microsoft Visual Studio Express 2013 for Web は、このチュートリアル シリーズ全体で Visual Studio と呼ばれることがよくあります。

    Visual Studio を使用している場合、このチュートリアルでは、Visual Studio を初めて開始するときに設定の Web 開発 コレクションを選択したものとします。 詳細については、「 方法: Web 開発環境の設定を選択する」を参照してください。

Web アプリケーション プロジェクトとページの作成

チュートリアルのこの部分では、Web アプリケーション プロジェクトを作成し、新しいページを追加します。

Web アプリケーション プロジェクトを作成するには

  1. Microsoft Visual Studio を開きます。

  2. [ファイル] メニューの [新しいプロジェクト] を選択します。
    [ファイル] メニュー

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. 左側の [テンプレート ] ->[Visual C# ] -[>Web テンプレート] グループを選択します。

  4. 中央の列で [ASP.NET Web アプリケーション] を選択します。

  5. プロジェクトに BasicWebApp という名前を付け、[OK] ボタンをクリック します
    [新しいプロジェクト] ダイアログ ボックス

  6. 次に、Web Forms テンプレートを選択し、[OK] ボタンをクリックしてプロジェクトを作成します。
    [新しい ASP.NET プロジェクト] ダイアログ ボックス

    Visual Studio は、Web Forms テンプレートに基づいて事前構築済みの機能を含む新しいプロジェクトを作成します。

新しい ASP.NET Web Forms ページの作成

ASP.NET Web アプリケーション プロジェクト テンプレートを使用して新しいWeb Forms アプリケーションを作成すると、Visual Studio によって Default.aspx という名前の ASP.NET ページ (Web Forms ページ) と、その他のいくつかのファイルとフォルダーが追加されます。 Default.aspx ページは、Web アプリケーションのホーム ページとして使用できます。 ただし、このチュートリアルでは、新しいページを作成して操作します。

Web アプリケーションにページを追加するには

  1. ソリューション エクスプローラーで、Web アプリケーション名を右クリックし (このチュートリアルでは、アプリケーション名は BasicWebSite)、[追加] ->[新しい項目] の順にクリックします。
    [新しい項目の追加] ダイアログ ボックスが表示されます。
  2. 左側の [Visual C# ->Web テンプレート] グループを選択します。 次に、中央のリストから [Web フォーム ] を選択し、 FirstWebPage.aspx という名前を付けます。
    [新しい項目の追加] ダイアログ ボックス
  3. [追加] をクリックして、Web Forms ページをプロジェクトに追加します。
    Visual Studio によって新しいページが作成され、開きます。
  4. 次に、この新しいページを既定のスタートアップ ページとして設定します。 ソリューション エクスプローラーで、FirstWebPage.aspx という名前の新しいページを右クリックし、[スタート ページとして設定] を選択します。 次回このアプリケーションを実行して進行状況をテストすると、ブラウザーにこの新しいページが自動的に表示されます。

インライン コーディング エラーの修正

Visual Studio のコード エディターは、コードを記述するときにエラーを回避するのに役立ち、エラーが発生した場合は、コード エディターを使用してエラーを修正できます。 チュートリアルのこの部分では、エディターのエラー修正機能を示すコード行を記述します。

Visual Studio で単純なコーディング エラーを修正するには

  1. デザイン ビューで、空白のページをダブルクリックして、ページの Load イベントのハンドラーを作成します。
    イベント ハンドラーは、コードを記述する場所としてのみ使用しています。

  2. ハンドラー内に、エラーを含む次の行を入力し、 Enter キーを押します。

    string myStr = "Loading..."
    

    Enter キーを押すと、コード エディターは、問題があるコードの領域の下に緑色と赤の下線 (通常は "波線" を呼び出します) を配置します。 緑色の下線は警告を示します。 赤い下線は、修正する必要があるエラーを示します。

    マウス ポインターを押 myStr したままにすると、警告について通知するツールヒントが表示されます。 また、赤い下線の上にマウス ポインターを合わせると、エラー メッセージが表示されます。

    次の図は、下線が付いたコードを示しています。

    デザイン ビューのウェルカム テキスト デザイン ビュー
    エラーは、行の末尾にセミコロン ; を追加して修正する必要があります。 この警告は、変数をまだ使用 myStr していないことを通知するだけです。

    Note

    Visual Studio で現在のコードの書式設定を表示するには、[ツール] -[オプション] -[>フォントと色]> の順に選択します。

リファクタリングと名前変更

リファクタリングは、コードを再構築して、その機能を維持しながら、理解しやすく、保守しやすくするソフトウェア手法です。 簡単な例として、データベースからデータを取得するコードをイベント ハンドラーに記述する場合があります。 ページを開発するときに、いくつかの異なるハンドラーからデータにアクセスする必要がある場合があります。 そのため、ページにデータ アクセス メソッドを作成し、ハンドラーに メソッドの呼び出しを挿入することで、ページのコードをリファクタリングします。

コード エディターには、さまざまなリファクタリング タスクを実行するのに役立つツールが含まれています。 このチュートリアルでは、変数の名前変更とメソッドの抽出という 2 つのリファクタリング手法を使用します。 その他のリファクタリング オプションには、フィールドのカプセル化、ローカル変数のメソッド パラメーターへの昇格、メソッド パラメーターの管理などがあります。 これらのリファクタリング オプションの可用性は、コード内の場所によって異なります。

コードのリファクタリング

一般的なリファクタリング シナリオは、メソッドなどの別のメンバー内にあるコードからメソッドを作成 (抽出) することです。 これにより、元のメンバーのサイズが小さくなり、抽出されたコードが再利用できるようになります。

チュートリアルのこの部分では、いくつかの簡単なコードを記述し、そこからメソッドを抽出します。 リファクタリングは C# でサポートされているため、C# をプログラミング言語として使用するページを作成します。

C# ページでメソッドを抽出するには

  1. デザイン ビューに切り替えます。

  2. ツールボックスの [標準] タブで、Button コントロールをページにドラッグします。

  3. 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 オブジェクトの内容を表示します。

  4. Ctrl キーを押しながら F5 キーを押してページを実行し、ボタンをクリックして次の出力が表示されることを確認します。

    i = 0
    i = 1
    i = 2
    i = 3
    i = 4
    
  5. コード エディターに戻り、イベント ハンドラーで次の行を選択します。

    for(i=0; i<alist.Count; i++) 
    {
          Response.Write("<br />" + alist[i]);
    }
    
  6. 選択範囲を右クリックし、[ リファクタリング] をクリックし、[ メソッドの抽出] を選択します。

    [ メソッドの抽出 ] ダイアログ ボックスが表示されます。

  7. [ 新しいメソッド名 ] ボックスに 「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);
    }
    
  8. Ctrl キーを押しながら F5 キーを押してページをもう一度実行し、ボタンをクリックします

    ページは以前と同じように機能します。 DisplayArrayこれで、ページ クラスの任意の場所から メソッドを呼び出すことができます。

変数の名前変更

変数やオブジェクトを操作する場合は、コードで既に参照された後で名前を変更できます。 ただし、変数とオブジェクトの名前を変更すると、いずれかの参照の名前を変更しないとコードが中断する可能性があります。 そのため、リファクタリングを使用して名前の変更を実行できます。

リファクタリングを使用して変数の名前を変更するには

  1. Click イベント ハンドラーで、次の行を見つけます。

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList;
    
  2. 変数名 alistを右クリックし、[ リファクタリング] を選択し、[ 名前の変更] を選択します。

    [ 名前の変更 ] ダイアログ ボックスが表示されます。

  3. [ 新しい名前 ] ボックスに 「ArrayList1 」と入力し、[ 参照変更のプレビュー ] チェック ボックスがオンになっていることを確認します。 次に、 [OK] をクリックします

    [ 変更のプレビュー ] ダイアログ ボックスが表示され、名前を変更する変数へのすべての参照を含むツリーが表示されます。

  4. [ 適用 ] をクリックして[ 変更のプレビュー ] ダイアログ ボックスを閉じます。

    選択したインスタンスを参照する変数の名前が変更されます。 ただし、次の行の変数 alist の名前は変更されないことに注意してください。

    private int DisplayArray(System.Collections.ArrayList alist, 
        int i)
    

    この行の変数 alist は、名前を変更した変数 alist と同じ値を表していないため、名前は変更されません。 宣言内のDisplayArray変数alistは、そのメソッドのローカル変数です。 これは、リファクタリングを使用して変数の名前を変更することは、単にエディターで検索と置換アクションを実行するのとは異なっていることを示しています。リファクタリングでは、操作している変数のセマンティクスに関する知識を持つ変数の名前が変更されます。

スニペットの挿入

開発者が頻繁に実行する必要があるコーディング タスクWeb Forms多いため、コード エディターにはスニペットのライブラリ、または事前に記述されたコードのブロックが用意されています。 これらのスニペットをページに挿入できます。

Visual Studio で使用する各言語には、コード スニペットの挿入方法に若干の違いがあります。 スニペットの挿入の詳細については、「 Visual Basic IntelliSense コード スニペット」を参照してください。 Visual C# でのスニペットの挿入の詳細については、「 Visual C# コード スニペット」を参照してください。

次の手順

このチュートリアルでは、コード内のエラーの修正、コードのリファクタリング、変数の名前変更、コード スニペットのコードへの挿入を行う Visual Studio 2010 コード エディターの基本的な機能について説明しました。 エディターの追加機能により、アプリケーション開発を迅速かつ簡単に行うことができます。 たとえば、次の操作を行います。

  • IntelliSense オプションの変更、コード スニペットの管理、オンラインでのコード スニペットの検索など、IntelliSense の機能の詳細について説明します。 詳細については、「IntelliSense の使用」を参照してください。
  • 独自のコード スニペットを作成する方法について説明します。 詳細については、「IntelliSense コード スニペットの作成と使用」を参照してください。
  • スニペットのカスタマイズやトラブルシューティングなど、IntelliSense コード スニペットの Visual Basic 固有の機能の詳細について説明します。 詳細については、「Visual Basic IntelliSense コード スニペット」を参照してください。
  • リファクタリングやコード スニペットなど、IntelliSense の C# 固有の機能の詳細について説明します。 詳細については、「 Visual C# IntelliSense」を参照してください。