Reactのスタイル設計

― CSS Modulesとstyled-componentsの実践比較

はじめに

Reactアプリケーションの構築が進むにつれ、「スタイルをどう管理するか」という課題が顕在化してきます。

小規模なアプリであれば、1つのApp.cssにすべてのスタイルを書いても問題はありません。しかし、コンポーネントが増え、複数人で開発するようになると、クラス名の衝突やスタイルの肥大化が起きやすくなります。

Reactでは、こうした問題に対処するために**「CSS Modules」や「CSS-in-JS」**といったスタイル管理の手法が広く使われています。

今回はこの2つの代表的手法を比較し、それぞれの実装方法と特徴、どんな場面で使い分けるべきかを解説していきます。

従来のグローバルCSSの課題

Reactでは通常、App.cssのようなグローバルCSSをインポートして使うことができますが、この方法には以下のようなデメリットがあります：

  • クラス名の重複でスタイルが意図せず上書きされる
  • どのコンポーネントがどのスタイルを使っているか不明瞭
  • スタイルの変更がアプリ全体に波及するリスクがある

これを解決するために登場したのが、CSS Modulesとstyled-componentsです。

CSS Modulesとは何か？

CSS Modulesは、クラス名を自動でユニークに変換してくれるCSSファイルの仕組みです。

クラス名がコンポーネントごとに閉じたスコープで管理されるため、スタイルの衝突が発生しません。

使い方（Vite + React環境）

  1. ファイル名を xxx.module.css にする
  2. JavaScript側で import styles from './xxx.module.css' として読み込む
  3. className={styles.className} のように使用

例：UserCard.module.css

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: white;
}

コンポーネント側：UserCard.jsx

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

function UserCard({ user }) {
  return (
    <div className={styles.card}>
      <h2>{user.name.first} {user.name.last}</h2>
      <p>{user.email}</p>
    </div>
  );
}

この方法では、class="card"は実際には UserCard_card__x1y2z のように変換されるため、他のcardと衝突しません。

styled-componentsとは何か？

styled-componentsは、JavaScriptの中でCSSを書くスタイルライブラリで、いわゆるCSS-in-JSの代表格です。

特徴：

  • スタイルをJavaScriptで完結させられる
  • propsと連動してスタイルを動的に切り替えられる
  • コンポーネントごとにスタイル定義が完結する

インストール

npm install styled-components

例：UserCard.jsx

import styled from 'styled-components';

const Card = styled.div`
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: white;
`;

const Name = styled.h2`
  font-size: 1.2rem;
`;

function UserCard({ user }) {
  return (
    <Card>
      <Name>{user.name.first} {user.name.last}</Name>
      <p>{user.email}</p>
    </Card>
  );
}

export default UserCard;

便利なポイント

  • propsを使ってスタイルを切り替えられる
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
`;

🔗 styled-components 公式サイト

CSS Modules と styled-components の比較

特徴CSS Modulesstyled-components
記法普通のCSSファイルJavaScript内でCSS
スコープ管理自動でユニーク化自動でスコープ化
動的スタイルJavaScriptで切り替えにくいpropsで柔軟に変更可能
パフォーマンス高速（CSSファイルとして扱う）ランタイムにスタイルを生成
導入のしやすさ少しのルール変更のみライブラリのインストールが必要
好まれる場面既存CSSと共存、静的スタイル中心動的UI、多様なテーマ切り替えが必要な場面

どちらを選ぶべきか？

CSS Modules が向いている場合：

  • 既存CSSとの互換性を保ちたい
  • 静的なスタイル中心
  • 小規模または部分的に導入したい

styled-components が向いている場合：

  • コンポーネントごとにスタイルを完結させたい
  • スタイルをpropsなどに応じて柔軟に変更したい
  • チームで統一された設計・デザインシステムを構築したい

開発規模やチームの文化、デザイン要件に応じて選ぶとよいでしょう。

まとめ

Reactにおけるスタイル設計は、**単に見た目を整える以上に「構造を設計する行為」**でもあります。
コンポーネント単位でスタイルを閉じることにより、再利用性・保守性・安全性が高まります。

  • CSS Modules：クラス名の衝突を防ぎつつ、CSSの柔軟性を維持
  • styled-components：JavaScriptに統合されたスタイル設計、動的なUIに強い

Reactアプリの成長に伴い、こうしたスタイル設計の選択がプロジェクトの品質を左右します。

次回は、Reactアプリを実際にデプロイして公開する方法を解説し、これまで作ってきた作品をインターネット上に公開するステップへ進みます。

次回予告

Reactアプリをデプロイしよう ― VercelやNetlifyを使った公開手順と注意点

コメント

タイトルとURLをコピーしました