Reactでアプリを作るとき、CSS設計の選択は重要な判断です。主な選択肢は3つあります。CSS Modules、Tailwind CSS、CSS-in-JSです。それぞれに長所と短所があります。しかし、どれを選べばよいのか迷う方も多いでしょう。この記事では3つのアプローチを比較して、最適な選択基準を解説します。
CSS Modulesの特徴とReactでの使い方
CSS ModulesはスコープされたCSSを書く方法です。クラス名が自動的にユニークになります。そのため、グローバルな名前空間の衝突を防げます。つまり、従来のCSSの書き方を活かしつつ安全に使えるのです。
具体的には、.module.cssファイルを作成します。コンポーネントからインポートして使います。たとえば、styles.containerのようにアクセスします。また、composes機能でスタイルの継承もできます。さらに、Next.jsではデフォルトでサポートされています。
しかし、デメリットもあります。ファイル数が増える傾向があります。また、動的なスタイル変更はやや面倒です。なぜなら、CSSファイルとJSファイルを行き来する必要があるからです。それでも、チーム開発ではクリーンなコードを保ちやすいです。
Tailwind CSSの特徴とReactでの活用法
Tailwind CSSはユーティリティファーストのフレームワークです。HTMLやJSXに直接クラスを書きます。そのため、CSSファイルをほぼ書かなくて済みます。特に開発速度が大幅に向上するのが魅力です。
たとえば、className="p-4 bg-blue-500 text-white"のように書きます。プロトタイプの作成が非常に高速です。しかも、本番ビルドでは未使用クラスが自動削除されます。そのため、ファイルサイズも最適化されます。
ただし、JSXが長くなりがちです。クラス名の羅列で可読性が下がることがあります。さらに、デザインシステムとの統合には工夫が必要です。とはいえ、shadcn/uiのようなコンポーネントライブラリと組み合わせると強力です。
CSS-in-JSの特徴と現在の動向
CSS-in-JSはJavaScript内でCSSを書く手法です。代表的なライブラリにstyled-componentsやEmotionがあります。動的なスタイル変更が最も得意なアプローチです。なぜなら、Propsに基づいてスタイルを生成できるからです。
しかし、最近はCSS-in-JSの人気が下降傾向にあります。主な理由はパフォーマンスです。実行時にCSSを生成するため、レンダリングコストが発生します。特にサーバーサイドレンダリングとの相性に課題があります。実際、Next.jsの公式ドキュメントではCSS-in-JSの利用に注意喚起しています。
一方で、ゼロランタイムのCSS-in-JSも登場しています。たとえば、Panda CSSやVanilla Extractです。これらはビルド時にCSSを生成します。そのため、パフォーマンスの問題を解決しています。
ReactのCSS設計、プロジェクトに合った選び方
結局、どれを選ぶべきでしょうか。判断基準は3つあります。まず、チームのスキルと好みです。CSS経験者が多いならCSS Modulesが馴染みやすいです。また、開発速度を重視するならTailwindが適しています。さらに、動的スタイルが多い場合はCSS-in-JSを検討しましょう。
加えて、プロジェクトの規模も重要です。小規模ならTailwindの手軽さが活きます。大規模なら CSS Modulesの保守性が有利です。要するに、「正解」はプロジェクトの状況次第なのです。だからこそ、各アプローチの特性を理解した上で判断することが大切です。