Blazorでいつの間にかFluentUIが利用可能になっていた話

FluentUI(名前はちょくちょく変わる)自体は元々React向けのUIコンポーネントとしてリリースされていたのですが、いつの間にかBlazorでも利用可能になっていたのでその紹介です。
Microsoft Developer Day 2022のとあるセッションの中でこの話が一瞬だけ出てきてようやく知ったのですが、去年の11月頃にはすでにリリースされていたようです。
全く気が付かなかった…

使い方

MSのドキュメントに書いてある通りの手順だけで簡単に利用可能です。
ただし、2022/02時点の最新版では.NET 6は必須です。

Blazorコンポーネント用のドキュメントはまだ見つけられなかったので、既存のJS向けのコンポーネントのドキュメントをいい感じに読み替えるか、デモを見て試していくしかありません。
デモのソースコードはGitHubから入手可能です。ビルドしてすぐに確認できます。

Blazor Serverで確認する場合はFluentUI.Demo.Serverプロジェクトを、Blazor WebAssemblyで確認する場合はFluentUI.Demo.Clientプロジェクトをそれぞれスタートアッププロジェクトに設定して実行します。

ちなみにBlazor上では

(1)
<fluent-card>
  <h2>Hello World!</h2>
  <fluent-button appearance="accent">Click Me</fluent-button>
</fluent-card>

(2)
<FluentCard>
  <h2>Hello World!</h2>
  <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>

このどちらでも認識されるようです。
VS上でインテリセンスが有効になったりエラーが確認できたりするので、個人的には(2)を推奨します。

fast-blazor-main\examples\FluentUI.Demo.Shared\Pages
各コンポーネントのサンプルコードがここに用意されています。
それぞれ色々なパターンが用意されているので、公式のドキュメントが整備される(のか?)まではこれらを参考にすると良いかと思います。

コード側のサンプルコードも用意されています。
RowEventHandlers
ドロップダウンリストの項目選択時やボタンクリック時のイベント

RowBindings / ComponentBindings
各UIコンポーネントへの値のバインド。Blazorのbind-Valueと同じような使い方で実装できます。

余談

BlazorはPWAに対応しています。
そこでFluentUIを用いたWebアプリを作ることができれば、Windows11ネイティブアプリ然とした振る舞い方ができるようになるのかな、と勝手に思っています。

あと今回ようやくVS2022のホットリロード機能の恩恵を受けられました。
ホットリロード最高！