ReactでのBEM導入完全ガイド：CSS設計のベストプラクティス

Reactで効率的にCSSを管理する方法を模索する中で、BEM（Block Element Modifier）は、特に再利用性や一貫性を重視するプロジェクトで注目されています。BEMは、CSSクラス名に一貫した命名規則を導入し、スタイルの衝突を回避しながら、読みやすく保守しやすいコードを書くための強力なツールです。本記事では、BEMの基本概念からReactとの相性、具体的な実装方法までを詳しく解説し、効率的なCSS設計を目指す開発者に役立つ情報を提供します。

BEMとは何か？基本概念と利点

BEM（Block Element Modifier）は、CSSクラス名を体系的に管理するための命名規則で、ブロック（Block）、要素（Element）、修飾子（Modifier）の3つの概念から成り立っています。これは、再利用性を高め、一貫したスタイリングを実現するための設計手法です。

BEMの基本構造

ブロック（Block）: 独立したUIコンポーネントを表します。例: button
要素（Element）: ブロック内の構成要素を示します。例: button__icon
修飾子（Modifier）: ブロックや要素の外観や振る舞いを変えるものを表します。例: button--primary

例:

<div class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Click Me</span>
</div>

BEMの利点

スタイルの一貫性: 命名規則が統一され、コードの可読性が向上します。
スコープの明確化: 各クラス名が独立しており、スタイルの衝突が回避されます。
保守性の向上: 名前から構造や役割が明確にわかるため、後からコードを見た際にも理解しやすくなります。
再利用性の向上: コンポーネント単位で設計されるため、コードの再利用が容易になります。

BEMはReactとの相性が良く、コンポーネント単位でのスタイリングに最適な方法です。次のセクションでは、ReactプロジェクトにBEMを適用する具体的な方法を解説します。

ReactプロジェクトでのBEM命名規則の適用

ReactでBEMを導入する際、コンポーネントの構造と命名規則を統一することが重要です。Reactのコンポーネントベースのアーキテクチャは、BEMのモジュール性と非常に良く適合します。

コンポーネントとBEM命名規則

Reactでは、各コンポーネントをBEMの「ブロック」として扱い、その中の要素や修飾子をクラス名で表現します。

例:

function Button({ type, label }) {
  const buttonClass = `button button--${type}`;
  return (
    <button className={buttonClass}>
      <span className="button__label">{label}</span>
    </button>
  );
}

上記の例では、buttonがブロック、button__labelが要素、button--primaryなどが修飾子を表します。

JavaScriptでの動的クラス名の管理

Reactでは、修飾子を動的に管理する必要がある場合が多く、classnamesライブラリを活用するのがおすすめです。

例:

import classNames from 'classnames';

function Button({ type, isDisabled, label }) {
  const buttonClass = classNames('button', {
    [`button--${type}`]: type,
    'button--disabled': isDisabled,
  });

  return (
    <button className={buttonClass} disabled={isDisabled}>
      <span className="button__label">{label}</span>
    </button>
  );
}

classnamesライブラリを使用することで、条件に応じてクラス名を簡潔に記述できます。

JSXとBEMの連携ポイント

クラス名の可視性: JSXで記述するクラス名はコンポーネント内で明確に関連付ける。
スタイルのスコープ管理: コンポーネントに関連するクラス名のみを含め、グローバルCSSを避ける。
命名規則の徹底: ブロック、要素、修飾子の形式を統一し、他の命名スタイルと混在させない。

次に、CSSモジュールを使用してBEMの運用をさらに効率化する方法について説明します。

CSSモジュールとBEMの組み合わせ

CSSモジュールは、ReactプロジェクトでBEMを効率的に運用するための強力なツールです。CSSモジュールはスタイルをコンポーネント単位でスコープ化し、グローバルなクラス名の衝突を防ぎながら、BEMの命名規則を活用できます。

CSSモジュールとは

CSSモジュールは、各CSSファイルをモジュールとして扱い、そのクラス名がローカルスコープに限定される仕組みです。これにより、同じクラス名が異なるコンポーネントで使用されてもスタイルが衝突することはありません。

例:

/* Button.module.css */
.button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button--primary {
  background-color: #0056b3;
}

.button__label {
  font-size: 16px;
}

Reactでの利用方法

CSSモジュールをReactコンポーネントで使用するには、モジュールをインポートし、クラス名を動的に割り当てます。

