コンポーネントの作り方と分割｜ASP.NET×Blazor入門 3.2

3.2 コンポーネントの作り方と分割

Blazorアプリでは、UIの基本単位となるのがコンポーネントです。HTMLとC#のロジックをひとまとめにした、いわば「自作のUIパーツ」。これを使うことで、再利用しやすく、保守もしやすいアプリケーションを組み上げることができます。

なぜコンポーネントで分けるのか？

画面を構成する要素を「部品」として切り出すと、同じUIを複数の場所で使い回せるようになります。ボタン、リスト、カード、フォームなど、同じ見た目や動作をするものを毎回ゼロから書く必要はありません。再利用性が高まり、修正も局所的で済むようになります。

まずは小さなコンポーネントから

たとえば、「こんにちは、○○さん！」と表示するだけのコンポーネントを作ってみましょう。

<!-- Hello.razor -->
<h2>こんにちは、@Name さん！</h2>

@code {
    [Parameter]
    public string Name { get; set; } = "ゲスト";
}

この Hello.razor は、外から Name を受け取り、それに応じたあいさつ文を表示するシンプルな部品です。ポイントは、[Parameter] 属性を使って外部から値を渡せるようにしているところです。

親コンポーネントから呼び出す

作成したコンポーネントは、他のページやコンポーネント内で以下のように簡単に呼び出せます。

<Hello Name="太郎" />

これだけで、画面には「こんにちは、太郎 さん！」と表示されます。

画面全体を「レゴブロック」で組み立てる

アプリの画面は、通常「ヘッダー」「本文」「フッター」などの領域に分かれています。Blazorでは、これらもそれぞれコンポーネントとして定義し、親ページで組み合わせることで画面を構成します。

<!-- Layout.razor -->
<Header />
<MainContent />
<Footer />

このように分割しておくと、各パーツを個別にテスト・改善しやすくなり、全体の品質も上げやすくなります。

どこまで分ける？ コンポーネント設計の目安

コンポーネントの分割にはバランスが必要です。目安としては以下のようなポイントが挙げられます。

• 複数の場所で使い回したいUI → 分ける
• 1ファイルが100行を超えてきた → 分割を検討
• 状態や処理が独立している → 別の責務として切り出す

ただし、細かく分けすぎると逆に保守が煩雑になることもあるため、「再利用性」と「責務の明確さ」を基準に考えるのが良い設計のコツです。

次のセクションへ

次のセクション「3.3 パラメータとデータの受け渡し」では、コンポーネント同士がどのようにデータを受け渡すかを見ていきます。