書籍転載 独習ASP.NET 第3版 ASP.NETを理解する3つの仕組み ― 第2章　ASP.NET の基礎　2.3 ― WINGSプロジェクト　山田 祥寛 2011/07/06

Page1 Page2 Page3

本コーナーは、翔泳社発行の書籍『独習ASP.NET 第3版』の中から、特にInsider.NET読者に有用だと考えられる章や個所をInsider.NET編集部が選び、同社の許可を得て転載したものです。基本的に元の文章をそのまま転載していますが、レイアウト上の理由などで文章の記述を変更している部分（例：「上の図」など）や、図の位置などを本サイトのデザインに合わせている部分が若干ありますので、ご了承ください。『独習ASP.NET 第3版』の詳細は「目次情報ページ」や翔泳社のサイト、Amazon.co.jpのページをご覧ください。

ご注意：本記事は、雑誌の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは＠ITのそれとは一致しません。あらかじめご了承ください。

■2.3 ASP.NETを理解する3つの仕組み

　ASP.NETを理解するときにキモとなるポイントは、以下の3つです。

• サーバーコントロール
• イベントドリブンモデル
• ビューステート

　ここではまず、これらASP.NETの特徴的な仕組みについて概観することで、ASP.NETアプリケーションがどのように動作しているのか、ASP.NET固有の考え方について理解します。

●2.3.1　サーバーコントロール

　サーバーコントロールとは、ページデザインのために利用できる定型的な部品のことです。どんな部品が用意されているのか、まずはツールボックスの中身を覗いてみましょう（図2.22）。

図2.22　ASP.NET 4で使えるサーバーコントロール

　［標準］［データ］［検証］［ナビゲーション］など、いくつかのタブに分かれて、テキストボックスやボタン、ハイパーリンクのような単純な部品からグリッド表やカレンダー、ツリーメニューのような複合的な部品まで、80種類以上のコントロールが標準で用意されています。

　ASP.NETではこれら部品を利用することで、（たとえば）データベースから取り出したデータを一覧表に整形するというような定型的な機能を実装するために、いちいちコードを記述する必要はありません。サーバーコントロールをページに貼り付け、いくつかの情報を設定するだけで実現できてしまうのです。図2.23は、サーバーコントロールを利用して構築した典型的なページの例です。

図2.23　サーバーコントロールで作成したページ

　こうしたページが、サーバーコントロールを利用することで限りなくコーディングレスで実装できてしまうのです。ASP.NETを学ぶ第一歩は、サーバーコントロールを理解することであると言っても良いでしょう。

○サーバーコントロールの動作の仕組み

　2.2.4項でも見たように、サーバーコントロールは.aspxファイルの中で、以下のように<asp:〜>というタグの形式で表現されます。

<form id="form1" runat="server"> <div>   名前：<asp:TextBox ID="txtName" runat="server"></asp:TextBox>   <asp:Button ID="btnSend" runat="server" Text="送信" /> </div> </form>

　これらのサーバーコントロールは、ASP.NETによって、まずはコントロールツリーと呼ばれるオブジェクト階層に変換されます（図2.24）。この際、<asp:〜>以外のテキストは、LiteralControlオブジェクト（固定テキスト）を表すオブジェクトとして、コントロールツリーに取り込まれる点に注目です。また、コントロールツリーの頂点にあるのは、先ほども登場したPageオブジェクト（ページそのもの）です。

図2.24　コントロールツリー

　ASP.NETでは、このようなコントロールツリー（オブジェクトツリー）を生成することで、テキストボックスやボタンなどのページ要素をオブジェクトとして操作できるようにしているのです。

　たとえば、以下はラベルテキスト（LabelコントロールのTextプロパティ）に、テキストボックスの入力値に基づいた文字列をセットしているコードです。

lblGreet.Text = "こんにちは、" & txtName.Text & "さん！"

　ASP.NETは、プログラムで処理された最終的なコントロールツリーに対して、HTMLの出力を指示します。たとえば、先ほどの例であれば、以下のように出力されます。

