SvelteのUIフレームワークを調査する

以前「Svelteに入門する」という記事を公開しました。
その記事で、Svelteを使ったUIフレームワークを簡単に調べたことも触れましたが、３種類のフレームワークを実際に使ってみたところ、良し悪しが見えたのでお伝えしようと思います。
結論として、個人的見解ですが、この３ついずれも「これがあれば他のUIフレームワークは不要」というところまではいかず、他のライブラリで補完する必要があるかなということでした。

改めてSveltとは、React・Angular・Vue・などに並ぶWEBのフロント開発フレームワークのひとつに挙げられています。
特にVueの開発ルールに近いですが、さらに洗練されたイメージかと思います。

本題ですが、今回実際に試したSvelteのUIフレームワークは以下です。

• Svelte Material UI


• Carbon Components Svelte


• SMELTE

他にも色々紹介されていますが、Gitスター数が多いこの３種類に絞りました。
評価項目や結果は個人的主観が入りまくりなので、全く違う感想を持たれる方も多いとは思いますが....
ではSvelteのUIフレームワークに興味がおありの方、以下レポートにお目通しいただければと。

【Svelte Material UI】

• 導入が容易：○


• テキスト入力フォームの外観の良さ：○


• テキスト入力フォームの前後に固定文字付加可能：×


• テキスト入力フォームなどにアイコン設置可能：○


• アイコンを自由に動的配置可能：○


• ボタンの外観の良さ：○


• コンボボックスのイベント伝播問題なし：×


• トースト表示の外観の良さ：×


• アプリバーの機能：△


• デプロイファイル容量が小さい：×


• ビルド時に無用なログは出ない：×


• 初めからPurgeCSSを加味した設計：×


• 公式WEBサイトのリファレンスがよい：×

今回試したフレームワークの中では最もGitスター数が多かっただけに、見た目はおおよそ美しく、カバーする機能もそこそこ広い感じです。
ですが、もうあとちょっと、ここだけ対応していただければ申し分なし！という点がありました。
例えば、なぜかコンボボックス（SELECTコンポーネント）でchangeイベント（選択肢を変更したら何か処理させる）がSvelteの機能に従って親コンポーネントに伝わらない問題があり、回避できませんでした。これはちょっと痛い....
また、トーストというメッセージを最前面に出すコンポーネントがあるのですが、これのスタイルを容易にカスタマイズできないようでした。よくあるのは、メッセージのレベル（success, info, warning, errorなど）に応じて色を変更できる機能がありますが、そもそも標準からのスタイル変更がうまくいきませんでした。
さらに、最終的にWEBサーバに保存するデプロイファイルのサイズは、他の２つに比べると大きくなりがちでした。
一応PurgeCSSという、使わないCSSのコードを自動で削除してくれるライブラリを利用してみましたが、イレギュラー？な設定をしないと必要なCSSも削除されてしまう難点もあり。
テキスト入力フォーム（テキストボックス）の前や後ろに固定文字を入れることもできなそうです。例えば、100kgを入力するときに100の入力直後に自然にkgが入っているように見せる仕掛けがよく他のライブラリでもありますが、それが標準機能ではできなそうというのもありました。
上記でできないことが、本当はこうしたらできるというのもあるかもですが、公式サイトやGoogle検索で結構調べても対応できなかったので、リファレンスももうひとつ....ということになるのかなと思います。

【Carbon Component】

• 導入が容易：○


• テキスト入力フォームの外観の良さ：△


• テキスト入力フォームの前後に固定文字付加可能：×


• テキスト入力フォームなどにアイコン設置可能：×


• アイコンを自由に動的配置可能：×


• ボタンの外観の良さ：×


• コンボボックスのイベント伝播問題なし：○


• トースト表示の外観の良さ：×


• アプリバーの機能：○


• デプロイファイル容量が小さい：○


• ビルド時に無用なログは出ない：○


• 初めからPurgeCSSを加味した設計：○


• 公式WEBサイトのリファレンスがよい：○

こちらは「Svelte Material UI」とは真逆のイメージで、バックの機能は非常に抜け目がないのですが、外観は自由度が低い印象でした。
それでも、その標準的な外観が好きな方は、このフレームワークは３つの中でベストかもしれません。
IBMが提供しているオープンソースの「Carbon Design System」シリーズのSvelte版という位置づけですが、その外観はしっかり研究して設計されていて、IBMとしてはこれがベスト！このルールに従えば操作にストレスないアプリが作れますよ、という指針が出されています。
ですが、私の美的感覚は....ちょっとそれには合わないようでした....
皆さんはどうでしょうか。公式サイトのサンプルも見てみてください。

【SMELTE】

• 導入が容易：△


• テキスト入力フォームの外観の良さ：○


• テキスト入力フォームの前後に固定文字付加可能：×


• テキスト入力フォームなどにアイコン設置可能：○


• アイコンを自由に動的配置可能：（調査不足）


• ボタンの外観の良さ：○


• コンボボックスのイベント伝播問題なし：○


• トースト表示の外観の良さ：○


• アプリバーの機能：×


• デプロイファイル容量が小さい：○


• ビルド時に無用なログは出ない：（調査不足）


• 初めからPurgeCSSを加味した設計：○


• 公式WEBサイトのリファレンスがよい：○

最後はSMELTEです。
実はこちらは検証が不十分なところはあるのですが、多分上２つの中間くらいのイメージです。
TailwindCSSという、保守性の高いスタイルをHTMLに適用できるCSSフレームワークをベースとしており、少し導入のための設定が手間ではありますが、最初に設定してしまえば問題ないです。
見た目は概ね良好ですが、Svelte Material UIに比べると少しシンプルな方向です。機能やコンポーネントの種類は他の２つに比べるとやや少ない気がします。
TailwindCSSがPurgeCSSをサポートしており、最初から不要なCSSを削除できる点はいいですね。
ぱっと感じる最大の難点は、アプリバーがコンポーネントとして提供されていない点でした。
ここでいうアプリバーとは、上部ヘッダーにロゴ・タイトル・ハンバーガーメニューがあり、パソコンなど大画面で閲覧するときとスマホなど小さい画面で表示する場合に自動的に幅やメニュー表示を調整してくれる部品です。
スタイルやJavaScriptをがりがり書かなくても設定だけでうまく調整してくれて非常に便利なのですが、SMELTEではこれがないように思われ、自作するか、アプリバー専用のライブラリだけ追加でインポートする必要がありそうです。
これは結構大きい差と思いますね。他の２つにはアプリバー部品が用意されています。


ということでレポートは以上でした。
いずれも一長一短ありますが、これらをオープンソースで公開されていて自由に使わせていただけることは改めてありがたいことです。
リスペクトしつつ、今後もSvelteのUIフレームワークには注目していきたいと思います。

ちなみにこんなのも気になりだし始めました。
Framework7 Svelte
また機会がありましたらレポートしてみます。
（酒）

シンプル入退室管理
　　限りなくシンプルなタイムカードシステム

WhitePlug
　　手のひらサイズのLinuxサーバ

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

moni-stock
　　一括スキャンで入出庫・棚卸作業にかかる時間を短縮
　　お客様も現場も笑顔にする在庫管理システム

Smart mat
　　重さセンサIoTで在庫管理に革新を。
　　自動発注＆メールアラートで欠品・発注ミスを防ぎます

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(moniシリーズ)、それに農業も手がけるIT企業