Blazorでコンポーネントを作る | よく使う機能を共通化-スケ郎のお話

Blazorでコンポーネントを作る：基本編

Blazorにおいて、コンポーネントの作成と使用は非常にシンプルで効果的なプロセスです。以下のステップで、具体的な方法をご紹介します。

まず、プロジェクト内のShared/ComponentsディレクトリにMyComponent.razorファイルを作成します。そして、以下のコードを追加します。

「Shared/Components/MyComponent.razor」

<div>
  サンプルコンポーネント
</div>

このファイルでは、単純な<div>要素を用いてコンポーネントを定義しています。

次に、プロジェクト内でコンポーネントを使用できるように、名前空間のインポートが必要です。_Imports.razorファイルに以下のコードを追加します。

「_Imports.razor」

@using blazor_server_project.Shared.Components

これにより、プロジェクト内でMyComponentコンポーネントが使用できるようになります。

最後に、ページや他のコンポーネントでMyComponentコンポーネントを使用します。以下のようにタグで囲むだけでOKです。

<MyComponent></MyComponent>

Blazorのコンポーネントにパラメータを追加して、呼び出し元のページから値を渡すことができます。

先ほど作成したMyComponentにMessageという名前のパラメータを追加し、そのパラメータをページから指定する方法を説明します。

まず、MyComponent.razorファイルを以下のように更新します。

<div>
  @Message
</div>

@code {

  [Parameter]
  public string? Message { get; set; }

}

[Parameter]属性をプロパティに追加することで、このプロパティがコンポーネントのパラメータとして扱われるようになります。

次に、呼び出し元のページでMyComponentを使用する際に、Messageパラメータを指定します。

<MyComponent Message="サンプルメッセージ"></MyComponent>

これにより、MyComponent内でMessageプロパティの値として"サンプルメッセージ"がセットされます。

コンポーネント化により再利用性が高まり、より汎用的なコンポーネントを作成することが可能になります。という話でした。