自分の場合、Blazor で SPA を開発するにあたり、外観は Material Design で作りたいなー、ということがよくあります。
(もともと Angular による SPA 開発において、UI コンポーネントライブラリに Angular Material を主に使ってきた経緯もあって。)
ということで、Blazor 向けの UI コンポーネントライブラリとして流通しているもののうち、Material Design なヤツ、さらにその中でもとくに無償利用可能なものを探してみました。
探し方は簡単。
"Awesome Blazor Browser" サイトを開いて、"Material" で検索すれば、Material Design な UI コンポーネントライブラリがいくつか見つかります。
以下、自分がそうやって見つけて評価してみたライブラリ x 6 つを紹介してみます。
MatBlazor
Blazor 用の Material Design な UI コンポーネントライブラリとしては割と早期からリリースされているライブラリかと思います。
GitHub の Star 数もダントツです。
Demo サイトを見ると、コンポーネントの種類は豊富で、Chip や Snack Bar なども網羅されていて、なかなかよさげです。
ただし、実行時の動的なバインディングの設計・実装に難があるように見えます。
例えば MatBlazor のスライダコンポーネントの使用時、同コンポーネントの範囲指定 (最大値・最小値) にバインドしている変数値を動的に変更しても、スライダコンポーネントに反映されない (初回のレンダリング時のみ参照されているっぽい)、といったことが、スライダに限らず他のコンポーネントでもありました。
このようなケースでは、MatBlazor のコンポーネントは使わずに、素の HTML input type=range をそのまま使うことで諦めました。
また全体的に、ユーザー操作に対して数十ミリ秒遅れるというか、微妙に動作が重い印象がありました。
さらに個人的には、全体的に既定のフォントのサイズや、コンポーネントを構成するパディングやマージン、各種アニメーション効果の速度など、見た目と動作のフィーリングが、なんかしっくりきていません。
もっとも 2020年の 8月の評価時点なので、上記いずれの点も最新版では改善されているかもしれません。
Skclusive-UI
個人的には、見た目と動作のフィーリング的にはイチオシのライブラリです。
ユーザー操作に対する反応速度も悪くありません。
ボタンをクリックしたときのリップル効果も、他のライブラリと比べていちばん良い感じに見えます。
ダッシュボードの Demo サイトもあるのですが、かなりかっこよく見えます。
ただ、如何せん、自分のプロダクトで採用するには、コンポーネントの種類が少なすぎました。
例えば日付ピッカーすら、Skclusive-UI には用意されていないようです。
個人的には強く採用したかったところですが、上記のとおり自分のプロダクトで必要なコンポーネントが網羅されて折らず、泣く泣く採用を見送りました。
MudBlazor
割と最近、頭角を現し始めたライブラリです。
後述の 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
MudBlazor よりは少し先に登場していたらしいライブラリです。
JavaScript による実装部分を極力最小限とするよう努めている MudBlazor と違い、Material.Blazor は Google の "Material Components for the web" JavaScript ライブラリを実装の中心に据えて、Blazor の JavaScript 相互運用を介して動作するもののようです。
ただ、ドキュメントサイトがどうにも読みにくく、たったそれだけの理由なのですが、MudBlazor にそこそこ満足できてたこともあって、Material.Blazor はそれ以上評価・試用していません。😅
ごめんなさい、Material.Blazor。
先に書いたとおり、登場は MudBlazor より先だったのですが、GitHub 上の Star 数も、気がついたら MudBlazor に追い抜かれてしまっていました...。
Blazorise
Material Design に限らず、 Bootstrap や Bulma、AntDesign にも対応する、スキン切り替えで見た目を色々差し替え可能な UI コンポーネントライブラリのようです。
ですが、Material Design 版の Demo サイトを見るとわかりますが、これは Material Design とは自分は言えないですw
Material Design の定義" というのは自分、ちゃんとはわかってないんですけど、とにかく、まぁ、ここは私基準の判定ということで。
選外!
BlazorStrap
名前がどう見ても Bootstrap なんですが、Awesome Blazor の記載には "Material Design components" とあるので見てみたのですが...
うーん、これはやっぱり Bootstrap であって、Material Design じゃないんじゃないかなww
選外!
まとめ
以上、あくまでも個人的な観測範囲と僅かばかりの使用・試用経験に基づく、心許ない評価ではありますが、これから Blazor での SPA 開発で Material Design な UI コンポーネントライブラリを使いたい人の参考になれば幸いです!
それと、本記事では、Blazorise や BlazorStrap は "選外" とは書きましたけれども、それは、(私基準で) Material Design っぽくない、という理由に過ぎません。
Bootstrap や Buluma 等の外観でいくなら、Blazorise や BlazorStrap などのほうがふさわしく有用であろうと思います。
あと、MudBlazor および Material.Blazor を知る直前の 2020年8月頃の話なのですが、その頃に Twitter に投稿した下記スレッドも参考になればと思い、貼っておきます。
Blazor は自分たちにとっては良いモノだが、しかし、Material Design な UI コンポーネントをタダ乗りしようとすると厳しい印象。目下、絶賛 MatBlazor を試用させてもらっているが、見た目と挙動の双方においてそのままの利用ができないことに度々遭遇。
— @jsakamoto (@jsakamoto) August 27, 2020
まぁ、ゴツイ使い方してるのもあるけど。
Learn, Practice, Share!