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

投稿日: 2024年12月03日

Tips

要約

React開発にはTailwind CSSが最もおすすめで、特に初学者向けにコーディングのスピードが向上する。
css-modulesも使いやすく、従来のCSSに慣れた人にとって適している。
styled-componentsやvanilla-extractは大規模開発向けで、初学者には難しすぎるため推奨しない。

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>
  );
}