More than 1 year has passed since last update.

Blazorで使えるUIデザインコンポーネントまとめ

Last updated at 2023-05-23Posted at 2023-05-06

これはなに？

Awesome Blazorに掲載されているコンポーネントから有力そうなものをピックアップし、特徴を調べてまとめたものです。「これからBlazorやるか～」「UIコンポーネントライブラリ何使おうかな？」と思ったときに参考になると思います。

2023年5月現在の情報をまとめただけなので、時間経過によりここに書かれていることは変化する可能性があります。ご注意ください。

なお、GitHub Star数が極端に少なかったり、Contributorが1人だけだったりした場合は候補から外してます。そういったものも確認したい場合はAwesome Blazorをご確認ください。

事の発端

サーバサイドとスタンドアローンしかやったこと無いC#エンジニア（私）がWEBアプリ開発のフルサイクルいっちょやってみっか、と思ってBlazorにたどり着いたのが1週間前。勉強がてら自習書をやりつつ、UIデザインコンポーネント何使おうか、と思って調べました。せっかくまとまった資料になったので、成果を公開したいと思いました。

Blazorで使えるUIデザインコンポーネントまとめ

FAST
- GitHub☆:8.3k
- https://github.com/microsoft/fast
- MSが開発しているWEB UIフレームワーク。3大WEBフレームワークにも対応しておりBlazor専用というわけではない。スターの数の多さは主にBlazor以外の利用者によるものと思われる。色覚特性少数者への配慮などのデザイン哲学は共感できる。
- Blazor 向けの公式ガイドにはMicrosoft.Fast.Components.FluentUIを追加して使う方法が掲載されているが、組み合わせたときどこまで相乗効果があるかは不明。ライブデモのようなものが無かったのでデザインは把握できていない。
Microsoft Fluent UI Blazor components
- GitHub☆:1.3k
- https://github.com/microsoft/fluentui-blazor
- MSが開発しているWEB UIフレームワーク。Fluent UI自体はもともとはReact向けらしい。MS FASTとの関係性が今一つよくわからないが、ライブラリの名前が「Microsoft.Fast.Components.FluentUI」なのでFASTの一部という扱いになっている模様（？）。
Ant Design Blazor
- GitHub☆:4.9k
- https://github.com/ant-design-blazor/ant-design-blazor
- Ant Designは中国のアリババグループの金融関連会社アントグループ発のReact向けOSS UIフレームワーク。Ant Design BlazorはそのBlazorへの移植版。金融機関のWEBサイト向けだっただけありエンタープライズレベルでチャートなどのコンポーネントが揃っている印象。そこまで中華テックっぽいデザインではなく垢ぬけている。
MudBlazor
- GitHub☆:5.2k
- https://github.com/MudBlazor/MudBlazor
- マテリアルデザインをベースとするWEB UIデザインコンポーネント。プロジェクトが.NET3.1時代から開始されており活動が長く活発で良い。Blazor利用者でもあるJonny Larsson（Swedish）が開始したプロジェクトで、Gardnet ABという従業員2名（うち、1人はLarssonさん）の会社が寄付金管理とプロダクト保護を行っているが実質LarssonによるピュアOSS。ほぼC#で記述されており堅牢という印象。オンラインデモなどが充実しており好印象。
RadzenBlazor
- GitHub☆:2.4k
- https://github.com/radzenhq/radzen-blazor
- Rapid + Development + Zen = Radzenらしい。ブルガリアのBlazorアプリ開発企業発。ローコードのBlazor開発アプリを販売しており、RadzenBlazorへの有償サポートも実施している。Native Blazor UI Controlsであることをアピールしている。
MASA Blazor
- GitHub☆:670
- https://github.com/masastack/MASA.Blazor
- 中国の企業温州数闪科技有限公司発。MASA Stack.comという「オープンソースのエンタープライズ開発者ポータル」サービスを販売しており、MASA Blazorもこの製品に使われているUIデザインコンポーネントらしい。ライブデモはマテリアルデザインぽくてポップで良いがアプリの用途によっては合わないかもしれない。MASA Blazor Proという派生プロジェクトがあるが、MASA Stackが実装例のようだ。
Blazorise
- GitHub☆:2.8k
- https://github.com/Megabit/Blazorise
- クロアチアの企業Megabit社の有償OSS。商用利用には有償ライセンスが必要と明示されている。この点で採用NGになるケースが多そう。
- BlazorとBootstrap、Bulma、Material などの CSS フレームワークの上に構築されたコンポーネントライブラリ。UIデザインライブラリを選択できるため、もともと使っていたUIデザインを継続して使うのに向いていると思われる。反面、既存のUIライブラリに縛られたくない、もしくは使ったことが無い場合は大きなメリットにならない。

