✔️

C# WebForms フロントエンド構造・完全まとめ

に公開
ASP.NET
webforms
tech

C# WebForms フロントエンドを勉強してみて分かったことまとめ

ASP.NET WebForms（以下 WebForms）について実際に触れながら勉強した内容を、自分用メモとして少し噛み砕いてまとめてみました。企業システムでまだ現役のことも多いので、仕組みを理解するのは意外と大事だなと感じています。

WebForms を触ってまず驚いたのは、「Web なのにデスクトップアプリみたいに作る」 という点です。普通の Web 開発と全く違う流れで動くので、最初は戸惑った部分もありました。

ここでは、特に フロントエンド周り（ASPX / Code-behind / JavaScript） がどういう役割を持っているのかを、学んだ範囲でシンプルに整理します。

WebForms のフロントエンドはこの 3 点セット

WebForms の 1 ページは基本的にこの 3 つで構成されています：

1. ASPX（HTML + サーバーコントロール） — 画面の本体

勉強していて一番触ることになるファイル。HTML に加えて、WebForms 独自の サーバーコントロール が使えます。

例：

<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnSave" Text="保存" runat="server" OnClick="btnSave_Click" />

触ってみて特に印象に残ったポイント：

  • HTML とサーバーコントロールが混ざった独特の構造
  • runat="server" が付いている要素はサーバー側で処理される
  • レイアウトの大部分はここで決まる
  • Code-behind と密接につながる

2. ASPX.CS（コードビハインド） — UI の裏側で動く C# コード

ASPX に紐づいている C#。見た目はフロントの延長だけど、実際は UI とサーバーロジックの中間層 という感じ。

例：

protected void btnSave_Click(object sender, EventArgs e)
{
    string name = txtName.Text;
    // DB 保存処理など
}

触ってみて分かったこと：

  • ボタン押下などの サーバーイベントを処理
  • ViewState を使って画面状態を自動復元
  • JavaScript から渡された値もここで受け取る

フロント寄りだけどサーバーとも密接なので、「WebForms のフロントはここまで含む」という感覚で理解しています。

3. JavaScript — クライアント側だけでやりたいこと

WebForms はサーバー中心ですが、もちろん JS も必要です。

例：

document.getElementById("btnCheck").addEventListener("click", () => {
  alert("クライアント側で実行！");
});

実際に触ってみて感じた JS の役割：

  • 入力チェック（Validation）
  • UI の動的変更
  • 不要な Postback を防ぐ
  • クライアントだけで保持したい状態の管理

特に WebForms は Postback が多めなので、JS を入れないと体感的に重くなりがちです。

WebForms フロント側の動き方（触って理解した流れ）

ざっくり書くとこんな感じです：

  1. ASPX が画面（HTML + サーバーコントロール）を生成
  2. サーバーコントロールが ASPX.CS とつながる
  3. ボタンクリック → Postback（サーバー送信）
  4. Code-behind でイベント処理
  5. 再度 ASPX として描画
  6. JavaScript はブラウザ側で必要な処理だけ実行

図にするとこういう関係：

ASPX（UI） ↔ ASPX.CS（イベント処理） ↔ JavaScript（クライアント処理）

WebForms を理解するうえで大事だと思ったポイント

✔ ViewState — 画面の状態を丸ごと保存してくれる仕組み

  • テキスト、選択状態などを自動保存
  • __VIEWSTATE に暗号化して入る
  • 便利だけど中身を意識しないと混乱しやすい

✔ Postback — すぐサーバーに飛んでいく

  • ボタン押下 = 基本的にサーバーイベント発火
  • 普通の Web と流れが全然違うので最初驚くポイント

✔ サーバーコントロール — WebForms の特徴

  • GridView、DropDownList など
  • Code-behind と強く連動する UI

最後に（まとめ）

自分なりに触ってみて、WebForms のフロントエンドはこんな構造だと理解しました：

構成 役割
ASPX 画面（HTML + サーバーコントロール）
ASPX.CS UI とサーバーの橋渡し、イベント処理
JavaScript クライアント専用処理、動的 UI

Discussion