<form method="post" action="Hello.aspx" id="form1"> <div>   名前：<input name="txtName" type="text" id="txtName" />   <input type="submit" name="btnSubmit" value="Button" id="btnSubmit" /> </div> </form>

　このように、サーバーコントロールは、サーバー側ではアプリケーションが処理しやすいオブジェクトツリーを、クライアント側ではブラウザーが処理できるHTMLタグを、それぞれ生成することで、サーバー／クライアント間の橋渡しをする存在であると言えます（図2.25）。

図2.25　サーバーコントロールの役割

*　従来のサーバーサイドプログラミングでは、サーバーサイドアプリケーションはあくまでHTMLを出力するための仕組みにすぎませんでした。HTMLは、ブラウザーでの表示方法を表すための仕組みですから、サーバーサイドでこれを操作するには、HTMLタグを文字列として操作する必要があったわけです（つまり、テキストボックスの初期値をセットするにも、<input>タグのvalue属性を文字列として組み立ててる必要があります）。 　 これを考えれば、もともとクライアント側の要素であったテキストボックスやボタンなどをサーバーサイドでオブジェクトとして操作できることが、どれだけ便利なことかがおわかりいただけるのではないかと思います。

【補足】2種類のサーバーコントロール

サーバーコントロールは、実はWebサーバーコントロールとHTMLサーバーコントロールとに分類できます。表2.7に、それぞれの主なものをごく一部だけですが、まとめておきましょう。 大分類 小分類 概要 コントロール（例） Web 標準 ラベルやフォーム要素などの基本要素 TextBox、Button、Label、Calendar データ データアクセス＆表示 GridView、ListView、FormView、SqlDataSource 検証 入力値の検証 RequiredFieldValidator、CustomValidator、ValidationSummary ナビゲーション メニュー機能 TreeView、Menu、SiteMapPath ログイン ログイン機能 Login、LoginView、ChangePassword WebParts カスタマイズ可能な部品 WebPartsManager、WebPartZone、EditorZone AJAX Extensions Ajax機能 ScriptManager、UpdatePanel、Timer HTML HTML 標準的なHTMLタグ form、input、select、textarea、table 表2.7　ASP.NET 4で利用できる主なサーバーコントロール 　HTMLサーバーコントロールとは、要は、従来のHTMLタグ（<input>、<select>、<textarea>など）に、サーバーコントロールとしての機能を付与したものです。 <input id="txtName" type="text" runat="server" /> のように、普通のHTMLタグにrunat属性を追加するだけで利用できます。HTMLタグと1：1の関係にありますので、既存のHTMLページにASP.NETの機能を付与したいという場合には、HTMLサーバーコントロールが便利です。 　しかし、新規にASP.NETページを作成する場合には、Webサーバーコントロールを優先して利用すべきでしょう。というのも、以下のような理由からです。 属性名に一貫性がある 　HTMLの世界には、実は直感的に理解しにくい命名がいくつかあります。たとえば、選択ボックスとリストボックスという一見異なるフォーム要素が、同じ<select>タグで表される一方、入力するテキストが単一行か複数行かの違いで、<input>タグと<textarea>タグとを使い分けなければなりません。 　属性名も同じです。<input>タグでは横幅をsize属性で表すのに、<textarea>タグではcols属性を使用します。また、<select>タグではsize属性が行数を表します。 　しかし、Webサーバーコントロールでは、単一行か複数行かにかかわらず、テキストボックス（テキストエリア）はTextBoxコントロールで表現できます。選択ボックスとリストボックスも、それぞれDropDownListとListBoxに分類されています。ListBoxコントロールの行数を表すのは、より直感的でわかりやすいRows属性です。 　このような命名の一貫性（わかりやすさ）は、開発者の負担を軽減してくれます。 より高度な機能が提供されている 　Webサーバーコントロールでは、複数のHTMLタグを組み合わせたCalendar（カレンダー）、GridView（グリッド表）、Login（ログインフォーム）など、HTMLタグを複合的に組み合わせたコントロールを提供しています。（たとえば）Loginコントロール1つを配置するだけで、テキストボックスやボタン、検証機能などを含んだ複雑なログインフォームを生成してくれます。 　また、Webサーバーコントロールには、ブラウザーの判別機能を備えているものもあります。アクセスしてきたブラウザーを認識し、適切なHTMLタグ、スタイルシート、JavaScriptの組み合わせを出力したり、ブラウザーがスタイルシートやJavaScriptに対応していないと判断した場合には、最小限のHTMLだけを出力します。 　これによって、開発者はブラウザーの違いをそれほど意識することなく、開発を進めることができます。 *　具体的には、上位ブラウザー（UpLevel）、下位ブラウザー（DownLevel）を識別します。上位ブラウザーは、最低でもHTML 4.0、JScript 1.2、DOM（Document Object Model）、CSS（Cascading StyleSheet）に対応している必要があります。下位ブラウザーに要求されるのはHTML 3.2だけです。