各デザインの見た目

Blazorの標準デザイン

全く素の状態でBlazorプロジェクトを作成するとこのような見た目。
コンポーネントなどの支援はほぼ無い様子。

Microsoft Fluent UI Blazor components

Fluent UIだけあってSharePointなどOffice系のデザインと近い見た目にできる。上の図はデモサイト。
グラフやチャートなどのコンポーネントが全く無い。軽く調べたところfluentui/react-chartingといったプロジェクトもあるようだが、不安要素。
.NET8.0（※2023年5月現在プレビュー版）がターゲットに含まれてしまっているのでセットアップガイド通りに設定しても、再設定しないとデモが動かなくて困った（.NETのターゲットを7.0までにしたら動いた）。

Ant Design Blazor

そこまで中華テック企業っぽいデザインというわけでもなく使いやすい印象。
デモが豪華。Boilerplateをdotnetコマンドでインストールするとすぐ動かせる。

$ dotnet new antdesign -o MyAntDesignApp -f

基本的なUIコンポーネントが揃っているだけでなく折れ線グラフなどチャートも書けるので非常に便利。
ドキュメントにチャートのデモあり。

MudBlazor

公式ドキュメントがライブデモとサンプルコードの紹介を兼ねている。デモとコードを一度に見比べることができ非常に見やすい。
基本的なUIコンポーネントが揃っているだけでなくチャートも一通り揃っている。
企業の動向にも左右されない。
C#エンジニアだけで開発するならMudBlazorが最も書きやすそう。

Radzen Blazor

一通りのコンポーネントが揃っており見た目も良い。
公式ドキュメントがデモとサンプルコードの紹介を兼ねていて使いやすそう。
企業の動向に左右されやすそうなのと、ソースコードがJSチックで洗練されていないのがデメリット。

MudBlazor vs Radzen Blazor

ここで余談ながら、よさそーだなーと思ったMudBlazorとRadzen Blazorの比較をしておきたい。どちらも公式ドキュメントに掲載されているLine Chartのソースコードなのだが、MudBlazorのサンプルコード

と、Radzen Blazorのサンプルコード

は長さ、class attributeの打ち方などにかなりの違いがある。

MudBlazorが構造化されたコンポーネントでスッキリとしたコードなのに対して、Radzen BlazorはHTMLタグの記述量が多く旧来のJS + CSSの手法に依拠しているイメージ。
Radzen Blazorの方が原始的である分細かいカスタマイズが可能かもしれないが、開発効率の点ではMudBlazorに軍配が上がりそう。アプリを素早く作ってスプリントを回しながら改善するような開発スタイルではMudBlazorの方が向いているのではないか。Blazorネイティブという同じ設計思想に基づいていながらGitHubスター数にダブルスコアの開きがあるのはこれが原因と思われる。

MASA Blazor

MASA Stackという製品のライブデモがイメージをつかみやすい。
中国の企業「温州数闪科技有限公司」が母体になっているプロジェクトなので企業の動向に左右される可能性がある。

Blazorise + Bootstrap 5

BlazoriseはBootstrap5のデモ以外にもいろいろなUIデザインライブラリのデモが実行できる。
少なくともBootstrapを使う場合はBlazorStrapプロジェクトよりデモやドキュメントが充実している分安心感がある。
商用利用は有償と明示されているのでこの点でNGになるケースが多そう。

結論

MudBlazorしか勝たん！