例:

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

function Button({ type, label }) {
  const buttonClass = `${styles.button} ${styles[`button--${type}`]}`;
  return (
    <button className={buttonClass}>
      <span className={styles.button__label}>{label}</span>
    </button>
  );
}

export default Button;

BEMとCSSモジュールの連携のメリット

スコープの明確化: CSSモジュールがクラス名をローカルスコープに限定するため、グローバルな命名衝突を回避できます。
一貫性の維持: BEMの命名規則を適用することで、CSSモジュールを利用した際でもスタイルの可読性とメンテナンス性が向上します。
動的クラス名の柔軟性: CSSモジュールを使用しながら、Reactの状態やプロパティに応じてクラス名を変更できます。

注意点

命名規則の厳守: CSSモジュールでBEMを使用する際、ファイル名やクラス名が命名規則に基づいていることを確認してください。
構造の分離: CSSモジュールを活用する場合でも、HTML構造とCSSの役割を明確に分けるようにしましょう。
ビルド環境の対応: CSSモジュールを使うには、webpackやViteなどで適切に設定されていることを確認する必要があります。

次は、SCSSを利用してBEMをさらに効率的に活用する方法を解説します。

SCSSとBEM：プロジェクトの生産性を高める方法

SCSS（Sassy CSS）は、CSSの拡張機能を提供するプリプロセッサで、BEMの命名規則と組み合わせることで、スタイリングの効率と保守性をさらに向上させます。SCSSを活用することで、ネストや変数、ミックスインなどの機能を利用してBEMのスタイル管理を簡素化できます。

SCSSでのBEMのネスト構造

SCSSのネスト機能を使うと、BEMの構造をより視覚的にわかりやすく記述できます。

例:

/* Button.module.scss */
.button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &--primary {
    background-color: #0056b3;
  }

  &__label {
    font-size: 16px;
    font-weight: bold;
  }

  &:hover {
    background-color: #004085;
  }
}

この例では、&を使って親要素（ブロック）に基づいたクラス名を生成しています。

変数とミックスインを使った効率化

SCSSの変数やミックスインを活用すると、再利用性を高めながら一貫したデザインを保つことができます。

/* variables.scss */
$primary-color: #007bff;
$primary-hover: #0056b3;
$font-size-label: 16px;

/* Button.module.scss */
@import 'variables';

.button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &--primary {
    background-color: $primary-hover;
  }

  &__label {
    font-size: $font-size-label;
    font-weight: bold;
  }

  &:hover {
    background-color: darken($primary-hover, 10%);
  }
}

SCSSでのBEM運用のメリット

簡潔な記述: ネスト構造により、BEMの階層を明確にしつつ、コード量を削減できます。
一貫性の向上: 変数やミックスインを使用することで、デザインシステム全体の一貫性を保てます。
メンテナンスの簡便化: 変更が必要な場合も、特定の変数やミックスインを修正するだけで全体に反映可能です。

注意点

深すぎるネストを避ける: ネストが深くなりすぎると、可読性が低下します。適切な階層で留めましょう。
規模の管理: SCSSファイルが大規模になる場合、BEMのブロック単位でファイルを分割するのが推奨されます。
ビルド環境の設定: SCSSを使用するには、node-sassやsassなどのプリプロセッサがビルドプロセスに設定されている必要があります。

次に、BEMを活用してReactコンポーネントの再利用性を高める方法を解説します。

ReactとBEM：再利用性の高いコンポーネント設計

BEMのモジュール性をReactに取り入れることで、再利用性が高く、スケーラブルなコンポーネントを設計できます。これにより、プロジェクト全体で一貫したデザインと構造を維持しつつ、新しい機能の追加やスタイルの変更が容易になります。

BEMを用いた再利用可能なコンポーネントの設計

Reactでは、コンポーネントごとにBEMの「ブロック」を作成し、その内部で要素や修飾子を管理します。これにより、各コンポーネントが独立して動作し、異なるプロジェクト間で簡単に再利用できます。

例: ボタンコンポーネント

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

function Button({ type = 'default', label, onClick }) {
  const buttonClass = `${styles.button} ${styles[`button--${type}`]}`;

  return (
    <button className={buttonClass} onClick={onClick}>
      <span className={styles.button__label}>{label}</span>
    </button>
  );
}

