白熱した東京オリンピックも無事終えてそろそろお勉強を開始したいと思います放浪軍師です。今回は Blazor のコンポーネントについて学んでみようかと思います。
Blazor の コンポーネント
上の記事にはこう説明されています。
コンポーネントとは、
- 自己完結型のひとまとまりの UI です。
- 自身の状態およびレンダリング ロジックを保持します。
- UI イベント ハンドラーを定義し、入力データにバインドし、自身のライフサイクルを管理できます。
- 通常、Razor 構文を使用して .razor ファイルで定義されます。
要はページを構成する各部品がコンポーネントであり、そのコンポーネントを組み合わせてページを作るというのが Blazor の肝であるようです。では、早速やってみましょう。
環境
- Microsoft Visual Studio Community 2019 Version 16.8.2
- Microsoft.AspNetCore.Components.WebAssembly 5.0.5
GitHub
参考になれば幸い(記事に使わなかった抽選用コンポーネントもあるよ！)
最小コンポーネントのつくり方と使い方。
まずは最小のコンポーネントを作ってみましょう。Blazor WebAssembly のプロジェクトを作成したところから説明します。
- Components フォルダを作成する。
- Components フォルダで右クリックから【追加】→【Razor コンポーネント】を選択し、Hoge.razor を作成する。
- Components/Hoge.razor の中身が以下のようになっている事を確認する。
<h3>Hoge</h3> @code { }
以上です。これで Hoge というコンポーネントが作成できました。今までやっていたページを作るのとまったく同じです。というよりページはそもそもコンポーネントだったという事ですね。
次に上記コンポーネントの使い方を見てみましょう。
- Pages/Index.razor を以下のようにする。
@page "/" <Hoge />
以上です。これで Hoge コンポーネントを配置できました。今までやっていたボタンを配置するのとまったく同じです。というよりボタンもコンポーネントだという事ですね。ちなみに以下のように表示されます。
コンポーネントにパラメータを与える
次のステップとして、コンポーネントにパラメータを与えてみます。まずは Hoge.razor 側から。
- Components/Hoge.razor を以下のようにする。
<h3>@Title</h3> @code { [Parameter] public string Title { get; set; } }
このように public プロパティに [Parameter] という属性を付けることによって利用元からプロパティを指定することができるようになります。
次に上記コンポーネントの使い方を見てみましょう。
- Pages/Index.razor を以下のようにする。
@page "/" <Hoge Title="Hoge" />
このように Title 属性で値を指定することができます。簡単ですね。表示は前回と同じなので割愛。
コンポーネントからパラメータを受け取る
配置したコンポーネントのイベントにより親側のプロパティをバインディングにより変更させて使用したい場合があります。その場合の記述を見ていきましょう。実はこれを残しておきたいので今回記事にしているという事情があります。絶対忘れそうなので。
- Components/Hoge.razor を以下のようにする。
<input type="text" @bind="addText" /> <button Color="Color.Primary" @onclick="OnClick">Add</button> @code { public string addText; [Parameter] public string Text { get; set; } [Parameter] public EventCallback<string> TextChanged { get; set; } //Text プロパティを利用元とバインディングするのでプロパティ名に Changed を付けて TextChanged という名称にする。他の名称では繋がらないので注意!!! private Task OnClick(MouseEventArgs e) { Text = Text + ":" + addText; return TextChanged.InvokeAsync(Text); //ここで利用元とTextプロパティの値がバインディングする } }
こちらは受け取った Text パラメータに button のクリックイベントをトリガーに input で入力した文字列を付加してバインディングするコンポーネントになっています。ポイントはコメントのとおりで、プロパティ名 + Changed 以外の名称にしてしまうと利用元で使えません。(ここで大いにハマった)
次に上記コンポーネントの使い方を見てみましょう。
- Pages/Index.razor を以下のようにする。
@page "/" <h3>@title</h3> <Hoge @bind-Text="title" /> @code{ string title = "Hoge"; }
こちらは単純で、バインドさせたい変数またはプロパティを@bind-{Parameter}属性を利用して指定するだけです。今回の場合は Text とバインドさせるので @bind-Text 属性で指定します。このコンポーネントの動きはこんな感じです。
まとめ
コンポーネントを使えば同じような機能を持つ UI をいろいろな場面で使いまわすことができて便利ですね。実装の隠蔽にもなりますし、積極的に使っていきたい。
