CSS Modules、styled-components、CSS in JS ライブラリ徹底比較

2024-05-22

React で CSS をコンポーネントスコープでインポートする方法

CSS Modules は、コンポーネントごとに CSS をローカルスコープ化する仕組みです。各コンポーネントは独自の名前空間を持ち、そのコンポーネント内でのみ有効な CSS クラスを定義できます。他のコンポーネントとスタイルが干渉する心配がなく、コードのモジュール性と保守性を向上させることができます。

メリット:

コンポーネント間のスタイル干渉を防止できる
コードのモジュール性と保守性を向上できる
動的なスタイル設定が可能

複雑な設定が必要になる場合がある
ネイティブ CSS に慣れている開発者にとっては馴染みない構文となる可能性がある

例:

// styles.module.css
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
  background-color: #3e8e41; /* Darker green */
}

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <button className={styles.button}>Click me</button>
  );
};

export default MyComponent;

styled-components は、コンポーネントごとに CSS を定義できるライブラリです。テンプレートリテラルを使用して CSS を記述し、コンポーネントに直接適用できます。 CSS Modules と同様に、コンポーネント間のスタイル干渉を防止し、コードのモジュール性と保守性を向上させることができます。

CSS Modules よりも記述が簡潔で分かりやすい
TypeScript との相性が良い

パフォーマンスが若干低下する可能性がある
ライブラリの追加インストールが必要

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

  &:hover {
    background-color: #3e8e41; /* Darker green */
  }
`;

const MyComponent = () => {
  return (
    <Button>Click me</Button>
  );
};

export default MyComponent;

CSS in JS ライブラリは、JavaScript コード内で CSS を記述できる仕組みを提供します。 emotion や JSS などのライブラリがあり、それぞれ異なる機能と利点を持っています。コンポーネントごとにスタイルを定義し、動的なスタイル設定やアニメーションなどを容易に実現できます。

動的なスタイル設定やアニメーションが容易

習得難易度が高い

import React from 'react';
import { css } from 'emotion';

const buttonStyles = css`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

  &:hover {
    background-color: #3e8e41; /*

CSS Modules を使用する

// styles.module.css
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
  background-color: #3e8e41; /* Darker green */
}

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <button className={styles.button}>Click me</button>
  );
};

export default MyComponent;

styled-components を使用する

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

  &:hover {
    background-color: #3e8e41; /* Darker green */
  }
`;

const MyComponent = () => {
  return (
    <Button>Click me</Button>
  );
};

export default MyComponent;

CSS in JS ライブラリを使用する

import React from 'react';
import { css } from 'emotion';

const buttonStyles = css`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

  &:hover {
    background-color: #3e8e41; /* Darker green */
  }
`;

const MyComponent = () => {
  return (
    <div css={buttonStyles}>
      Click me
    </div>
  );
};

export default MyComponent;

React で CSS をコンポーネントスコープでインポートするには、主に 3 つの方法があります。それぞれのメリットとデメリットを理解し、状況に応じて最適な方法を選択することが重要です。

CSS Modules: コンポーネント間のスタイル干渉を防止し、コードのモジュール性と保守性を向上させる
styled-components: CSS Modules よりも記述が簡潔で分かりやすく、動的なスタイル設定が容易
CSS in JS ライブラリ: コンポーネントごとにスタイルを定義し、動的なスタイル設定やアニメーションなどを容易に実現

どの方法を選択する場合でも、コンポーネント内で使用するスタイル名を明確に定義し、命名規則を統一することが重要です。また、スタイルシートの肥大化を防ぐために、必要なスタイルのみを記述するように心がけましょう。

React で CSS をコンポーネントスコープでインポートするその他の方法

Sass/SCSS は、CSS を拡張する CSS プリプロセッサです。ネスト構造や変数、関数などを利用することで、CSS コードをより記述しやすく、保守しやすいようにすることができます。

CSS コードをより記述しやすく、保守しやすいようにできる
ネスト構造や変数、関数などを利用して、コードを整理できる
他の CSS プリプロセッサと組み合わせることもできる

Sass/SCSS を利用するには、コンパイラが必要
CSS コードが複雑になる可能性がある

// styles.scss
.button {
  $primary-color: #4CAF50; /* Green */

  background-color: $primary-color;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

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

// MyComponent.js
import React from 'react';
import styles from './styles.module.scss';

const MyComponent = () => {
  return (
    <button className={styles.button}>Click me</button>
  );
};

export default MyComponent;

CSS Grid Layout モジュールは、CSS でグリッドレイアウトを作成するためのモジュールです。行と列を定義することで、柔軟なレイアウトを作成することができます。

柔軟なレイアウトを作成できる
コードが簡潔で分かりやすい
レスポンシブなレイアウトにも対応できる

CSS Grid Layout モジュールは比較的新しい機能なので、すべてのブラウザでサポートされているわけではない
複雑なレイアウトを作成する場合には、コードが複雑になる可能性がある

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return (
    <div className="grid-container">
      <div className="grid-item">Item 1</div>
      <div className="grid-item">Item 2</div>
      <div className="grid-item">Item 3</div>
      <div className="grid-item">Item 4</div>
    </div>
  );
};

export default MyComponent;

CSS フレームワークを使用する

Bootstrap や Tailwind CSS などの CSS フレームワークを使用すると、あらかじめ定義されたスタイルを利用して、簡単に UI を作成することができます。

簡単にかっこいい UI を作成できる
メンテナンスが容易
多くの開発者が利用しているので、情報収集が容易

フレームワークに依存することになる
カスタマイズが難しい場合がある

<div className="container">
  <div className="row">
    <div className="col-md-4">
      <h2>Item 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div className="col-md-4">
      <h2>Item 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div className="col-md-4">
      <h2>Item 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</