MudBlazorは、C#を使用してWebアプリケーションを構築する「Blazor」フレームワーク専用の、マテリアルデザインUIコンポーネントライブラリです。JavaScriptをほとんど書かずに、あらかじめ用意された豊富な部品を組み合わせて、直感的で美しいユーザーインターフェースを効率的に作成できるのが大きな魅力です。
今回のテーマは「Blazorとの関係と基本の仕組み」 MudBlazorがBlazorアプリの中でどのように機能するのか、前提となる知識や基本的なセットアップの全体像について学びます。
MudBlazorを深く理解するためには、まず土台となる「Blazor」という技術との役割分担を整理しておく必要があります。
- Blazor（ブレイザー）とは？ Microsoftが提供しているWebフレームワークです。通常、Webブラウザ上で動く画面（フロントエンド）はJavaScriptを使って書きますが、Blazorを使うと**C#**だけでWebアプリの画面の動きや論理を構築できます。
- MudBlazorの役割 Blazorで画面を作るとき、ボタンやメニュー、表などのデザインをHTMLとCSSでゼロから作るのは非常に手間がかかります。MudBlazorは、Googleが提唱する「マテリアルデザイン」に準拠した**完成済みのUI部品（コンポーネント）**を提供してくれます。
つまり、「C#で動くWebアプリの土台（Blazor）」の上に、「あらかじめ綺麗にデザインされた部品（MudBlazor）」をレゴブロックのように配置していくことで、アプリが完成します。
ここから、MudBlazorを使うための最初の設定や、プログラムの構造の話題に入っていきます。
MudBlazorをBlazorアプリで使えるようにするための基本的な準備（セットアップ）は、主に以下の4つのステップで行われます。
1. パッケージの追加: NuGetという仕組みを使って、プロジェクトにMudBlazorのライブラリをインストールします。
2. サービスの設定: Program.csというファイルで、「このアプリでMudBlazorの機能を使います」と宣言します。
3. CSSとJavaScriptの読み込み: アプリの大元となるHTMLファイルに、MudBlazor専用のデザイン（CSS）や動き（JS）を読み込むためのリンクを追加します。
4. 名前空間の追加: _Imports.razorに @using MudBlazor と書くことで、どの画面からでも短いコードでMudBlazorの部品を呼び出せるようにします。
これらの準備が終わると、いよいよMudBlazorのコンポーネントを画面に配置できるようになります。
ここで、実際のコードの書き方の違いを想像してみましょう。 標準のBlazor（HTML）で青色のボタンを作るときは、<button class="btn btn-primary">送信</button> のように、CSSのクラスを使ってデザインを指定することが多いです。
一方、MudBlazorの場合はデザインが内包された「専用のタグ」を使います。多くのコンポーネントは「Mud + コンポーネントの英単語」という分かりやすい名前がついています。
今回はMudButtonを例として取り上げてBlazorの最大の強みである「C#で画面の動きを作る」という仕組みを実際に見てみましょう。
標準的なHTMLとJavaScriptを使った開発では、ボタンの見た目はHTML、押したときの処理はJavaScriptと、違う言語で別々に書くことが多いです。しかし、Blazorでは1つのファイル（.razorファイルという拡張子を使います）の中に、MudBlazorのUIとC#の処理を一緒に書くことができます。
例えば、このような形になります。
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="BtnClicked">
送信
</MudButton>
@code {
// 下半分（@codeブロック）はC#の世界
private void BtnClicked()
{
Console.WriteLine("ボタンが押されました！");
}
}
OnClick="BtnClicked" という部分で、「ボタンが押されたら、下のC#のメソッドを動かしてね」と繋げています。JavaScriptを使わずに、直接C#が動くのがポイントです。
ここで一つ、Blazorの仕組みを体験するための質問です。 もし、「ボタンを押すたびに、画面に表示されているクリック回数を 1 ずつ増やしていく」という簡単な機能を作りたいとします。
その場合、この @code { ... } のブロックの中に、回数を覚えておくためのどのような「データ（変数）」を準備すればよいと思いますか？（型の名前など、思いつくもので大丈夫です）
答えは、クリック回数を記録するための整数型（int）の変数が必要になります。
実際のコードに組み込むと、このようになります。
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="BtnClicked">
クリック回数: @Count
</MudButton>
@code {
// 整数型の変数を準備
private int Count = 0;
private void BtnClicked()
{
// ボタンが押されるたびに1増やす
Count++;
}
}
ここで注目していただきたいのは、HTML側の <MudButton> の中に書かれた @Count という部分です。
Blazorでは、変数名の前に @ をつけるだけで、C#のデータをそのまま画面に表示できます。そして最大の魔法は、ボタンが押されてC#の Count の値が変化すると、自動的に画面の数字も書き換わることです。JavaScriptでわざわざ画面の文字を書き換える指示（DOM操作）を出す必要がありません
これで、BlazorとMudBlazorがどのように連携して動くのか、基礎的なイメージが掴めたかと思います。
では、ここからさらに一歩踏み込んで、MudBlazorのコンポーネントを動的に操作してみましょう。 もし、「クリック回数が5回以上になったら、ボタンの色を青（Color.Primary）から赤（Color.Error）に変えたい」とします。
現在 Color="Color.Primary" と固定で書かれていますが、これを回数に応じて変化させるには、C#側（@code ブロックの中）にどのようなものを追加・変更すれば実現できそうでしょうか？少し推測してみてください。
答えは、数字のときと同じように、色を管理するための変数を @code ブロックに用意して紐づけます。
MudBlazorでは、色は単なる文字列（”red”や”blue”など）ではなく、Color という専用の型（列挙型）を使って指定します。実際のコードに落とし込むと、以下のようになります。
<MudButton Variant="Variant.Filled" Color="@ButtonColor" OnClick="BtnClicked">
クリック回数: @Count
</MudButton>
@code {
private int Count = 0;
// 色を管理する変数。初期状態はPrimary（青）に設定
private Color ButtonColor = Color.Primary;
private void BtnClicked()
{
Count++;
// 5回以上になったら色をError（赤）に変更する
if (Count >= 5)
{
ButtonColor = Color.Error;
}
}
}
このように、C#のロジック（if文など）を使って変数の値を書き換えるだけで、MudBlazorのコンポーネントが自動的に新しい状態（この場合は色）を画面に反映してくれます。HTML側の属性を直接操作する必要がないのが、大きなメリットです。
これで「Blazorとの関係と基本の仕組み」の基礎サイクルが確認できました。
コメント