Blazorコンポーネントのカスタマイズ入門｜ASP.NET×Blazor入門 10.3

10.3 コンポーネントのカスタマイズ

Blazorでは、再利用可能なコンポーネントをベースにしつつ、UIや振る舞いを柔軟に調整できます。 このセクションでは、CSSスタイルの上書き、クラスの動的適用、テンプレートの差し替え、親子コンポーネント間の連携など、カスタマイズの幅広い手法を紹介します。

1. CSSクラスとスタイルの上書き

標準コンポーネントに対して class 属性や style 属性を指定すれば、見た目を簡単に変更できます。 たとえば、MudBlazorのボタンに独自の色を適用するには以下のようにします：

  <MudButton Class="my-button">カスタムボタン</MudButton>
  

CSSファイル側で以下のようにスタイル定義を追加します：

  .my-button {
    background-color: #4caf50;
    color: white;
    font-weight: bold;
  }
  

また、style="..." 属性で直接インラインスタイルを指定することも可能です。

2. クラスの動的付与

Blazorでは、条件に応じてクラスを付け替えることができます。 これは、例えば入力エラーがある時だけ赤色を表示するような場合に便利です。

  <input class="@((hasError ? "input-error" : "input-normal"))" />
  

  .input-error { border: 2px solid red; }
  .input-normal { border: 1px solid gray; }
  

3. コンポーネント間のテンプレート差し替え

MudBlazorのようなUIフレームワークでは、テンプレート構文（ChildContent）を活用して、 表示内容を自由に入れ替えることができます。

以下は MudTable の行テンプレートを差し替える例です：

  <MudTable Items="@users">
    <RowTemplate>
      <MudTd DataLabel="名前">@context.Name</MudTd>
      <MudTd DataLabel="年齢">@context.Age</MudTd>
    </RowTemplate>
  </MudTable>
  

このように、テンプレート構文を使えば、見た目や構造を細かくコントロールできます。

4. パラメータでカスタマイズを受け取る

カスタムコンポーネントを作成する際は、パラメータを使って動作を柔軟にします。

  <MyButton Label="保存" Color="green" />
  

// MyButton.razor
<button style="background:@Color">@Label</button>

@code {
    [Parameter] public string Label { get; set; }
    [Parameter] public string Color { get; set; }
}
  

5. イベント連携と親子通信

コンポーネント間でイベントを通じて情報をやりとりすることも可能です。 例えば、子コンポーネントでボタンがクリックされた時、親に通知するには以下のようにします：

// ChildComponent.razor
<button @onclick="NotifyParent">送信</button>

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

    async Task NotifyParent() {
        await OnSend.InvokeAsync();
    }
}
  

親コンポーネントではこう受け取ります：

  <ChildComponent OnSend="HandleSend" />

  @code {
    void HandleSend() {
        Console.WriteLine("子から送信されました");
    }
  }
  

まとめ

コンポーネントを自在にカスタマイズできることは、Blazorの最大の魅力の一つです。 UIの見た目や振る舞いをニーズに合わせて柔軟に変えながら、コードの再利用性や保守性を保つことが可能です。

次の章では、Blazorアプリケーションのバックエンドとの連携で重要となる「認証と認可」の仕組みについて見ていきます。