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

## これはなに？

[Awesome Blazor](https://github.com/AdrienTorris/awesome-blazor#libraries--extensions)に掲載されているコンポーネントから有力そうなものをピックアップし、特徴を調べてまとめたものです。「これからBlazorやるか～」「UIコンポーネントライブラリ何使おうかな？」と思ったときに参考になると思います。

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

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

## 事の発端

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

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

* FAST
    * GitHub☆:8.3k
    * https://github.com/microsoft/fast
    * MSが開発しているWEB UIフレームワーク。3大WEBフレームワークにも対応しておりBlazor専用というわけではない。スターの数の多さは主にBlazor以外の利用者によるものと思われる。[色覚特性少数者への配慮](https://www.infoq.com/jp/news/2020/08/microsoft-fast-design-system/)などのデザイン哲学は共感できる。
    * [Blazor 向けの公式ガイド](https://www.fast.design/docs/integrations/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](https://github.com/masastack/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の標準デザイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/6ad5079d-945f-1727-5b7f-a72511e4b9f4.png)

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

### Microsoft Fluent UI Blazor components

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/69f499bd-7c19-6990-70e3-2799f8863f2e.png)

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

### Ant Design Blazor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/9b603fa5-066f-1365-3696-78770e2cdc92.png)

そこまで中華テック企業っぽいデザインというわけでもなく使いやすい印象。
デモが豪華。[Boilerplateをdotnetコマンドでインストールする](https://github.com/ant-design-blazor/ant-design-blazor)とすぐ動かせる。

```
$ dotnet new antdesign -o MyAntDesignApp -f
```

基本的なUIコンポーネントが揃っているだけでなく折れ線グラフなどチャートも書けるので非常に便利。
[ドキュメント](https://antblazor.com/en-US/docs/introduce)にチャートのデモあり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/b32d6111-c8e4-5ba4-1efc-50b90be43747.png)

### MudBlazor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/f6070a76-271d-4877-5c59-48568c9eea2a.png)

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

### Radzen Blazor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/42191f5d-a585-a95d-0b61-b81ecb98e85b.png)

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

### MudBlazor vs Radzen Blazor

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/4a8ef008-56b9-fe31-55a2-9e51f2495703.png "MudBlazorのBar Chartサンプルのソースコード")

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/fbd69ccb-0867-1024-d571-fe2e8ad9f6cb.png)

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

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

### MASA Blazor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/788e2d6f-fd23-532f-a167-991b6e0a3dd2.png)

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

### Blazorise + Bootstrap 5

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/73f88d52-bdd0-8428-841e-973c76e58d7e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/880f5bbb-6f5d-9de5-4f1f-e58386f9d26e.png)

## 結論

MudBlazorしか勝たん！

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

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

## 追記

### Chart機能を追加する

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

* [BlazorでApexChartsを使ってみる](https://qiita.com/HAGITAKO/items/02c6d2e38aa817e90d64)

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

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

上記の記事中で使用されている[Blazor-ApexCharts](https://github.com/apexcharts/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](https://github.com/AdrienTorris/awesome-blazor/blob/master/Component-Bundle-Comparison.md)

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

### Chartについて

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

* [Charts](https://github.com/AdrienTorris/awesome-blazor#charts)

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

#### GG.Net

* https://github.com/pablofrommars/GGNet
* https://pablofrommars.github.io/

ggplot2というRで人気のあるパッケージに「インスピレーションを受け」て作られたそうで、統計やデータサイエンス用途を指向しているようです。[公式サイトのExamples](https://pablofrommars.github.io/)には統計分野でお目にかかるけれども一般ではあまり使わないような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サイト](https://delightful-pebble-00ab3ee10.1.azurestaticapps.net/)で一通りの機能の確認ができます。面白いのが3DのSurfaceを描画できることで、これまで3Dのグラフはお目にかからなかったのでこのライブラリの特異な点だなと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/5442217d-1a83-0bea-eabc-85bdd9e42927.png)

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

#### Chartについてまとめ

基本的に描画はBlazor WebAssemblyの方でやることになると思うので、あまり依存関係を増やしてクライアントアプリを重くするのも良くないですが、足りない機能は足していけそうなのでその点は安心かなと思いました。

### 有償ライブラリ

Awesome Blazorに掲載されていなかったので最初気づかなかったのですが、Blazor向けの有償ライブラリも存在します。

というかBlazor公式にばっちり書いてありますね。

* https://dotnet.microsoft.com/ja-jp/apps/aspnet/web-apps/blazor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/c696aea6-f65f-e9d1-993d-198d2f033a0c.png)

どうやらここに書いてあるものは全部有償ライブラリのようです。Radzenの名前もあります。CMでしょうか？

#### Ignite UI for Blazor

Infragisticsが提供するUIデザインコンポーネント。

* https://jp.infragistics.com/products/ignite-ui-blazor
* https://jp.infragistics.com/products/ignite-ui-blazor/blazor/components/general-nuget-feed
* https://www.nuget.org/packages?q=IgniteUI.Blazor
* https://www.nuget.org/packages/IgniteUI.Blazor.Trial
* https://qiita.com/yoshi1220/items/dad047714da9885b6167

Trial版は公開NuGetサーバに存在するのですが、有償版はInfragisticsのプライベートNuGetフィードにアクセスしなければならず、そのアクセス権を有償販売しているのだと思います。

* https://jp.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-navigation

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/081935c0-a1cd-934b-d385-b6dbf14f5747.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/b9944fba-c477-1b93-6fdd-76e66a731072.png)

さすが有償だけあって機能は充実しているようです。OSSだけでは業務要件が満たせない場合、仕事で使う分には良さそうです。

……なんだか重く感じたのは気のせいかな？

#### Telerik UI for Blazor

ニンジャ！？　ニンジャナンデ！？　アイエエエ……。
急性NRSから抜けた冷静な目で見てもニンジャがアイコンになっているのは気になってしまうのですが、Blazor公式のリスト筆頭に載っているだけあって機能は豊富そうです。

* https://www.telerik.com/blazor-ui

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/d3405ccd-a7c1-5e89-a0f9-1d34c9267189.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/6c29014e-2e63-a215-f164-77eca67b05c8.png)

#### DevExpress

これも有名どころのUIコンポーネントのようです。Blazor以外のJS環境に対してもUIコンポーネントを提供しているようです。

* https://www.devexpress.com/blazor/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/b6db90ea-382f-5872-4cf8-63df85afc79f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/c20b717c-29fe-5744-f495-25c4dad1a366.png)

なんだか見た目がカッチリしているというか、カタい印象を受けます。ニンジャも実在しない。いいね？

#### Syncfusion

* https://www.syncfusion.com/blazor-components

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/0bca76be-e2b5-2af0-b3cd-8ff65aa12dbf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/c05713bf-0de6-b6be-78d9-c12a59833d43.png)

小奇麗な感じがしていいですね。

#### GrapeCity

UIコンポーネントは他にUWPやWPF向けのものも提供しているようで、他のWEB系のUIコンポーネントとは出自の違いを感じました。……なんていうか、少し、垢ぬけていない感じがしてモダンな印象は無い……ような……。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46637/45682f1b-8f70-eaf5-baef-fc9e9dcdf893.png)

#### jQWidgets

[デモへのリンクが切れていた](https://www.htmlelements.com/blazor/demos/chart/overview/)り……動作がすごく遅かったり……なんだか不安になってしまうデモサイトでした……。大丈夫かな？　気のせいだといいんですけど……。

* https://www.htmlelements.com/blazor/