【React】デザインライブラリを比較して見る

こんにちは、フリーランスエンジニアの太田雅昭です。

Reactのデザイン周り

Reactには色々なライブラリがあります。その中で下記をピックアップしました。整理しきれていないのはご容赦ください

• MUI
• CSS Module
• Tailwind
• vanilla extract
• Radix

MUI

MUIはマテリアルデザインを簡単に構築できます。テーマ管理も素晴らしく、サイト全体で一貫したデザインを作成できます。ただほとんどがすでにあるデザインを使用することになるので、他サイトとの差別化は難しいです。また細かい設定も面倒になりがちです。具体的には、要素のクラス名 .MUI_xxxみたいなのをいちいち確認して書いたりしないといけなかったりします。

CSS Module

全体のデザインも可能で、部分的な設計も柔軟です。ファイルを分割して、関心の分離も簡単に行えます。がっつりデザインする場合はかなり有力です。

Tailwind

Tailwindはクラス名でスタイルを指定します。慣れれば素早くサイト構築が行えるかと思います。ただクラス名がとても見にくく、後からメンテナンスするのはかなりしんどそうです。コンポーネントベースで設計すれば、ある程度のメンテナンス性を持つことは可能でしょうが、そうするとわざわざTailwindを使う必要はあるのか？という話になってくるかと。

Vanilla extract

Vanilla extractはtsベースでかなり型安全に使えます。

Radix UI

Radix UIはヘッドレスで、機能のみを提供するという位置付けのようです。Vanilla extractとの相性も良いそうです。

用途別に考える

下記、用途別にそれぞれを考えてみました。

• 楽にデザイン => MUI
• 細かいデザイン => CSS Module, Vanilla extract, Radix UI + Vanilla extract
• 素早いデザイン => Tailwind