○プロパティの基本

　先にも述べたように、サーバーコントロールの正体はクラス（オブジェクト）です。ASP.NETページで利用できるような機能を備えた特殊なクラスと言っても良いでしょう。たとえば、TextBoxコントロールの機能はTextBoxクラスで定義されています。

　クラスですから、プロパティやメソッドも利用できます。もっとも、最初のうちはメソッドに触れる機会はそれほど多くはないかもしれません。サーバーコントロールの見栄えや挙動は、まずプロパティによって決定できます。

　たとえば、2.1節で作成したHello.aspxで使用しているTextプロパティは、コントロール上に表示する文字列を表します。Labelコントロールであればラベルに表示するテキストが、TextBoxコントロールであればテキストボックスのデフォルト値が、そして、Buttonコントロールであればボタンのキャプションが、いずれもTextプロパティで指定できるわけです。

　サーバーコントロールを利用するうえではまず、それぞれのサーバーコントロールがどんなプロパティを持っているのかを理解しておく必要があるでしょう。利用できるプロパティは、サーバーコントロールによって違いますが、表2.8に共通で利用できるプロパティをまとめておきます（ただし、一部のコントロールでは利用できないものもあります）。

プロパティ	概要
ID	サーバーコントロールを一意に特定するキー（必須）
BackColor	背景色（Red、Whiteのような色名、#FFffFFのような16進数で指定）
BorderColor	枠線の色（BackColorと同様）
BorderWidth	枠線の幅（ピクセル単位）
BorderStyle	枠線のスタイル
ClientIDMode【v4】	クライアントIDの生成方法
Enabled	コントロールが有効か
Font	フォント（色やサイズなど）
ForeColor	前景色（一般的には文字色）
Height	高さ
ToolTip	ツールチップ（マウスポイント時にポップアップされるヒント文字列）
ViewStateMode【v4】	ビューステート（2.3.3項）の有効／無効
Width	幅
表2.8　サーバーコントロール共通で利用可能な主なプロパティ（はASP.NET 4以降で利用可）

　この中でも、特に重要であるのがIDプロパティです。IDプロパティは、ページの中でそれぞれのコントロールを識別するための名前です。他のコントロールとの紐付けのためのキーとして、プログラム上ではオブジェクト名（変数名）として利用します。識別のキーですから、1つのファイルの中で重複してはいけません。また、以下のようなルールに従っている必要があります。

アルファベット、またはアンダースコア（_）で始まること
　 ×：1name、$name　　　○：name、_name

2文字目以降は、アルファベット、10進数、アンダースコアであること
　 ×：$flag、flag$i、s名前　　　○：flag、TextBox1、first_name

アンダースコアで始まる場合、変数名は少なくとも2文字以上であること
　 ×：_　　　○：_name、_x

長さは1023文字を超えないこと

IfやFor、Whileのような予約語は使用しないこと

　厳密には、は[For]のようにブラケット（[〜]）で変数全体を括ることで利用できますが、タイプしにくいですし、無用な混乱を防ぐという意味でも、予約語をあえて利用すべきではないでしょう。

　また、構文ルールではありませんが、コードの読みやすさという意味では、以下のような点にも注意すべきです。

