これまで、サイトのUIフレームワークに UIKit を使っていた。ただ、いまいち使い勝手が良くなかった...🤔

そんなことがあったのでこれを機に別のUIフレームワークに置き換えることにした。個人開発で Tailwind CSS と Flowbite の開発体験が良かったのでこの両者に置き換えることにした。

この記事では、使った率直な感想とかを載せていく。

移行前に利用していたUIフレームワーク

UIKit

シンプルなデザインのコンポーネントが提供されており、コンポーネントライブラリという感じが強い。初期デザインは、線が細く色の濃淡が比較的薄いので、レイアウトを設計できればおしゃれな感じになる。

良い点

シンプルなデザインのUIが出来上がる
サイトを素早く作る場合には使いやすい
UIKit用のアイコンが用意されているため
uk- クラスで命名されているためクラスの見分けがわかりやすい

気になった点

CSSは書かないといけない
- 細かいところは特に
- レスポンシブデザインを反映するなら特に必要
- （方法を探しきれていない可能性もあるが....）
SvelteのUIKitコンポーネントライブラリが古くメンテナンスされていない
思ったよりJSを書くことになる
DocumentにViteの導入方法がないので、初心者には優しくない

感想

シンプルなUIなので、配置を設計できれば綺麗な画面が出来上がる。が、失敗すると中身がないような画面に感じてしまう。Viteでの使い方が書いていないので、自分で考えて開発する必要がある。今なら誰かが作った時の資料が落ちているので導入はしやすいかもしれない🙌

結局自分でCSSを書いていたので、reset.cssだけ用意して自分でUIを作るでも良い気がした。

余談

最初知った時は、名前に Kit とついているので（Apple）っぽいデザインのUIになると思っていた。がそんなことはなかった。

移行後に利用したUIフレームワーク

Tailwind CSS

簡単にいうと、Utilityクラスを提供してくれるライブラリ。感覚的にはクラスでCSSを書いているような感じ。

良い点

大体の要素をカバーした汎用的に使えるUtilityクラスがある
資料が高いレベルで充実している
Darkmodeの対応が容易である
@applyを使えば自身で定義したクラスセレクタに対してTailwindのクラスを設定できる
Tailwindを使ったフレームワークが多い
IDE(Jetbrains)でTailwind用のプラグインがあり、エディタレベルのサポートが充実している
テーマ作成ツールのような第三者が作ったTailwindに適用できるWEBのツールがある
アイコンも用意されている

気になった点

HTML上のクラス属性が非常に長くなる
@applyを使うとバンドルサイズが増えるためパフォーマンスが低下する
Node.js Deno BunなどのJavascriptランタイムが必須となる
特殊なアニメーションのような特別な見た目を実装する場合は、別途CSSを書いたりする必要がある

感想

ドキュメントやIDEなどのツールが充実しているため開発体験は非常に良い！導入も難しいものでなくカスタマイズもあるファイルを修正するだけで利用できる。また利用率が高いだけあって便利なツールも開発されており、非常に使いやすかった。使う前まではBootstrapをイメージしていたが、Bootstrapからコンポーネントだけを抜き取りユーティリティクラスだけを残したのが正しい印象だった。個人的には、 em単位で使われている数値の組み分けがちょうど良いので、全ページでフォントサイズが違うみたいな問題が生じにくくなるので良いと思う。

HTML上でクラス属性が非常に長くなる問題があるが、ReactやVue、Svelteのコンポーネントに隠しておけば解決できる。また、 @apply はバンドルサイズが増えるのでどうしても使う必要がない限り使わない方が良いと感じる。

よく問題点として技術的負債が募りそうと言われているが、Tailwindで技術的負債が募るレベル感ならもっとごちゃごちゃしそうなCSSやScssでも起こりそうだなと感じる。対処したいのであれば、チームの共通認識を周知するなどの別のアプローチをする方が良い

Flowbite

Tailwind CSSを利用したCSSフレームワーク。類似フレームワークの紹介で一番上にくるので利用率が一番高いと思う。利用感覚はBootstrapに近い。

良い点

色んなライブラリで利用できるようにするパッケージがある
- 今回はSvelte用のライブラリを使用した
利用可能なコンポーネントが多い

気になった点

マテリアルデザインっぽい

感想

基本的にこの中のコンポーネントを利用すれば良いので頑張ってCSSを書くようなことがなかった。個人的にマテリアルデザインを好んでいないのでそれだけが気になった。🤔

終わりに

このサイトもデザイン的には修正しきれていないところがある。時間がかかってしまうが徐々に直していきたいと思う。

Blog

サイトのUIフレームワークをUIKitからFlowbiteに置き換えた

このブログについて