理由
- ピュアOSSプロジェクトっぽい。なんか応援したくなる。
- 基本的なコンポーネントが揃っていて困らなさそう。
- シンプルなデザインなのでどのような用途のアプリにも合わせやすそう。業務アプリでも違和感無いと思う。
- Blazorネイティブでコード記述量が圧倒的に少ない（これが将来足かせになるようならその時考えます……）。
- どうやってるのかさっぱりわからないが、99.3%のコードがC#とHTMLとSCSSで占められている。JSよくわからん勢としてこれは推せる。
- 商用でも無償利用可能。

さて、では実際に浸かっていきましょうかね……（ｽﾞﾌﾞｽﾞﾌﾞ）。

追記

Chart機能を追加する

MudBlazorはChart機能が弱いために追加のライブラリで補う、という方法をこの記事を書き上げた後に拝見しました。

BlazorでApexChartsを使ってみる

ApexChartsの使い方については上記の記事を参照してください。
ここでは、具体的な利用法については触れずプロジェクトの周辺情報についてまとめておくことにします。私のように業務で利用したい場合、技術的な情報以外について知りたい（そして大抵の場合自分で調べるのはめんどくさい）、ということがあると思いますので……。

あまりJSについて詳しくないのですが、ChartJSというライブラリがJSでChartを描画する用途では人気のようです。Blazor向けの移植版としてChartJs.Blazorというリポジトリがあるのですが、メインコミッタの失踪により継続困難に陥ってしまったらしく開発が停止してしまっています。本家のChartJSは現在4.3.0までバージョンが進んでいますが、ChartJs.Blazorは2021年で更新が止まってしまっています。

上記の記事中で使用されているBlazor-ApexChartsは0.9.20-betaとBeta版ながら現在も活発に更新が続けられているので使うならこちらというのは妥当な判断だと思います。

ApexChartsの本家はピュアOSSなプロジェクトのようで、以下の通り明記されています。

ApexCharts.js is an open source project licensed under MIT and is free to use in commercial applications.
https://apexcharts.com/about-us/

Blazor-ApexChartsも同じポリシーで運用されているようです。

他にChart用コンポーネントライブラリが見つかったら追記しようと思いますが、一旦私もMudBlazor + Blazor-ApexChartsの組み合わせで何か作ってみようと思います。

ライブラリ比較表

Awesome Blazorを見ていたら、比較表がありました。見落としていた。

Feature comparison for component bundles

ただ、作成途中で昨年12月から放置されている様子。デモサイトへのリンクが一覧化されているのは便利かもしれない。できれば比較表にcommercial useについての項目があると企業での利用が捗るのになと思ってしまいました。気力があったらPR出そうかな。

Chartについて

ChartのライブラリについてもAwesome Blazorに項目がありました。

Charts

ChartJS.BlazorやBlazor-ApexChartsについても掲載されていますが、GG.NetとPlotly.Blazorというライブラリが面白そうです。

GG.Net

ggplot2というRで人気のあるパッケージに「インスピレーションを受け」て作られたそうで、統計やデータサイエンス用途を指向しているようです。公式サイトのExamplesには統計分野でお目にかかるけれども一般ではあまり使わないようなChartがいくつかあり、ピンポイントで特定のChartが必要な場合は選択肢になりそうです。F#での利用を想定してか、サンプルソースコードもC#とF#両方掲載されているのも萌えポイント高いです。

2023年5月現在、丸1年更新が無いのが気になります。リポジトリオーナーのPablo Belinさんの個人プロジェクトのようで、そういった点をリスクと考える場合は採用が難しいかもしれません。

Plotly.Blazor

https://github.com/LayTec-AG/Plotly.Blazor

plotly.jsというライブラリのBlazorへの移植版のようです。リポジトリの使用言語は98.9%がC#なので、本家のJSを呼び出して使っている感じでしょうか。

LiveDemoサイトで一通りの機能の確認ができます。面白いのが3DのSurfaceを描画できることで、これまで3Dのグラフはお目にかからなかったのでこのライブラリの特異な点だなと思いました。

リポジトリのオーナー名からもわかる通りドイツにあるLayTecという会社が運営しているプロジェクトのようです。LEDやレーザーによる光学計測技術を専門とするいわゆる計測屋さんのようで、なるほどそれでこのようなライブラリへのニーズがあるのか、と納得させられました。異業界からOSSへの貢献があるのってなんか良いですね。