Blazor で使える Material Design なコンポーネント 6 選

自分の場合、Blazor で SPA を開発するにあたり、外観は Material Design で作りたいなー、ということがよくあります。
(もともと Angular による SPA 開発において、UI コンポーネントライブラリに Angular Material を主に使ってきた経緯もあって。)

ということで、Blazor 向けの UI コンポーネントライブラリとして流通しているもののうち、Material Design なヤツ、さらにその中でもとくに無償利用可能なものを探してみました。

探し方は簡単。
["Awesome Blazor Browser"](https://jsakamoto.github.io/awesome-blazor-browser/) サイトを開いて、"Material" で検索すれば、Material Design な UI コンポーネントライブラリがいくつか見つかります。

以下、自分がそうやって見つけて評価してみたライブラリ x 6 つを紹介してみます。

# [MatBlazor](https://www.matblazor.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/f57a4ca7-af0f-8c12-9241-79ed9bc78eef.png)
Blazor 用の Material Design な UI コンポーネントライブラリとしては割と早期からリリースされているライブラリかと思います。
GitHub の Star 数もダントツです。

[Demo サイト](https://www.matblazor.com/)を見ると、**コンポーネントの種類は豊富で、Chip や Snack Bar なども網羅**されていて、なかなかよさげです。

ただし、実行時の動的なバインディングの設計・実装に難があるように見えます。
例えば MatBlazor のスライダコンポーネントの使用時、同コンポーネントの範囲指定 (最大値・最小値) に**バインドしている変数値を動的に変更**しても、スライダコンポーネントに**反映されない (初回のレンダリング時のみ参照されているっぽい)**、といったことが、スライダに限らず他のコンポーネントでもありました。
このようなケースでは、MatBlazor のコンポーネントは使わずに、素の HTML input type=range をそのまま使うことで諦めました。

また全体的に、ユーザー操作に対して数十ミリ秒遅れるというか、**微妙に動作が重い印象**がありました。

さらに個人的には、全体的に既定のフォントのサイズや、コンポーネントを構成するパディングやマージン、各種アニメーション効果の速度など、見た目と動作のフィーリングが、なんかしっくりきていません。

もっとも 2020年の 8月の評価時点なので、上記いずれの点も最新版では改善されているかもしれません。

# [Skclusive-UI](https://skclusive.github.io/Skclusive.Material.Docs/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/5995d601-c6fc-937f-088c-6784992dfcc8.png)
個人的には、**見た目と動作のフィーリング的にはイチオシ**のライブラリです。

ユーザー操作に対する反応速度も悪くありません。
ボタンをクリックしたときのリップル効果も、他のライブラリと比べていちばん良い感じに見えます。
[ダッシュボードの Demo サイト](https://skclusive.github.io/Skclusive.Blazor.Samples/Dashboard/)もあるのですが、かなりかっこよく見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/75f702b7-9bb9-7f15-5ac6-1f8ced2e9221.png)
ただ、如何せん、自分のプロダクトで採用するには、**コンポーネントの種類が少なすぎ**ました。
例えば日付ピッカーすら、Skclusive-UI には用意されていないようです。

個人的には強く採用したかったところですが、上記のとおり自分のプロダクトで必要なコンポーネントが網羅されて折らず、泣く泣く採用を見送りました。

# [MudBlazor](https://mudblazor.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/1db432c1-8149-9df4-0c9e-dffaf69fe3dd.png)
割と最近、頭角を現し始めたライブラリです。
後述の Material.Blazor とあわせ、これらライブラリ登場前は MatBlazor ほぼ一択の時期があったのですが、そのような状況を打破してくれたプロダクトです。

まず**コンポーネントの種類**ですが、最初の MatBlazor と比べても**申し分ありません。**

**見た目と動作のフィーリングも良好**です。
ボタンクリック時のリップル効果は、個人的にはまだ Skclusive-UI のほうが好きですが、MudBlazor も悪くはありません。
日付ピッカーも MatBlazor のそれと比べると、ヘッダ付でオシャレだったりします。
ユーザー操作に対する反応速度も良い感じです。

また、**テーマカラーの定義・実装が、CSS 変数**で行なわれていました。
そのため、自分が実装する HTML 要素を、MudBlazor のコンポーネントと同じ配色にでき、これがけっこう助かりました。

あとこれは日本語オンリーなサイトだとあまり関係のない機能ではありますけれども、横書きを左から右へ書くような言語にも対応が進んでいるようです。実際のところ今は自分はそのような言語に縁はないのですけれども、ちょっと興味を引かれたのでここで触れておきます。

などなど、以上の特徴から、**自分は今は MudBlazor を使っての開発を進めています。**

ただし、MudBlazor が提供する、**ダイアログボックスを実装するフレームワーク**の仕様・設計は、個人的には**まったく気に入っていませんw。**
ダイアログへパラメータを渡すのに、**パラメータ名を文字列で指定する辞書で渡す**とか、**今どきありえない!** って思ってしまう口なので、自分。

この点に関しては、MudBlazor は GitHub 上で公開されているオープンソースなライブラリなので、何かフィードバックするか、最悪、自分でさらなるラッパーを作って自分好みにして使おうかなー、と考えています。

あともうひとつ、MudBlazor の好きになれないところとして、今のところ、**破壊的変更を含むリリースをラジカルに行なってくる**点です。
まぁ、発展途上のプロダクトは、何かしら破壊的変更は避けられないのはわからなくもないです。
しかしそうはいっても、MudBlazor は、**パッチバージョンが上がっただけ (例: v.1.1.2 → v.1.1.4) でも破壊的変更が入ってくる**のには閉口してしまいます。

そのうち落ち着くかもしれませんが、MudBlazor を使うなら気を付けておいたほうがよいかもしれません。

# [Material.Blazor](https://material-blazor.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/991c9504-3cd6-8eb3-23db-5c01ebb99e94.png)
MudBlazor よりは少し先に登場していたらしいライブラリです。

JavaScript による実装部分を極力最小限とするよう努めている MudBlazor と違い、Material.Blazor は Google の "Material Components for the web" JavaScript ライブラリを実装の中心に据えて、Blazor の JavaScript 相互運用を介して動作するもののようです。

ただ、**ドキュメントサイトがどうにも読みにくく**、たったそれだけの理由なのですが、MudBlazor にそこそこ満足できてたこともあって、Material.Blazor はそれ以上評価・試用していません。😅
ごめんなさい、Material.Blazor。

先に書いたとおり、登場は MudBlazor より先だったのですが、GitHub 上の Star 数も、気がついたら MudBlazor に追い抜かれてしまっていました...。

# [Blazorise](https://materialdemo.blazorise.com/)

Material Design に限らず、 Bootstrap や Bulma、AntDesign にも対応する、スキン切り替えで見た目を色々差し替え可能な UI コンポーネントライブラリのようです。

ですが、[Material Design 版の Demo サイト](https://materialdemo.blazorise.com/)を見るとわかりますが、**これは Material Design とは自分は言えない**ですw
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/76767530-44b5-5258-1b02-2434754bc12d.png)
Material Design の定義" というのは自分、ちゃんとはわかってないんですけど、とにかく、まぁ、ここは私基準の判定ということで。

選外!

# [BlazorStrap](https://blazorstrap.io/)

名前がどう見ても Bootstrap なんですが、Awesome Blazor の記載には "Material Design components" とあるので見てみたのですが...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/df6d1c06-0de5-ccff-1b03-dfd13ae19817.png)
うーん、**これはやっぱり Bootstrap** であって、Material Design じゃないんじゃないかなww

選外!

# まとめ

以上、あくまでも個人的な観測範囲と僅かばかりの使用・試用経験に基づく、心許ない評価ではありますが、これから Blazor での SPA 開発で Material Design な UI コンポーネントライブラリを使いたい人の参考になれば幸いです!

それと、本記事では、Blazorise や BlazorStrap は "選外" とは書きましたけれども、それは、(私基準で) Material Design っぽくない、という理由に過ぎません。
Bootstrap や Buluma 等の外観でいくなら、Blazorise や BlazorStrap などのほうがふさわしく有用であろうと思います。

あと、MudBlazor および Material.Blazor を知る直前の 2020年8月頃の話なのですが、その頃に Twitter に投稿した下記スレッドも参考になればと思い、貼っておきます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Blazor は自分たちにとっては良いモノだが、しかし、Material Design な UI コンポーネントをタダ乗りしようとすると厳しい印象。目下、絶賛 MatBlazor を試用させてもらっているが、見た目と挙動の双方においてそのままの利用ができないことに度々遭遇。<br>まぁ、ゴツイ使い方してるのもあるけど。</p>&mdash; @jsakamoto (@jsakamoto) <a href="https://twitter.com/jsakamoto/status/1298864797069357058?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

_Learn, Practice, Share!_