データの中身を類推しやすい
　 ○：txtName、imgLogo　　　△：x、z

長すぎず、かつ、省略しすぎない
　 ○：txtUsrFName　　　△：TextBox_UserFirstName、tUFN

見た目が似たような名前は付けない
　 △：txtUser、txtUsr

ローマ字表記はできるだけ避ける
　 ○：name　　　△：namae

　これらは、あくまで1つの基準にすぎませんが、コードの可読性を向上させるという意味では重要なポイントです。文脈とも照らしながら、検討してみると良いでしょう。

○プロパティを設定するさまざまな方法

　プロパティウィンドウは、デザインビューで選択されたサーバーコントロールのプロパティを設定するためのウィンドウです。プロパティの種類によってさまざまな入力インターフェイスを備えています。VWDを利用するうえで、プロパティウィンドウの使い方は、最初に習得すべき重要なテーマであると言えるでしょう。

　以下に、プロパティウィンドウが提供する主な入力手段を示しておきます。

自由に文字や数値を入力する

　文字列や数値など、あらかじめオプションが決められていない値を求めるプロパティで使用されます。本来、数値が入力されるべき項目に文字列が入力された場合など、単純な入力ミスに対してはエラーダイアログを表示します。

　また、TextBoxコントロールのTextプロパティのように、プロパティウィンドウから入力しにくい長いテキストを入力する可能性があるプロパティについては、テキストエリアをポップアップします。

図2.26　プロパティの自由入力欄（左）とテキストエリア（右）

選択ボックスから選択する

　あらかじめ決められたオプションを、選択ボックスから選択できます。手入力してもかまいませんが、あらかじめ決められた候補値のいずれにも当てはまらない場合には、エラーとなります。

　特殊な選択メニューとして、色を選択するためのカラーパレットなどもあります。たとえば、BackColor（背景色）のようなプロパティを選択する場合に使用します。

図2.27　プロパティの選択ボックス（左）と色の選択に使うカラーパレット（右）

ウィザードを利用する

　データベースへの接続文字列やSQL命令など、複合的な値を必要とするプロパティを設定する場合には、入力欄右端のボタンをクリックすることで、ウィザードが起動します。値によっては、プロパティウィンドウから直接値を入力してもかまいませんが、せっかくVWDを使用しているならば、ウィザードを活用しない手はないでしょう。ただし、できあがった設定値を事後に確認することは、ASP.NETの構文を学習するという意味でも大切です。

図2.28　ウィザードによるプロパティの設定

タスクメニューから設定する

　プロパティは、プロパティウィンドウだけでなく、タスクメニューからも設定できます。タスクメニューとは、デザインビューでコントロール右肩のボタンをクリックしたときに表示されるメニューのことで、コントロールの主なプロパティを設定するのに利用します。

　高機能なコントロールでは、数多くのプロパティから目的のものを探すのは大変ですが、タスクメニューを利用することで最低限必要なプロパティを手軽に設定できます。

図2.29　タスクメニュー

　このように、プロパティはプロパティウィンドウまたはタスクメニューから設定できます。なお、プロパティウィンドウは、デフォルトで目的別にプロパティが並んでいますが、プロパティ名がわかっている場合にはかえって探しにくい場合があります。そのようなケースでは、プロパティウィンドウの上部にある（アルファベット順）ボタンをクリックすることで、アルファベット順にプロパティを並べ替えることができます。

【練習問題】2.1

次のコントロールIDは構文規則上、いくつかの誤りがあります。誤りを指摘してください。間違いのないものは「正しい」と答えてください。 NAME　　$name　　A0000　　0000A LabelコントロールlblGreetに、「Good Night, ○○.」というテキストを出力するコードを記述してみましょう。○○の部分は、TextBoxコントロールtxtNameへの入力値とします。

INDEX
	［書籍転載］独習ASP.NET 第3版
	ASP.NETを理解する3つの仕組み
	1．サーバーコントロール
	2．イベントドリブンモデル
	3．ビューステート

「独習ASP.NET 第3版」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）