Tailwind CSS ベースの UI フレームワークという選択肢
この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。 その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験している方も多いのではないでしょうか？
この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。
その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験しているほうも多いのではないでしょうか？例えば、特定の箇所のスタイルを修正するためにコンポーネントの細部を確認して詳細ないセレクターを使用したり、気づけば !imporant が数多く使用されている状況は共感を得られるかと思います。
大抵のプロジェクトにおいてはデザインカンプに従う必要があるため、UI フレームワークのスタイルをそのまま適用できることはほとんどないため、工数を削減するために導入したにもかからわずかえって多くの時間を費やすような状況に陥ってします可能性があります。
UI フレームワークに強く依存してしまうことに抵抗を示す人もいるでしょう。最初に UI フレームワークを使用することを決めたらそれを引き剥がすことはなかなか難しい作業です。実際に Vuetify に強く依存している結果なかなか Vue 3.x にアップデートできないというプロジェクトもよく見かけます。
実際に、The State of Frontend 2022 によれば UI フレームワークを全く使用しない選択も多く取られているようです。
UI フレームワークと結婚をしたくないとはいえ、一から UI パーツを構築するのはなかなか骨の折れる作業です。特にアクセシビリティに関連も考慮に入れると Web 仕様に対する深い理解が必要ななるため非常に困難です。特に、モーダル、ドロップダウン、ツールチップなどのよく使われる UI パーツについては Web 標準も存在しないので特に顕著でしょう。
そこでおすすめなのは、Tailwind CSS ペースの UI フレームワークを使用するという選択肢です。例として以下のようなものがあげられます。
Tailwind CSS ペース UI フレームワークの特徴
Tailwind CSS ペースの UI フレームワークは冒頭にあげた課題を解決する選択肢であると個人的に思えます。はじめに、Tailwind CSS がもともとユーティリティファーストこコンセプトであるため、細かなスタイルの拡張は全く苦ではありません。
特に、Headless UI は UI コンポーネントの機能のみを提供しているという特徴を持っており、デフォルトではスタイルが一切付与されておりません。
UI フレームワークに強く依存しないという点も評価できます。提供される機能自体も控えめにされており、特に daisyUI は全く JavaScript を使用しないで作成されています。そのため、Headlres UI と daisyUI どちらも React や Vue など特定のフレームワークに依存せずに使用できます。（Tailwind CSS に依存しているという見方はできますが。..）
機能が控えめということで、バンドルサイズを削減できるという点も評価できるでしょう。
Headless UI はスタイルは自身で実装する必要があるものの、タブ・ダイアログ・スイッチのようなよく使う UI パーツをアクセシブルなコンポーネントとして提供してくれるので、1 から UI コンポーネントを構築することに比較して工数を削減できるかと思います。
daisyUI は Bootstrap のようにクラスを付与して UI パーツを提供する方式なのでスタイリングの手間は削減できますが、アクセシブルな実装は自身で行う必要があるでしょう。
終わりに
高機能な UI フレームワークの課題点と Tailwind CSS ベースのフレームワークの利点を述べてきました。内容としてはだいぶ Tailwind CSS を持ち上げていましたが、もちろん高機能な UI フレームワークにも利点はあります。初期の立ち上げのスピードでいえば、ほとんどカスタマイズなしで実装できる点で勝っているとも言えますし、Tailwind CSS 自身はほぼユーティリティクラスしか提供していないので CSS 自体にあまり精通していないのであればスタイリングで苦戦する可能性もあります。
私の意見としては、記事の内容であげているとおりにスタイルの調整のしやすさや、依存性の低さから Tailwind CSS 側に利点があるように思えます。ここで紹介した以外にも Tailwind CSS ベースの UI フレームワークは数多くあるので調べてみるとよいでしょう。
