One-way / Two-way バインディングとは？｜ASP.NET×Blazor入門 4.1

4.1 One-way / Two-way バインディング

Webアプリ開発において、データを画面に表示することは最も基本的な処理のひとつです。Blazorではこの表示方法に、一方向（One-way）と双方向（Two-way）の2つのバインディングスタイルがあります。どちらも重要な概念なので、まずは違いを丁寧に理解しておきましょう。

One-wayバインディング：データを画面に表示する

一方向バインディングでは、C#の変数やプロパティの値を@構文でHTMLに埋め込み、画面上に表示します。データの流れは「コード → UI」の一方通行です。

<h3>こんにちは、@Name さん！</h3>

@code {
    private string Name = "太郎";
}

この例では、Name の値が変化すると自動的に画面に反映されます。ただし、ユーザーが画面上で何か操作しても、Name の中身が変わることはありません。

Two-wayバインディング：UIと変数を同期させる

ユーザーの入力に応じて変数を更新したい場合は、@bind 構文を使って双方向バインディングを行います。これにより、UIと変数が連動し、どちらの変更も即座に反映されるようになります。

<input @bind="Name" />
<p>入力された名前: @Name</p>

@code {
    private string Name = "";
}

@bind は実際には、以下2つの処理を自動でまとめています：

• value="@Name" – 初期値の設定
• @onchange="(e) => Name = e.Value?.ToString()" – 値が変更されたときの処理

このように @bind は、「UIの変更がコードに伝わる」+「コードの変更がUIに反映される」ための糖衣構文（シンタックスシュガー）となっています。

バインディングの仕組みを明示的に書く

@bind の裏側の処理を自分で書くことで、より細かな制御が可能になります。たとえば入力値を整形したり、バリデーションを入れたいときなどは、この形を使うと便利です。

<input 
    value="@Name" 
    @oninput="(e) => Name = e.Value?.ToString()" />

このように明示的に書くことで、@onchange の代わりに @oninput を使うこともでき、反応のタイミングを細かく調整できます。

まとめ：バインディングの基本を押さえる

• One-way バインディングは @ を使って変数の値を画面に表示（コード → UI）
• Two-way バインディングは @bind を使って双方向にデータを同期（コード ⇄ UI）
• @bind は value と @onchange の省略記法である

次のセクション「4.2 ユーザー入力とフォーム」では、このバインディングの考え方を活かして、フォーム入力とバリデーションに取り組んでいきます。