Reactの開発現場でよく使われるCSSライブラリ

Reactの開発現場でよく使われる、CSSライブラリを紹介します。

「CSS何使えば良いの？」とご質問いただくことが結構あるので、

メジャーどころのライブラリの特徴と、React初学者へのおすすめを紹介します。

結論

「おすすめはTailwind CSS。素のCSSに慣れている人ならcss-modulesもあり」
です。

以下、メジャーどころ4つと、それぞれの特徴です。

css-modules

一般的なCSSやSassの記法をそのまま使えるので、
Web制作に慣れている人には、とっつきやすい技術かなと思います。

書き方例：

// Button.module.css

.button {
  background-color: #3b82f6; /* Tailwindのbg-blue-500に相当 */
  color: white; /* Tailwindのtext-white */
  padding: 0.5rem 1rem; /* Tailwindのpx-4 py-2 */
  border-radius: 0.375rem; /* Tailwindのrounded */
  transition: background-color 0.2s ease-in-out; /* ホバー時のスムーズな変更 */
}

.button:hover {
  background-color: #2563eb; /* Tailwindのhover:bg-blue-600 */
}

// Button.jsx

import styles from './Button.module.css';

export const Button = () => {
  return (
    <button className={styles.button}>
      ボタン
    </button>
  );
}

普通にCSSを使うと、
クラス名が他の場所で使っているものと被ってしまうことがありますが、
css-modulesでは、上記のようにButton.module.cssという拡張子になります。
これにより、ビルド時にランダム文字列の入ったユニークなクラス名を付与してくれるようになり、
コンポーネントの外ではクラス名が被ることがなくなります。

なので通常のCSSのような、
厳密なCSS設計や命名規則が不要になるメリットがあります。

Tailwind CSS

HTMLのclassに直接スタイルを書き込む形で、記述できるライブラリです。

HTMLとCSSを別ファイルで作成しなくてよくなるので、
コーディングが早く、かつ楽になります。

書き方例:

// Button.jsx

export const Button = () => {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      ボタン
    </button>
  );
}

• bg-blue-500: 背景色を青（濃さ500）に設定

• text-white: 文字色を白に設定

• px-4: 左右のパディング（1rem）を指定

• py-2: 上下のパディング（0.5rem）を指定

• rounded: 角を丸くする

• hover:bg-blue-600: ホバー時に背景色を少し濃いブルーに変更

上記の記述をするだけで、スタイルの当たったボタンタグを表示できます。
なので、CSSファイルを用意する必要がなくなり、
ファイル間の行き来もなくなるので、コーディングが早くできます。

上記のように、1つのクラス名で1つのスタイルだけを指定する方式を
「ユーティリティークラス」といいます。

CSS設計の概念があるWeb制作では、この記述はご法度とされることが多いですが、
ReactやVueといったコンポーネント指向の技術との相性がとても良く、
最近は採用率No.1のCSSライブラリだと思います。

styled-components

CSSをJSの関数として書ける、「CSS-in-JS」方式のライブラリです。

「CSS-in-JS」方式のCSSライブラリは他にもたくさんあるのですが、
styled-componentsが最もメジャーかと思います。

書き方例：

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3b82f6; /* Tailwindのblue-500相当 */
  color: white; /* 文字色を白 */
  padding: 0.5rem 1rem;  /* px-4 (左右), py-2 (上下) */
  border-radius: 0.375rem; /* rounded */
  transition: background-color 0.2s;

  &:hover {
    background-color: #2563eb; /* Tailwindのblue-600相当 */
  }
`;


const App = () => (
  <Button>
    ボタン
  </Button>
);

”スタイルを内包したコンポーネントを定義できる”
みたいなイメージで書けます。

なので、動的にスタイルを出し分ける際もJSの式で書けます。
また、スタイル部分とDOM構造の部分が分離するので、読みやすさも増します。（特にコードが大型化するほどメリットが出てくる）
Tailwind慣れてる人からすると「回りくどい書き方だな」と思ってしまいますが、
こっちの方が安全性（エンジニア界隈では堅牢性ともいう）は高く、
中〜大規模プロダクトで結構使われているイメージです。

vanilla-extract

TSファイルでCSSを書くスタイルで、書き方はstyled-componentsに近いのですが、
styled-componentsのデメリットを払拭した特徴があります。
styled-componentsの動作方式として、ビルド時ではCSSファイルは生成されず、
ブラウザで画面読み込み時に、JSでCSSコードを生成するような動作をします。

なので、サイトの規模が大きいほどJSの実行量が増え、
ブラウザに負担をかける問題がありました。（バンドルサイズの肥大問題）

vanilla-extractはこの問題を払拭していて、
サイトのビルド時点でCSSファイルが生成され、
ブラウザでの実行時は、JSを動かす必要がなく、軽量に動作できるメリットがあります。
（この動作方式をゼロランタイムと言い、ちなみにTailwindやcss-modulesもゼロランタイムです）
styled-componentsのデメリットを打ち消したような位置付けで、
かつTSを使って型安全にCSSを書けるメリットもあります。
（CSSって間違っててもエラーが出ない難点がありますが、そこが解決されている）

最近結構流行ってます。

書き方例：

// Button.css.ts

import { style } from '@vanilla-extract/css';

export const button = style({
  backgroundColor: '#3b82f6', // Tailwindのbg-blue-500に相当
  color: '#fff', // Tailwindのtext-white
  padding: '0.5rem 1rem', // Tailwindのpx-4 py-2
  borderRadius: '0.375rem', // Tailwindのrounded
  transition: 'background-color 0.2s ease-in-out', // ホバー時のスムーズな変更
  selectors: {
    '&:hover': {
      backgroundColor: '#2563eb', // Tailwindのhover:bg-blue-600
    },
  },
});

// Button.tsx

import { button } from './Button.css';

export const Button: React.FC = () => {
  return (
    <button className={button}>
      ボタン
    </button>
  );
}

.css.tsというよくわからない拡張子を用いるのも特徴的です。

どれがおすすめか

個人的には、Tailwindが最もおすすめです。

理由はやはり、一番早く楽に書けるからです。
上記の例文はどれも同じUIを実装していますが、
Tailwindの記述量が圧倒的に少ないと思います。

初学の最需要命題は「オリアプを最速で完成させる」ですので、
一番マッチした技術だと思います。

ただし、Tailwindにもデメリットはあります。

• タグ内にスタイル記述が増えるとコードの可読性が落ちる（レビューしにくい）

• 慣れすぎると、素のCSSの書き方を忘れる（Tailwind以外の案件に入ると大変だったり）

• 独自の書き方をするので、CSSを書ける人でも多少学習コストがかかる

なので、これまでWeb制作をやってきた方など、既に素のCSSに慣れている場合であれば、
css-modulesを選ぶのもありだと思います。
（こうすけさんなんかは、css-modulesでオリアプも作り切りましたね。）

Next.js v13まではcss-modulesが標準装備でしたが、v14以降ではTailwindが推奨(っぽく)なっています。

styled-componentsやvanilla-extractは、初学段階では難しすぎると思うので、おすすめしません。（先述しましたが大規模開発向き）

選択の際の注意点

１プロジェクト内で、2つ以上のCSSライブラリを併用することは基本しないです。
例えば、Tailwindとcss-modules両方使うことはしません。

使おうと思えば両方入れられますが、
どのスタイルがどこからきているのか分かりにくく、
メンテが大変になってしまいます。

プロジェクト立ち上げ時に、
プロダクトの要件や、参加メンバーのスキルに合わせて
1つのライブラリを選定するのが一般的です。