export default Button;

このボタンコンポーネントは、typeプロパティを変更することで、異なるデザインのボタンを簡単に作成できます。例えば、type="primary"でbutton--primaryスタイルが適用されます。

BEMでの修飾子の活用による柔軟性

修飾子を活用すると、同じコンポーネントで異なるバリエーションを簡単に表現できます。

例:

<Button type="primary" label="Submit" onClick={handleSubmit} />
<Button type="secondary" label="Cancel" onClick={handleCancel} />

SCSSファイルの修飾子例:

.button {
  background-color: #007bff;
  color: white;

  &--primary {
    background-color: #0056b3;
  }

  &--secondary {
    background-color: #6c757d;
  }

  &__label {
    font-size: 16px;
  }
}

再利用可能なコンポーネント設計のポイント

汎用的なプロパティ設計: 再利用性を高めるために、コンポーネントのプロパティ（props）は汎用的に設計する。
修飾子でバリエーション管理: スタイルの違いは修飾子で制御し、基本構造を壊さないようにする。
UIロジックとスタイルの分離: ロジックとスタイリングを明確に分離し、可読性を高める。

ReactとBEMの組み合わせによる利点

スケーラビリティ: プロジェクトの成長に伴い、コンポーネントを簡単に拡張可能。
一貫性のある命名: BEMによる命名規則で、複雑なプロジェクトでもスタイルが一貫。
コンポーネントの移植性: Reactコンポーネントとしてモジュール化されているため、他のプロジェクトでも再利用可能。

次のセクションでは、BEMを活用する際によくあるミスとその回避策について解説します。

よくあるミスとその回避策

BEMはそのシンプルさゆえに強力ですが、実際に運用する中でいくつかのよくあるミスに直面することがあります。これらの問題を理解し、回避策を知ることで、BEMをより効果的に運用できます。

1. クラス名が冗長になる

問題点: BEMの命名規則を厳密に守りすぎると、クラス名が長くなり、可読性が低下する場合があります。
例:

<div class="menu__item__link__icon--disabled"></div>

回避策:

深いネストを避け、ブロック名をシンプルにする。
意味的に独立した部分は新しいブロックとして定義する。
必要に応じてユーティリティクラスを併用する。

修正例:

<div class="menu-item__icon menu-item__icon--disabled"></div>

2. 要素と修飾子の誤用

問題点: 要素（Element）を修飾子（Modifier）として使用するなど、BEMのルールを誤解してしまうケース。
例:

<div class="button button__primary"></div> <!-- 修飾子としての誤用 -->

回避策:

修飾子はブロックや要素の「状態」を示すものであり、新しい要素を表現するものではありません。
修飾子には--、要素には__を必ず使用し、混同を避ける。

修正例:

<div class="button button--primary"></div>

3. CSSのスコープが汚染される

問題点: グローバルスコープにBEMクラス名を置くことで、スタイルの競合が発生する。
回避策:

CSSモジュールやSCSSを活用してクラス名をローカルスコープに制限する。
プロジェクト全体でBEMを採用し、他の命名規則との混在を避ける。

4. コンポーネント間で同じ修飾子を使い回す

問題点: 複数のブロックで同じ修飾子名（例: --active）を使用し、それが意味する内容が異なる場合、混乱を招く。
回避策:

修飾子の意味を統一し、プロジェクト全体でその一貫性を保つ。
必要に応じてブロック名を含めた修飾子を作成する。
例:

<!-- 修正例 -->
<div class="button button--active"></div>
<div class="menu menu--active"></div>

5. ネストが深くなりすぎる

問題点: BEM構造をそのまま深くネストすると、スタイルとHTMLの可読性が低下する。
回避策:

SCSSのネスト機能を適度に活用し、BEMの階層を簡潔に記述する。
コンポーネントを細分化して、1つのブロックが過剰な役割を持たないようにする。

修正例:

// 不適切な例
.menu {
  &__item {
    &__link {
      &__icon {
        // ネストが深すぎる
      }
    }
  }
}

// 適切な例
.menu-item {
  &__link-icon {
    // シンプルなネスト
  }
}

6. 初期設計の欠陥

問題点: BEMの設計が曖昧だと、命名規則がプロジェクトの進行とともに崩れていく。
回避策:

