Frontend Academy · レッスン

CSS Modules：スコープ付きクラス名

Vite または webpack プロジェクトで CSS Modules を有効にし、クラス名のスコープをコンポーネントファイルに自動的に限定して、グローバルスタイルの漏洩をなくします。

「CSS Modules：スコープ付きクラス名」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

CSS Modulesとは

CSS Modulesは、ビルド時にクラス名へ一意のハッシュを追加して変換し、コンポーネントファイルのスコープ内に限定します。.cardというクラス名は.card_a1b2c3になり、他のコンポーネントのスタイルと意図せず衝突することがなくなります。

CSS Modulesの仕組み

CSSファイルをオブジェクトとしてインポートします。そのオブジェクトのプロパティをクラス名として使用します。バンドラー（Vite、webpack）が変換を処理します。

// Button.module.css
.button {
  background: #6366f1;
  color: white;
  padding: 8px 16px;
}
.button--large {
  padding: 12px 24px;
}

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

function Button({ large }: { large?: boolean }) {
  return (
    <button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
      Click me
    </button>
  );
}

clsxによる動的なクラス名

clsxライブラリを使うと、CSS Modulesで条件に応じてクラス名を組み合わせる処理を簡単に記述できます。

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

function Button({ variant, disabled }: ButtonProps) {
  return (
    <button className={clsx(
      styles.button,
      styles[`button--${variant}`],
      disabled && styles['button--disabled']
    )}>
      ...
    </button>
  );
}

CSS ModulesでのグローバルCSS

スコープを設定しないクラスを宣言するには、:globalを使用します。サードパーティライブラリのクラスを上書きする場合に便利です。

/* Scoped: */
.container { padding: 16px; }

/* Global (not scoped): */
:global(.react-datepicker) {
  font-family: inherit;
}

コンポジション — クラスの拡張

CSS Modulesではcomposesを使って、他のクラス（他のモジュールにあるクラスを含む）からスタイルを継承できます。

/* utilities.module.css */
.flexRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button.module.css */
.button {
  composes: flexRow from './utilities.module.css';
  background: #6366f1;
}

CSS Modulesとスコープ付きスタイル（Vue）

Vueのスコープ付きスタイルとCSS Modulesは、どちらもグローバルへのスタイルの漏れを防ぎますが、仕組みが異なります。スコープ付きスタイルはdata属性を追加し、CSS Modulesはクラス名を変換します。どちらも有効な方法であり、CSS ModulesはReactでも使用できます。

ViteでのCSS Modules

Viteは、.module.cssで終わるファイルに対してCSS Modulesを標準でサポートします。追加の設定は必要ありません。

CSS ModulesのTypeScript対応

typescript-plugin-css-modulesをインストールするか、typed-css-modulesツールでCSS Modules用の.d.tsファイルを生成すると、クラス名の自動補完を利用できます。

CSS Modulesの命名規則

クラス名はJavaScriptのプロパティになるため、CSS Modulesではクラス名にcamelCaseを使用します。.button-primaryではなく.buttonPrimaryとします（ハイフンを含む名前にはブラケット記法が必要です）。

CSS Modulesを使うタイミング

CSS Modulesは、コンポーネント単位のスタイルが必要でありながら、完全なCSS-in-JSソリューションは過剰であるReactアプリケーションに最適です。Vite + CSS Modulesは、軽量で実行時オーバーヘッドのないスタイリングソリューションです。

CSS ModulesとCSS-in-JS

CSS Modules: 実行時処理がなく、通常のCSSを使い、パフォーマンスに優れています。CSS-in-JS（styled-components）: 実行時に動的なスタイルを適用し、JavaScriptを中心に構成します。ほとんどのアプリでは、CSS Modulesのほうがシンプルで高速です。

クイックチェック

CSS Modulesを使用すると、CSSクラス名はどうなりますか？

まとめ: CSS Modules

.module.cssファイルをオブジェクトとしてインポートする。クラス名には一意のハッシュが自動的に付加され、スコープ化される。意図的にグローバルなスタイルを定義するには:global()を使用する。モジュール間の継承にはcomposesを使用する。条件付きのクラス名にはclsxを使用する。ViteはCSS Modulesを標準でサポートする。CSS-in-JSと異なり、実行時のオーバーヘッドがない。

よくある質問

「CSS Modules：スコープ付きクラス名」レッスンは無料ですか？

はい。「CSS Modules：スコープ付きクラス名」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「CSS Modules：スコープ付きクラス名」で何を学びますか？

Vite または webpack プロジェクトで CSS Modules を有効にし、クラス名のスコープをコンポーネントファイルに自動的に限定して、グローバルスタイルの漏洩をなくします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「CSS Modules：スコープ付きクラス名」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る