先生と生徒の会話形式で理解しよう

生徒

「先生、Reactのコードにclassって書いたらエラーになったんですけど、どうしてですか？」

先生

「それはいい質問ですね。ReactのJSXではclassの代わりにclassNameを使う必要があるんですよ。」

生徒

「えっ！HTMLではclassって書きますよね？なんでReactだけ違うんですか？」

先生

「ReactはJavaScriptをベースにしているから、classという言葉は予約語（特別な意味を持つ単語）なんです。そのためclassNameを使うんです。」

1. JSXでクラスを指定する基本ルール

通常のHTMLでは要素にクラスを付けるときにclassを使います。しかし、ReactのJSXではclassは使えず、代わりにclassNameを使います。これを覚えていないと初心者は必ずエラーにぶつかるポイントです。


function App() {
  return (
    <div className="container">
      <h1 className="title">こんにちは！</h1>
    </div>
  );
}

（画面に「こんにちは！」と表示され、文字にCSSのクラスが適用されます）

2. なぜclassではなくclassNameなのか？

JavaScriptにはclassという文法があり、オブジェクト指向プログラミングの「クラス定義」に使われます。そのためclassを属性名にすると、JavaScriptの文法と衝突してしまいます。そこでReactのJSXではclassNameを採用しているのです。

3. 複数のクラスを指定する方法

HTMLと同じように、複数のクラスを半角スペースで区切って指定できます。classNameの中で文字列として書けば問題ありません。


function App() {
  return (
    <div className="box shadow rounded">
      <p className="text-large text-bold">複数のクラスを指定しています</p>
    </div>
  );
}

（画面に「複数のクラスを指定しています」と表示され、スタイルが複数同時に適用されます）

4. JavaScriptの変数と組み合わせてclassNameを使う

中括弧{ }を使えば、JavaScriptの変数や条件分岐と組み合わせてクラスを動的に変更できます。例えば、状態によってクラスを切り替えることができます。


import React, { useState } from "react";

function App() {
  const [active, setActive] = useState(true);

  return (
    <div>
      <h1 className={active ? "active" : "inactive"}>
        状態によってクラスが変わります
      </h1>
      <button onClick={() => setActive(!active)}>切り替え</button>
    </div>
  );
}

（画面に「状態によってクラスが変わります」と表示され、ボタンを押すたびにactiveとinactiveが切り替わります）

5. 注意点と初心者が間違いやすいポイント

JSXでは必ずclassNameを使う（classは使えない）
複数クラスを指定するときは文字列をスペースで区切る
動的に切り替えるときは中括弧を使い、JavaScriptの式を埋め込む

特にHTMLに慣れている人ほど、うっかりclassと書いてエラーになるケースが多いです。ReactでCSSを適用するときは必ずclassNameを思い出してください。

まとめ

JSXでクラスを指定する方法について振り返ると、ReactがJavaScriptをベースに動作しているために、通常のHTMLとは異なる記述ルールが必要になる場面が多いことがわかります。その代表例が今回学んだclassNameの扱いです。HTMLの感覚でclassと書いてしまうとエラーが出てしまう理由は、JavaScriptにおけるclassが特別な意味を持つ予約語であるためであり、この仕組みはReactを理解するうえで避けて通れないポイントです。見た目としてはHTMLに非常に近いJSXですが、JavaScriptのルールに従って書かれているため、こうした違いを丁寧に押さえていくことでReactのコードがより読みやすく、扱いやすくなっていきます。

また、JSXでのクラス指定は単にclassNameに書き換えるだけでなく、JavaScriptの変数やStateと組み合わせることで柔軟なスタイル制御ができることも重要です。コンポーネントの状態に応じてクラスを切り替える仕組みは、動きのあるユーザーインターフェースを作るうえで非常に役立ちます。たとえば、ボタンのオン・オフ状態で色を変えたり、フォームの入力状況に応じてスタイルを変えたりする場合など、classNameに条件式を組み合わせると、視覚的にも分かりやすく操作しやすい画面を実現できます。

初心者がつまずきやすいポイントとしては、「HTMLと同じ書き方ができると勘違いしてしまうこと」「複数のクラス指定のときに迷ってしまうこと」「Stateによる条件分岐と組み合わせたclassNameの仕組みが理解しづらいこと」などが挙げられます。しかし、今回の学習のようにサンプルコードを見ながら進めていくと、JSXでの書き方が自然に頭へ定着していきます。HTMLとの違いはあるものの、Reactでは動的なクラス割り当てが容易に行えるため、慣れてしまえばむしろ便利だと感じる場面が増えていくでしょう。

以下では、今回の学習内容を踏まえた応用的なサンプルプログラムを紹介します。複数のクラスを条件によって切り替えるパターンをまとめた例になっており、実務でも使いやすい書き方を意識しています。JSXでのclassName指定の理解を深める補助として参考にしてください。

応用サンプル：複数条件でクラスを切り替えるコンポーネント


import React, { useState } from "react";

function StatusBox() {
  const [level, setLevel] = useState("low");

  const className =
    level === "low"
      ? "status-box low"
      : level === "middle"
      ? "status-box middle"
      : "status-box high";

  return (
    <div>
      <div className={className}>
        状態：{level === "low" ? "低" : level === "middle" ? "中" : "高"}
      </div>

      <button onClick={() => setLevel("low")}>低にする</button>
      <button onClick={() => setLevel("middle")}>中にする</button>
      <button onClick={() => setLevel("high")}>高にする</button>
    </div>
  );
}

export default StatusBox;

この例では、状態を示すlevelによってクラスが切り替わり、視覚的にもわかりやすい表示が可能になっています。複数条件を組み合わせるときに三項演算子を使う方法は、ReactのclassName制御でよく利用される実践的な書き方のひとつです。また、複雑な条件が増えてきた際には、クラス名生成関数を作るなどの工夫をすることでさらに読みやすく整理できます。

JSXとclassNameの関係はシンプルですが、Reactの理解に大きく関わる重要な土台です。「なぜclassNameを使うのか」「どう使い分けるのか」「どのように動的に制御できるのか」を把握することで、UI設計やスタイリングの効率が大きく向上します。理解が深まると、コンポーネントの状態に応じた見た目の切り替えが自然にできるようになり、コードの見通しも良くなります。こうした積み重ねが、より質の高いReactアプリケーションを作るための礎となるでしょう。

先生と生徒の振り返り会話

生徒：「HTMLみたいにclassを書いてエラーになった理由がようやくわかりました！JavaScriptのclassとぶつかるんですね。」

先生：「その通りです。JSXはJavaScriptと密接なので、HTMLと同じ見た目でもルールが違うことがあるんですよ。」

生徒：「classNameに文字列を入れれば複数クラスも簡単に書けました！条件でクラスを切り替える方法も便利ですね。」

先生：「Reactならではの柔軟さですね。Stateと組み合わせればもっと多彩なスタイル切り替えができますよ。」

生徒：「サンプルプログラムのおかげで動きのイメージがつきました。実際に試してみたいです！」

先生：「ぜひ触ってみてください。classNameの理解が深まるとReactのUI表現がもっと面白くなりますよ。」