業務システムやリッチなWebサービスを構築する際、「これがあると一気にプロっぽくなる」「開発の手間が劇的に省ける」という、MudBlazorのさらに強力な機能を4つ厳選してご紹介します。
1. 最強のデータ表「MudDataGrid」
以前ご紹介した MudTable の進化版です。 実際の業務アプリでは、「表の列をクリックして並び替えたい」「特定の条件（例えば「東京都」だけ）で絞り込みたい」「エクセルのように表の中で直接データを編集したい」といった要望が必ず出ます。
MudDataGrid を使えば、C#で複雑な検索処理や並び替え処理を一切書かなくても、設定を「True」にするだけでこれらの機能が手に入ります。
<MudDataGrid Items="@Employees" Filterable="true" SortMode="SortMode.Multiple" Groupable="true">
<Columns>
<PropertyColumn Property="x => x.Id" Title="社員ID" />
<PropertyColumn Property="x => x.Name" Title="名前" />
<PropertyColumn Property="x => x.Department" Title="部署" />
<PropertyColumn Property="x => x.Salary" Title="給与" Format="C" />
</Columns>
</MudDataGrid>
- ここがスゴイ:
Groupable="true"にすると、部署ごとにデータを折りたたんでグループ化する機能まで自動的についてきます。
2. ダッシュボードに必須の「MudChart」
売上データやユーザーの割合をグラフ化したいとき、通常は外部のJavaScriptライブラリ（Chart.jsなど）を導入して四苦八苦する必要がありますが、MudBlazorなら標準でグラフ描画機能が内蔵されています。
<MudChart ChartType="ChartType.Donut" Width="300px" Height="300px"
InputData="@data" InputLabels="@labels" />
@code {
// グラフに表示する数値とラベルの配列を渡すだけ！
public double[] data = { 25, 15, 60 };
public string[] labels = { "モバイル", "タブレット", "PC" };
}
- ここがスゴイ: 折れ線グラフ（Line）、棒グラフ（Bar）、円グラフ（Pie/Donut）などが用意されており、データが更新されるとアニメーション付きでヌルッと美しくグラフが変化します。
3. ファイルアップロード「MudFileUpload」
ユーザーのプロフィール画像や、一括登録用のCSVファイルを読み込む機能も、専門のコンポーネントが用意されています。
<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
<ActivatorContent>
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.CloudUpload">
画像を選択
</MudButton>
</ActivatorContent>
</MudFileUpload>
@code {
private void UploadFiles(IBrowserFile file)
{
// ここにファイルを受け取って保存する処理を書きます
Console.WriteLine($"ファイル名: {file.Name}, サイズ: {file.Size} bytes");
}
}
- ここがスゴイ: ドラッグ＆ドロップでファイルを受け付けるエリア（ドロップゾーン）を作ることも簡単にできます。
4. スマホ対応を極める「MudHidden」とレスポンシブ
今の時代、PCでもスマホでも綺麗に見える「レスポンシブデザイン」は必須です。 MudBlazorには、画面の幅（ブレークポイント）に合わせてレイアウトを自動調整する仕組みがあります。
特に便利なのが、「スマホの時だけこのボタンを消す」「PCの時だけサイドバーを表示する」といった制御ができる MudHidden です。
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="false">
<MudText>デスクトップ版の特別なメニュー</MudText>
</MudHidden>
<MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="false">
<MudText>スマホ版の簡易メニュー</MudText>
</MudHidden>
- ここがスゴイ: CSSのメディアクエリ（
@media）を自分で書かなくても、タグで囲むだけで要素の出し分けが完璧にコントロールできます。
いかがでしょうか？「高機能な表」「グラフ」「ファイルアップロード」「スマホ対応」と、これらを組み合わせれば、世の中にある大半のWebアプリケーションの画面は作れてしまいます。
コメント