【React】デザインライブラリを用途別に比較してみる
こんにちは、フリーランスエンジニアの太田雅昭です。
Reactのデザイン周り
Reactには色々なライブラリがあります。その中で下記をピックアップしました。
- MUI
- CSS Module
- Tailwind
この他にもPandaCSSも検討してみたのですが、どうもCSS Moduleがあれば特に手を出す必要はないかなと。
MUI
MUIはマテリアルデザインを簡単に構築できます。テーマ管理も素晴らしく、サイト全体で一貫したデザインを作成できます。ただほとんどがすでにあるデザインを使用することになるので、他サイトとの差別化は難しいです。また細かい設定も面倒になりがちです。具体的には、要素のクラス名 .MUI_xxxみたいなのをいちいち確認して書いたりしないといけなかったりします。
CSS Module
全体のデザインも可能で、部分的な設計も柔軟です。ファイルを分割して、関心の分離も簡単に行えます。がっつりデザインする場合はかなり有力です。
Tailwind
Tailwindはクラス名でスタイルを指定します。慣れれば素早くサイト構築が行えるかと思います。ただクラス名がとても見にくく、後からメンテナンスするのはかなりしんどそうです。コンポーネントベースで設計すれば、ある程度のメンテナンス性を持つことは可能でしょうが、そうするとわざわざTailwindを使う必要はあるのか？という話になってくるかと。
用途別に考える
下記、用途別にそれぞれを考えてみました。
- 楽にデザイン => MUI
- 細かいデザイン => CSS Module
- 素早いデザイン => Tailwind
ただ、Tailwindはデザイン変更が辛くなりそうな気がしてならないので、個人的にはMUIかCSS Moduleかの２択になりそうです。