開発の初期段階でBEMの命名ルールをチーム全体で共有し、統一する。
命名規則を記録したドキュメントを作成し、新しい開発者が参照できるようにする。

次のセクションでは、BEMを用いた具体的なReactプロジェクトの実装例として、Todoリストアプリを紹介します。

具体的な実装例：Todoリストアプリ

Reactを使ったBEMの具体的な適用方法を、Todoリストアプリの実装例を通して解説します。この例では、BEMの命名規則をCSSモジュールと組み合わせ、スタイリングの一貫性とスコープの管理を徹底します。

プロジェクト構造

プロジェクトを以下のように構築します。

src/
  components/
    TodoList/
      TodoList.jsx
      TodoList.module.scss
    TodoItem/
      TodoItem.jsx
      TodoItem.module.scss
  App.jsx
  App.module.scss

TodoListコンポーネント

Todoリスト全体を管理するコンポーネントとして、BEMを適用します。

TodoList.jsx

import React from 'react';
import styles from './TodoList.module.scss';
import TodoItem from '../TodoItem/TodoItem';

function TodoList({ todos, onToggle, onDelete }) {
  return (
    <div className={styles.todoList}>
      <h1 className={styles.todoList__title}>Todo List</h1>
      <ul className={styles.todoList__items}>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            {...todo}
            onToggle={() => onToggle(todo.id)}
            onDelete={() => onDelete(todo.id)}
          />
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

TodoList.module.scss

.todoList {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;

  &__title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  &__items {
    list-style: none;
    padding: 0;
  }
}

TodoItemコンポーネント

個々のTodoアイテムを表示するコンポーネントをBEM命名で作成します。

TodoItem.jsx

import React from 'react';
import styles from './TodoItem.module.scss';

function TodoItem({ id, text, completed, onToggle, onDelete }) {
  const itemClass = `${styles.todoItem} ${completed ? styles['todoItem--completed'] : ''}`;

  return (
    <li className={itemClass}>
      <span className={styles.todoItem__text} onClick={onToggle}>
        {text}
      </span>
      <button className={styles.todoItem__delete} onClick={onDelete}>
        Delete
      </button>
    </li>
  );
}

export default TodoItem;

TodoItem.module.scss

.todoItem {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px;

  &--completed {
    text-decoration: line-through;
    color: gray;
  }

  &__text {
    flex: 1;
    cursor: pointer;
  }

  &__delete {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
  }
}

Appコンポーネント

AppコンポーネントでTodoListを統括し、状態管理を行います。

App.jsx

import React, { useState } from 'react';
import TodoList from './components/TodoList/TodoList';
import styles from './App.module.scss';

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build Todo App', completed: true },
  ]);

  const toggleTodo = (id) => {
    setTodos((prev) =>
      prev.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))
    );
  };

  const deleteTodo = (id) => {
    setTodos((prev) => prev.filter((todo) => todo.id !== id));
  };

  return (
    <div className={styles.app}>
      <TodoList todos={todos} onToggle={toggleTodo} onDelete={deleteTodo} />
    </div>
  );
}

export default App;

App.module.scss

.app {
  max-width: 600px;
  margin: 50px auto;
  font-family: Arial, sans-serif;
}

この実装のポイント

モジュール化された構造: コンポーネントごとにCSSファイルを分離し、BEM命名規則を徹底。
スタイルの一貫性: すべてのクラス名がBEMに従い、可読性と再利用性を向上。
状態管理の明確化: Todoリストの状態はAppコンポーネントで一元管理。

次のセクションでは、BEMの学習を深めるための演習問題を提供します。

演習問題：BEMを使ったスタイリングの練習

BEMを実際に適用する練習を通して、命名規則とReactプロジェクトでの活用方法をより深く理解しましょう。以下に、いくつかの演習を用意しました。

演習1: シンプルなフォームのBEMスタイリング

以下のHTML構造をもとに、BEM命名規則に従ってCSSを記述してください。

HTML構造

<div class="form">
  <h2 class="form__title">Sign Up</h2>
  <form class="form__body">
    <div class="form__group">
      <label class="form__label">Username</label>
      <input class="form__input" type="text" />
    </div>
    <div class="form__group">
      <label class="form__label">Password</label>
      <input class="form__input" type="password" />
    </div>
    <button class="form__button form__button--primary">Submit</button>
  </form>
</div>

タスク

