先生と生徒の会話形式で理解しよう

生徒

「ASP.NET Blazorで、画面の部品どうしがデータをやり取りする方法ってあるんですか？」

先生

「あります。Blazorでは、コンポーネント間でデータを受け渡す仕組みが用意されています。」

生徒

「コンポーネントって、画面の部品みたいなものですよね？」

先生

「その通りです。今日は、部品どうしがどうやって情報を伝えるのかを、やさしく説明します。」

1. Blazorのコンポーネントとは？

ASP.NET Blazorにおけるコンポーネントとは、画面を構成する小さな部品のことです。ボタン、入力欄、表示エリアなどをひとつひとつ部品として作り、それらを組み合わせて画面を完成させます。

例えるなら、レゴブロックのようなものです。小さなブロックを組み合わせることで、大きな作品が作れます。Blazorでは、このブロックがコンポーネントになります。

コンポーネントは再利用できるため、同じ画面部品を何度も作る必要がありません。この便利さを活かすために重要になるのが、コンポーネント間のデータ受け渡しです。

2. 親コンポーネントから子コンポーネントへデータを渡す

一番基本的なデータ受け渡しは、親コンポーネントから子コンポーネントへ値を渡す方法です。親とは、子を呼び出している側の部品です。

Blazorでは、Parameterという仕組みを使ってデータを渡します。これは「この部品は、外から値を受け取れますよ」という目印です。


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

上のコードでは、Messageという文字データを受け取れるようにしています。これを使うと、親コンポーネントから自由に文字を渡せます。

次に、親コンポーネント側で子コンポーネントを呼び出し、データを渡す書き方を見てみましょう。


<ChildComponent Message="こんにちは、Blazor！" />

このように、HTMLタグのような書き方で値を指定します。ここで指定した文字が、そのまま子コンポーネントに渡されます。

初心者の方は、「HTMLみたいだけど、実はC#とつながっている」と覚えると理解しやすいです。

逆に、子コンポーネントから親コンポーネントへ情報を伝えたい場合もあります。例えば、ボタンが押されたことを親に知らせたい場合です。

このときは、イベントコールバックという仕組みを使います。少し難しく聞こえますが、「合図を送る仕組み」と考えると簡単です。


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

    void NotifyParent()
    {
        OnClick.InvokeAsync();
    }
}

子コンポーネントの中で合図を出すと、親コンポーネント側でその合図を受け取れます。

画面のあちこちで同じデータを使いたい場合もあります。そのときに便利なのが、共有用のクラスです。

これは「みんなが見られるノート」のようなものです。どのコンポーネントからも同じ情報を読んだり書いたりできます。


public class AppState
{
    public string UserName { get; set; }
}

このようなクラスを使うことで、コンポーネント間のデータ管理がとても楽になります。

初心者の方がよく勘違いしやすいのが、「変数を書けば自動で共有される」という考えです。Blazorでは、明示的に受け渡し方法を決める必要があります。

親から子へはパラメータ、子から親へはイベント、広く共有する場合は共有クラス、と役割を分けることが大切です。

この考え方を身につけると、画面の動きが整理され、バグも減らせます。

コンポーネント間のデータ受け渡しは、難しそうに見えて、実は「誰が誰に何を伝えるか」を考えるだけです。

人と人の会話と同じで、話す相手と内容がはっきりしていれば混乱しません。Blazorも同じ考え方で作られています。

まずは親から子へ渡す方法をしっかり理解し、少しずつ他の方法に慣れていくのがおすすめです。