React 16のCSSクラス：class vs classNameの選び方と知っておくべきベストプラクティス

2024-04-18

React 16 における class と className の違い

結論から言うと、一般的には className を使用すべきです。

class は JavaScript の予約語であるため、React では className を使用する必要があります。これは、JSX が JavaScript の拡張であるためです。

詳細な説明は以下の通りです。

class と className の違い

class: JavaScript の予約語であり、クラスを定義するために使用されます。
className: HTML 要素に CSS クラスを適用するために使用されるプロパティです。

React で className を使用する理由

React は className を使用することで、コードの読みやすさとメンテナンス性を向上させることができます。

React で class を使用しても良いのか？

技術的には、React 16 では class を使用しても問題ありません。しかし、className を使用することを強く推奨します。
class を使用すると、以下の問題が発生する可能性があります。
- コードが読みづらくなる
- メンテナンス性が低下する
- React の将来のバージョンで動作しなくなる可能性がある

className の使用方法

<div className="my-class">
  {/* コンテンツ */}
</div>

上記のコードでは、div 要素に my-class という CSS クラスが適用されています。

まとめ

React では、一般的には className を使用すべきです。class は JavaScript の予約語であるため、React では className を使用する必要があります。className を使用することで、コードの読みやすさとメンテナンス性を向上させることができます。

import React from 'react';

const MyComponent = () => {
  return (
    <div className="my-class">
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

export default MyComponent;

import React from 'react';

const MyComponent = () => {
  return (
    <div class="my-class">
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

export default MyComponent;

このコードは、上記の className を使用した例と同じ動作ですが、class プロパティを使用しています。

上記のコード例のように、className を使用することを推奨します。class を使用しても動作しますが、コードが読みづらくなり、メンテナンス性が低下する可能性があります。

補足

上記のコード例では、CSS クラス名は単一の文字列として指定していますが、複数のクラス名をスペース区切りで指定することもできます。

<div className="my-class another-class">
  {/* コンテンツ */}
</div>

CSS クラス名は、既存の CSS ファイルで定義する必要があります。

.my-class {
  color: red;
}

.another-class {
  font-weight: bold;
}

React 16 における class と className の代替方法

以下に、代表的な代替方法と、それぞれの利点と欠点をご紹介します。

CSS モジュールは、コンポーネント固有の CSS をカプセル化する方法です。各コンポーネントは独自の名前空間を持つため、CSS クラス名の衝突を回避することができます。

利点:

コードのモジュール性と保守性が向上する
CSS クラス名の衝突を回避できる

複雑な設定が必要になる場合がある
ファイル数が多くなる場合がある

例:

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

const MyComponent = () => {
  return (
    <div className={styles.myClass}>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

export default MyComponent;

Styled Components は、ライブラリを使用してコンポーネントに直接スタイルを定義する方法です。コンポーネント定義内に CSS コードを記述することで、コードをより直感的に記述することができます。

コードが読みやすく、直感的になる
再利用可能なスタイルコンポーネントを作成できる

学習曲線がやや高い
パフォーマンスへの影響が懸念される場合がある

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

const MyComponent = styled.div`
  .myClass {
    color: red;
  }
`;

const MyComponent = () => {
  return (
    <MyComponent>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </MyComponent>
  );
};

export default MyComponent;

CSS-in-JS ライブラリは、JavaScript コードを使用して CSS を記述する方法を提供します。コンポーネント定義内に CSS コードを記述することで、コードをより直感的に記述することができます。

代表的な CSS-in-JS ライブラリ:

emotion
jss
styled-jsx

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

const myClass = css`
  color: red;
`;

const MyComponent = () => {
  return (
    <div className={myClass}>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

export default MyComponent;

コンポーネントの合成は、複数のコンポーネントを組み合わせて新しいコンポーネントを作成する方法です。スタイルをコンポーネントにカプセル化することで、コードをよりモジュール化することができます。

複雑なコンポーネントを作成する場合、ネストが深くなり、コードが読みづらくなる場合がある

import React from 'react';

const MyButton = (props) => {
  return (
    <button className={props.className}>
      {props.children}
    </button>
  );
};

const MyComponent = () => {
  return (
    <div>
      <MyButton className="my-button">Hello, World!</MyButton>
      <p>This is a paragraph.</p>
    </div>
  );
};

export default MyComponent;