上記HTMLに対応するCSSをBEM命名規則に基づいて記述してください。
form__button--primaryにホバースタイルを追加してください。

模範解答例

.form {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;

  &__title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  &__body {
    display: flex;
    flex-direction: column;
  }

  &__group {
    margin-bottom: 12px;
  }

  &__label {
    margin-bottom: 4px;
    font-weight: bold;
  }

  &__input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  &__button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &--primary {
      background-color: #007bff;
      color: #fff;

      &:hover {
        background-color: #0056b3;
      }
    }
  }
}

演習2: カードコンポーネントを作成

タスク

Reactで以下の構造を持つカードコンポーネントを作成してください。
BEMを使用して、カードにcard--featuredの修飾子を追加した際、背景色が変わるように実装してください。

構造例

<div class="card card--featured">
  <h3 class="card__title">Featured Card</h3>
  <p class="card__content">This is a description of the card.</p>
</div>

ヒント

Reactコンポーネント内でclassnamesライブラリを使い、動的にクラスを切り替えましょう。
CSSでcard--featuredをスタイリングし、目立つデザインに仕上げてください。

演習3: 状態を持つコンポーネントにBEMを適用

タスク

Todoリストを参考に、新たに「完了したタスク」をハイライトする修飾子--completedを追加してください。
完了状態のスタイリングとして、背景色を変更し、アイテムのテキストを斜体にしてください。

挑戦のポイント

CSSモジュールを活用し、スタイルがローカルに限定されていることを確認してください。
状態を切り替えるReactフック（例: useState）を利用して、動的にクラスを変更する実装を試みてください。

演習問題の意図

これらの演習を通じて、以下のスキルを強化します：

BEM命名規則の理解と実践。
ReactとCSSモジュールを組み合わせた効率的なスタイリング。
状態に応じた動的クラス名の適用方法。

次のセクションでは、本記事のまとめを行います。

まとめ

本記事では、BEM（Block Element Modifier）をReactプロジェクトで活用する方法を解説しました。BEMの基本概念から、CSSモジュールやSCSSとの連携、Reactコンポーネント設計への応用、よくあるミスとその回避策、具体的な実装例、そして演習問題まで幅広く取り上げました。

BEMをReactに導入することで、次のようなメリットを得られます：

一貫性のあるCSS設計が可能になる。
スタイルの競合を防ぎ、保守性が向上する。
コンポーネントの再利用性が高まる。

これにより、プロジェクトの規模が大きくなっても、安定したコードベースを維持できます。学んだ内容を実際のプロジェクトで試し、BEMとReactの相性の良さを体感してください。BEMを正しく活用することで、CSS設計の新たな可能性を開拓できるでしょう。

ReactでのBEM導入完全ガイド：CSS設計のベストプラクティス

BEMとは何か？基本概念と利点

BEMの基本構造

BEMの利点

ReactプロジェクトでのBEM命名規則の適用

コンポーネントとBEM命名規則

JavaScriptでの動的クラス名の管理

JSXとBEMの連携ポイント

CSSモジュールとBEMの組み合わせ

CSSモジュールとは

Reactでの利用方法

BEMとCSSモジュールの連携のメリット

注意点

SCSSとBEM：プロジェクトの生産性を高める方法

SCSSでのBEMのネスト構造

変数とミックスインを使った効率化

SCSSでのBEM運用のメリット

注意点

ReactとBEM：再利用性の高いコンポーネント設計

BEMを用いた再利用可能なコンポーネントの設計

BEMでの修飾子の活用による柔軟性

再利用可能なコンポーネント設計のポイント

ReactとBEMの組み合わせによる利点

よくあるミスとその回避策

1. クラス名が冗長になる

2. 要素と修飾子の誤用

3. CSSのスコープが汚染される

4. コンポーネント間で同じ修飾子を使い回す

5. ネストが深くなりすぎる

6. 初期設計の欠陥

具体的な実装例：Todoリストアプリ

プロジェクト構造

TodoListコンポーネント

TodoItemコンポーネント

Appコンポーネント

この実装のポイント

演習問題：BEMを使ったスタイリングの練習

演習1: シンプルなフォームのBEMスタイリング

模範解答例

演習2: カードコンポーネントを作成

演習3: 状態を持つコンポーネントにBEMを適用

挑戦のポイント

演習問題の意図

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル