先生と生徒の会話形式で理解しよう

生徒

「WebFormsで実際にプロジェクトを作りたいんですが、どうやって始めればいいんですか?」

先生

「Visual Studioを使えば、簡単にWebFormsのプロジェクトを作成できますよ。手順を一つずつ見ていきましょう。」

生徒

「Visual Studioって難しそうですね...」

先生

「最初は戸惑うかもしれませんが、画面の指示に従っていけば大丈夫です。それでは、詳しく見ていきましょう!」

1. 開発環境の準備

ASP.NET WebFormsのプロジェクトを作成するには、まずVisual Studioという開発ツールが必要です。Visual Studioは、マイクロソフトが提供する統合開発環境で、プログラムを書いたり、実行したり、デバッグ(エラーを見つけて修正すること)したりできる便利なツールです。

Visual Studioには、無料で使えるCommunity Edition(コミュニティ版)があります。個人開発者や小規模チームなら、この無料版で十分です。マイクロソフトの公式サイトからダウンロードできます。

必要なコンポーネント

Visual Studioをインストールする際は、「ASP.NETとWeb開発」というワークロード(機能セット)を選択してください。これを選ぶことで、WebForms開発に必要な全ての機能がインストールされます。

2. 新規プロジェクトの作成手順

Visual Studioの準備ができたら、実際にWebFormsプロジェクトを作成していきましょう。プロジェクトとは、アプリケーションを構成する全てのファイルをまとめた「箱」のようなものです。

Visual Studioを起動する

デスクトップまたはスタートメニューからVisual Studioを起動します。初回起動時は、マイクロソフトアカウントでのサインインを求められることがありますが、スキップすることもできます。

新しいプロジェクトを作成

起動画面で「新しいプロジェクトの作成」をクリックします。既にVisual Studioが開いている場合は、メニューバーから「ファイル」→「新規作成」→「プロジェクト」を選択します。

プロジェクトテンプレートを選択

プロジェクトテンプレートの一覧が表示されます。検索ボックスに「ASP.NET Web アプリケーション」と入力して検索します。表示されたテンプレートの中から、「ASP.NET Web アプリケーション (.NET Framework)」を選択し、「次へ」をクリックします。

注意点

「ASP.NET Core」と書かれたテンプレートは別の技術です。WebFormsを使う場合は、必ず「.NET Framework」と書かれたものを選びましょう。

プロジェクト名と保存場所を設定

プロジェクト名を入力します。例えば「MyFirstWebForms」のように分かりやすい名前をつけましょう。保存場所(プロジェクトを保存するフォルダ)も指定できます。デフォルトでは、ドキュメントフォルダ内に保存されます。設定が終わったら「作成」をクリックします。

テンプレートの種類を選択

次の画面で、具体的なテンプレートの種類を選択します。ここで「Web Forms」を選択します。また、認証の設定や、HTTPSの有効化などのオプションもありますが、最初は全てデフォルトのままで構いません。「作成」ボタンをクリックすると、プロジェクトが作成されます。

3. プロジェクトの構成を理解する

プロジェクトが作成されると、Visual Studioの右側にソリューションエクスプローラーという画面が表示されます。ここには、プロジェクトに含まれる全てのファイルとフォルダが表示されます。

主要なファイルとフォルダを見ていきましょう。

Default.aspx:トップページのファイルです。画面のデザインを定義します。
Default.aspx.cs:トップページのプログラムロジック(コードビハインド)を書くファイルです。
Web.config:アプリケーションの設定ファイルです。データベース接続情報などを書きます。
App_Dataフォルダ:データベースファイルなどを置くフォルダです。
Contentフォルダ:CSSファイル(スタイルシート)を置くフォルダです。
Scriptsフォルダ:JavaScriptファイルを置くフォルダです。

これらのファイルとフォルダが、WebFormsアプリケーションの基本構成になります。最初は全てを理解する必要はありませんが、少しずつ慣れていきましょう。

4. 最初のページを確認する

ソリューションエクスプローラーでDefault.aspxをダブルクリックすると、ページのデザイン画面が表示されます。Visual Studioには、「デザインビュー」と「ソースビュー」の2つの表示方法があります。

画面下部にある「デザイン」「分割」「ソース」というタブで切り替えられます。「デザイン」ではビジュアルに画面を編集でき、「ソース」ではHTMLやASP.NETのコードを直接編集できます。初心者の方は「分割」にすると、両方を同時に見られて分かりやすいでしょう。


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyFirstWebForms._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NETは、動的なWebサイトやアプリケーションを構築するための無料のWebフレームワークです。</p>
    </div>
</asp:Content>

このコードは、デフォルトで作成されるトップページの内容です。asp:Contentタグの中に、ページの内容を書いていきます。

5. プロジェクトを実行してみる

