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

生徒

「ASP.NET WebFormsで、いつも使う『入力欄とボタンのセット』を何度も作っているのですが、もっと楽にする方法はありますか？」

先生

「それは素晴らしい気づきですね！『カスタムコントロール』や『ユーザーコントロール』を使えば、自分専用のオリジナル部品を作って使い回すことができますよ。」

生徒

「自分専用の部品！なんだか職人みたいで格好いいですね。作り方は難しいのでしょうか？」

先生

「基本さえ押さえれば大丈夫です。今回は、初心者の方でも分かりやすいように『ユーザーコントロール』を中心に解説しますね！」

1. カスタムコントロール（自作部品）とは？

ASP.NET WebForms（エーエスピー・ドットネット・ウェブフォーム）には、もともと「ボタン」や「テキストボックス」といった便利な部品が用意されています。しかし、実際の開発では「名前を入力する欄と、その横に必須チェックの文字を表示する」といった、決まった組み合わせを何度も使いたい場面が出てきます。

これを毎回手作業で作るのは、例えるなら「毎回一から車を組み立てる」ようなものです。それに対して、あらかじめ「タイヤとホイールのセット」を作っておけば、次からはそれをはめ込むだけで済みますよね。このように、複数の部品や機能をひとまとめにしたオリジナルの部品を、プログラミングの世界ではコントロールと呼びます。

WebFormsで自作部品を作る方法は大きく分けて二つあります。一つは「ユーザーコントロール（ascx）」、もう一つは「カスタムサーバーコントロール（dll）」です。今回は、より手軽で初心者の方にも扱いやすいユーザーコントロールをメインに学習していきましょう。

2. ユーザーコントロール（ascx）の特徴と役割

ユーザーコントロールは、私たちが普段作っているウェブページ（aspx）と作り方がそっくりです。拡張子が .ascx という名前になりますが、中身はHTMLタグとプログラムコードで構成されています。プログラミング未経験の方には、「小さなウェブページを切り取って、部品として保存したもの」だと考えてください。

例えば、全てのページに表示したい「お問い合わせバナー」や「ログインフォーム」などをこの形式で作ります。一度作ってしまえば、他のページでたった一行のコードを書くだけで、その部品を呼び出すことができるようになります。これにより、修正が必要になったときも「部品のファイル」だけを直せば、それを使っている全てのページが自動的に修正されるという、魔法のような管理が可能になります。

3. 実際に自作部品を作ってみよう（ascxの作成）

それでは、例として「タイトル付きのメッセージボックス」という部品を作ってみましょう。まずは、Visual Studioで「プロジェクト」の中に「新しい項目の追加」から「Webユーザーコントロール」を選びます。名前は MyMessageBox.ascx としましょう。


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyMessageBox.ascx.cs" Inherits="MyWebApp.MyMessageBox" %>

<div style="border: 2px solid #007bff; padding: 10px; border-radius: 5px; background-color: #f8f9fa;">
    <h3 style="color: #007bff;"><asp:Label ID="lblTitle" runat="server" Text="お知らせ"></asp:Label></h3>
    <p><asp:Label ID="lblBody" runat="server" Text="ここにメッセージが表示されます。"></asp:Label></p>
</div>

このコードでは、枠線で囲まれたタイトルと本文のエリアを作っています。asp:Label という部品を使って、後から外側のプログラムで文字を書き換えられるように準備しているのがポイントです。これが、自作部品の「土台」になります。

4. 部品に「設定」を追加するプログラム（プロパティ）

部品を作っただけでは、いつも同じ文字しか表示できません。使うページごとに「タイトル」や「メッセージの内容」を変えたいですよね。そこで、部品の裏側（MyMessageBox.ascx.cs）に、外部からデータを受け取るための窓口を作ります。これをプロパティと呼びます。


public partial class MyMessageBox : System.Web.UI.UserControl
{
    // 外部からタイトルを設定するための窓口
    public string Title
    {
        get { return lblTitle.Text; }
        set { lblTitle.Text = value; }
    }

    // 外部から本文を設定するための窓口
    public string Message
    {
        get { return lblBody.Text; }
        set { lblBody.Text = value; }
    }
}

このプログラムを書くことで、この部品を使う人は Title="重要" のように、まるで既製のボタンと同じ感覚で設定を行えるようになります。窓口（プロパティ）をしっかり作っておくことが、使いやすい自作部品を作るコツです。

5. 作った部品をページで使ってみよう

準備ができたら、いよいよ実際のページ（aspxファイル）でこの部品を呼び出します。自作の部品を使うには、ページの最初の方で「この部品を使いますよ！」という宣言（Register）が必要です。パソコンのソフトをインストールするようなイメージですね。


<%@ Register TagPrefix="My" TagName="MessageBox" Src="~/MyMessageBox.ascx" %>

<My:MessageBox ID="msg1" runat="server" Title="歓迎メッセージ" Message="ようこそ、私のホームページへ！" />
<My:MessageBox ID="msg2" runat="server" Title="ご注意" Message="データの保存を忘れないでください。" />

いかがでしょうか。たったこれだけの記述で、先ほど作った青い枠線のメッセージボックスが二つ表示されます。しかも、それぞれ違う文字が表示されます。これがコンポーネント化（部品化）の威力です。同じデザインのものを何度も書かなくて済むので、コードがとてもスッキリします。

6. カスタムサーバーコントロールとの違いを知る

少し難しい用語ですが、カスタムサーバーコントロールについても触れておきます。今回のユーザーコントロールは「HTMLの詰め合わせ」でしたが、サーバーコントロールは「プログラムだけで書かれた純粋な部品」です。こちらは、ボタンそのものの動きを拡張したり、グラフを表示したりするような、より高度な部品作りに向いています。

初心者の方は、まずは「ユーザーコントロール」で画面を整理することから始めましょう。慣れてきて、複数のプロジェクトでその部品を配りたい（例えば他の会社の人にも使わせたい）という段階になったら、サーバーコントロールの学習に進むのがベストです。まずは自分の手元で動く便利な道具箱を増やす楽しさを味わってください。

7. 自作部品の中で「イベント」を扱う

自作部品の中にボタンを置いた場合、そのボタンが押された時の処理はどうなるでしょうか。実は、部品の中で処理を完結させることも、部品の外側（使っているページ側）に「ボタンが押されましたよ！」と通知することも可能です。これをイベントの公開と呼びます。

例えば、自作の「ログイン部品」で「ログイン」ボタンが押されたとき、部品の中でパスワードをチェックし、OKだったらページ側に「ログイン成功！」という合図を送る仕組みです。これにより、部品とページの役割をきれいに分けることができます。最初は難しく感じるかもしれませんが、「呼び出す側」と「呼び出される側」のキャッチボールができるようになると、プログラミングがどんどん面白くなります。

8. 自作部品を管理するためのフォルダ構成

部品が増えてくると、プロジェクトの中がファイルだらけで散らかってしまいます。そこで、Controls という名前のフォルダを作って、そこにまとめて保存するのがおすすめです。パソコンのデスクトップにあるアイコンをフォルダに整理するのと同じ感覚ですね。

また、部品に名前を付けるときは、その部品が何をするものなのかがすぐ分かるようにしましょう。例えば「OkButton.ascx」よりも「ConfirmDialog.ascx」の方が、あとで見たときに「ああ、確認画面の部品だな」とすぐに思い出せます。プログラミングは「未来の自分や仲間へのプレゼント」でもあります。分かりやすい名前と整理整頓を心がけて、自分だけの最高の部品ライブラリを作り上げてください！