はじめに
Microsoftが2019年にBlazor Serverをリリースしてから、Blazor WebAssembly、Blazor Hybridなど進化が今でも続いております。
以前までのC#はWindowsアプリケーションのみで活躍しておりましたが、BlazorもC#で開発することができるため、C#を扱うエンジニアがWEBやモバイルといった分野まで活躍できるようになりました。
今回ご紹介させて頂くのは、現在開発中のBlazor Serverで使用しているUIコンポーネントについて、選定理由などをご説明させて頂きます。
UIコンポーネントとは
UIコンポーネントとは、ユーザーインターフェース（UI）を作るためのミドルウェアを指します。UIコンポーネントを使用することで、モダンな見た目や機能のUIを効率的に開発することができます。
実際にBlazorのサンプルページにUIコンポーネントを適用すると以下のようになります。
| UIコンポーネント | イメージ |
|---|---|
| 適用前 |  |
| 適用後 |  |
サンプルページではテーブルを入力可能なデータグリッドに変更しただけになりますが、簡単にモダンなUIを作成することができます。
UIコンポーネントの種類
BlazorのUIコンポーネントは以下のようなものがあります。
数多くのUIコンポーネントから、以下のような基準で選定しました。
- コンポーネント数が多い
- 利用者数が多い
- 更新頻度が高い
- ドキュメントが充実している
- 学習コストが高くない
上記の基準に沿ったUIコンポーネントをAnt Design Blazor、MudBlazor、Radzen.Blazorの３つに絞り込み、最終的にRadzen.Blazorを選びました。
Radzen.Blazorを選んだ理由
ドキュメントやサンプルが充実している
こちらが1番の理由となりますが、現在の開発メンバーはWindowsアプリケーション開発者が多く、Blazorを扱ったことがある人がほとんどいないため、ドキュメントが充実していることが重要でした。
その点、Radzen.Blazorでは公式ドキュメントで１つのコンポーネントに対して複数のチュートリアルが用意されていたり、https://github.com/radzenhq/radzen-examples などで数多くのサンプルアプリケーションが用意されているため、初学者にとても配慮されていると感じました。
公式のDataGridだけで50を超えている・・・
また、有償ではありますが、Radzen Blazor Studio という総合開発環境も用意されているため、開発者がより効率的に設計・構築できる環境が整っております。
視覚的なUIコンポーネント数が多い
HTMLのinputタグに対してCSSスタイルを適用したものだけでなく、Schedulerや、数多くのChartなど、様々なUIコンポーネントが用意されております。
もちろん、内容によっては独自で作成する必要があると思いますが、基本的なUIコンポーネントは揃っているため開発コストが削減できると感じました。
CSSスタイルテーマが多い
Ant Design Blazorは独自のフラットデザインとなっており、MudBlazorはマテリアルデザイン2のスタイルテーマとなっております。しかしながら、Radzen.Blazorは有償も含めて14のスタイルテーマが用意されており、フラット・マテリアル2/3など用途にあわせて変更することが可能なため、デザインの自由度が高いと感じました。
さいごに
今回はRadzen.Blazorを選定した背景についてご紹介させて頂きましたが、他のUIコンポーネントも機会があれば活用してみたいと思います。
また、今後もBlazorの内容を発信していきますので、よろしくお願いいたします。
Discussion
BlazorFluentUIについては後継プロジェクトFluent UI Blazorに引き継がれています。 こちら、参照してください