プロジェクトが正しく作成できているか確認するために、実際に実行してみましょう。Visual Studioの上部にある、緑色の三角形の「開始」ボタン(または「IIS Express」と書かれたボタン)をクリックします。キーボードのF5キーを押しても同じように実行できます。

実行すると、Visual Studioがプロジェクトをビルド(コンパイル)し、Webブラウザが自動的に起動します。ブラウザには、作成したWebサイトのトップページが表示されます。通常は「Welcome to ASP.NET」のような初期画面が表示されます。

これで、WebFormsプロジェクトが正常に動作していることが確認できました。ブラウザを閉じるか、Visual Studioの「停止」ボタン(赤い四角)をクリックすると、実行が終了します。

成功のポイント

初回実行時は、ビルドに時間がかかることがあります。また、ファイアウォールの警告が出た場合は、アクセスを許可してください。

6. 簡単なページを作成してみる

それでは、実際に簡単なページを作成してみましょう。ボタンをクリックすると、メッセージが表示される機能を追加します。

Default.aspxファイルを開き、ソースビューに切り替えて、asp:Contentタグの中身を以下のように書き換えてみましょう。


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div class="container mt-5">
        <h2>初めてのWebFormsページ</h2>
        <p>下のボタンをクリックしてみてください。</p>
        
        <asp:Label ID="lblMessage" runat="server" Text="" CssClass="alert alert-info d-block mt-3"></asp:Label>
        <asp:Button ID="btnClick" runat="server" Text="クリック!" CssClass="btn btn-primary" OnClick="btnClick_Click" />
    </div>
</asp:Content>

このコードでは、asp:Label(ラベル)とasp:Button(ボタン)という2つのASP.NETサーバーコントロールを配置しています。runat="server"という属性は、このコントロールがサーバー側で処理されることを示しています。

7. ボタンクリックイベントを実装する

次に、ボタンがクリックされたときの処理を書きます。ソリューションエクスプローラーでDefault.aspx.csを開きます。もしくは、Default.aspxを開いた状態で、F7キーを押すとコードビハインドファイルが開きます。

以下のコードを追加しましょう。


using System;
using System.Web.UI;

namespace MyFirstWebForms
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // ページが読み込まれたときの処理
        }

        protected void btnClick_Click(object sender, EventArgs e)
        {
            // ボタンがクリックされたときの処理
            lblMessage.Text = "こんにちは！WebFormsへようこそ！";
            lblMessage.Visible = true;
        }
    }
}

btnClick_Clickメソッドが、ボタンクリック時に実行される処理です。ここでは、ラベル(lblMessage)のテキストに「こんにちは！WebFormsへようこそ！」というメッセージを設定し、ラベルを表示状態にしています。

保存したら、再度F5キーを押してプロジェクトを実行してみましょう。ボタンをクリックすると、メッセージが表示されるはずです。

8. よくあるエラーと対処法

初めてプロジェクトを作成すると、エラーに遭遇することがあります。代表的なエラーと対処法を見ていきましょう。

ビルドエラーが出る

「ビルドに失敗しました」というエラーが出る場合、コードに文法エラーがある可能性があります。Visual Studioの「エラー一覧」ウィンドウ(表示→エラー一覧)を開いて、具体的なエラー内容を確認しましょう。多くの場合、セミコロン(;)の忘れや、括弧の閉じ忘れなど、単純なミスです。

ブラウザが起動しない

実行してもブラウザが起動しない場合は、プロジェクトのプロパティを確認します。ソリューションエクスプローラーでプロジェクト名を右クリックし、「プロパティ」を選択します。「Web」タブで、「開始操作」が正しく設定されているか確認しましょう。

ポート番号の競合

「ポートは既に使用されています」というエラーが出る場合、他のアプリケーションが同じポート番号を使っている可能性があります。プロジェクトのプロパティの「Web」タブで、別のポート番号に変更しましょう。

9. デバッグモードでの実行

デバッグモードとは、プログラムの動作を細かく確認しながら実行できるモードです。F5キーで実行するとデバッグモードになり、Ctrl+F5で実行すると通常モード(デバッグなし)になります。

デバッグモードでは、ブレークポイントを設定できます。ブレークポイントとは、プログラムの実行を一時停止するポイントのことです。コードの左端の余白をクリックすると、赤い丸が表示されます。これがブレークポイントです。


protected void btnClick_Click(object sender, EventArgs e)
{
    // この行にブレークポイントを設定してみよう
    string message = "デバッグモードで確認中！";
    lblMessage.Text = message;
    
    // 変数の値を確認できます
    int counter = 1;
    counter = counter + 1;
    lblMessage.Text = lblMessage.Text + " カウント:" + counter;
}

ブレークポイントで停止すると、その時点での変数の値を確認したり、一行ずつ実行を進めたりできます。F10キーで一行ずつ実行(ステップオーバー)、F11キーでメソッドの中に入る(ステップイン)ことができます。これにより、プログラムがどのように動いているかを詳しく確認できます。