データバインディング ― @bind で双方向に結ぶ

導入

データバインディングは「C#の変数」と「画面の入力欄」を双方向に連動させる仕組みです。入力欄に打つと変数が変わり、変数が変わると表示も変わる——JavaScriptで手作業だったことが@bindひとつで実現します。

説明

入力欄に@bind="変数"と書くだけ。入力と変数が結びつきます。

<h3>あいさつメーカー</h3>
<input @bind="name" placeholder="名前を入力" />
<p>こんにちは、@name さん！</p>

@code {
    private string name = "";
}

flowchart LR
    INPUT["入力欄 &lt;input&gt;"] <-->|"@bind"| VAR["C♯変数 name"]
    VAR --> VIEW["表示 @name が自動更新"]

• @bind="name"で入力欄とC#変数nameを双方向に結ぶ
• 入力欄に打つとnameが更新され、@nameの表示も追従する
• DOM操作やイベント登録を手で書かなくてよい（Blazorが差分更新する）
• 本物のBlazorでは既定で「入力欄を離れたとき」に反映。1文字ごとに反映したいときは@bind:event="oninput"を付ける

やってみよう

入力欄に名前を打つと、下の「こんにちは、〜さん！」がリアルタイムで変わります。nameの初期値を変えたり、<input>をもう1つ足して別の変数に結んだりしてみましょう。

演習

private string city = "";を足し、<input @bind="city" />と「@city にお住まいですね」の表示を追加してください。

次回: ボタンのクリックに反応する@onclickです。