Blazorイベント処理の基本とカスタムイベント｜ASP.NET×Blazor入門 4.3

4.3 イベントの種類とカスタムイベント

ユーザーの操作に即座に反応する──それが「イベント」です。 Blazorでは、ボタンクリック・入力完了・マウス操作など、さまざまなイベントをC#のみで安全かつ直感的に扱うことができます。 JavaScriptに頼らず、型安全にイベント処理が書けるのはBlazorならではの強みです。

基本のイベントハンドリング

@onclick は最も基本的なイベントハンドラで、ボタンクリック時にC#のメソッドを呼び出します。

<button @onclick="HandleClick">クリック</button>

@code {
  private void HandleClick()
  {
    Console.WriteLine("クリックされました！");
  }
}

JavaScriptの addEventListener のような手続きは不要で、イベント発火とメソッド実行がシンプルにつながります。

代表的なイベント一覧

• @onclick：クリック（ボタン、リンクなど）
• @oninput：入力中にリアルタイムで発火
• @onchange：入力完了後（フォーカスアウト時）
• @onmouseover / @onmouseout：マウスの出入り
• @onsubmit：フォーム送信時

さらに、イベント引数（ChangeEventArgsなど）を使えば、ユーザー操作の内容をコード内で取得できます。

<input @oninput="OnInputChange" />

@code {
  private void OnInputChange(ChangeEventArgs e)
  {
    Console.WriteLine($"入力された値: {e.Value}");
  }
}

イベントに引数を渡す方法

イベントに特定の値を渡したい場合、ラムダ式で明示的に値を埋め込むことができます。

<button @onclick="() => HandleClick(42)">数字を渡す</button>

@code {
  private void HandleClick(int value)
  {
    Console.WriteLine($"受け取った数値: {value}");
  }
}

カスタムイベントの作成

独自コンポーネント内でイベントを定義したい場合は、EventCallback を使います。 これにより、親コンポーネントが子のイベントをハンドリングできます。

以下は、子コンポーネントでイベントを定義し、親で受け取る例です。

子コンポーネント：

<button @onclick="OnClicked">送信</button>

@code {
  [Parameter]
  public EventCallback OnClick { get; set; }

  private async Task OnClicked()
  {
    await OnClick.InvokeAsync(null);
  }
}

親コンポーネント：

<MyButton OnClick="HandleChildClick" />

@code {
  private void HandleChildClick()
  {
    Console.WriteLine("子コンポーネントがクリックされました！");
  }
}

まとめ

• BlazorではJavaScriptを使わずにC#でイベント処理が可能
• イベント引数やラムダ式で柔軟に挙動を設計
• EventCallback により親子間でイベント連携が可能

次のセクション 「Blazorルーティングの基本」 では、ユーザーがページを移動するしくみをBlazorでどう実現するか、ルーティングの定義方法とURLの動的な扱い方について詳しく解説していきます。