React JSX 属性

Volardev 編集部 April 28, 2026

JSX では HTML 要素に属性（Attributes）を挿入できますが、HTML とは異なるいくつかの重要な違いがあります。

1. class = className

HTML では class 属性が頻繁に使われます。しかし、JSX は JavaScript としてレンダリングされるものであり、class キーワードは JavaScript における予約語（Reserved word）であるため、JSX 内でそのまま使用することはできません。

JSX ではこれを解決するために、代わりに className を使用します。JSX がレンダリングされる際、className 属性は HTML の class 属性へと適切に変換されます。

1.1 `className` の使用例

JSX で class の代わりに className 属性を使用する例です：

function Car() {
  return (
    <h1 className="myclass">ハローワールド</h1>
  );
}

2. 属性値としての式 (Expressions as Attributes)

属性値には JavaScript の式（Expressions）を使用することもできます。これは動的な属性を扱う際に非常に便利です。

2.1 属性値に JavaScript の式を使用する例

function Car() {
  const x = "myclass";
  return (
    <h1 className={x}>ハローワールド</h1>
  );
}

属性値として式（JavaScript の変数）を使用する場合、引用符（" "）で囲まないことが重要です。引用符を使用してしまうと、JSX はそれを JavaScript の式としてではなく、単なる文字列リテラルとして扱ってしまいます。

3. キャメルケースによるイベント属性

JSX におけるイベント属性は、キャメルケース（camelCase）で記述します。例えば、HTML の onclick は JSX では onClick となります。

3.1 イベント属性でのキャメルケース使用例

function Car() {
  const myfunc = () => {
    alert('こんにちは！');
  };
  return (
    <button onClick={myfunc}>クリックしてください</button>
  );
}

4. 真偽値属性 (Boolean Attributes)

属性に値を渡さない場合、JSX はそれを true として扱います。false を渡したい場合は、式として明示的に指定する必要があります。

4.1 JSX における Boolean の例

以下のコードは disabled が true となり、ボタンが無効化されます：

<button onClick={myfunc} disabled>クリックしてください</button>

これも true として扱われ、ボタンが無効化されます：

<button onClick={myfunc} disabled={true}>クリックしてください</button>

これは false となり、ボタンは無効化されません：

<button onClick={myfunc} disabled={false}>クリックしてください</button>

5. style 属性

JSX の style 属性は、HTML のような CSS 文字列ではなく、CSS プロパティ名をキャメルケースにした JavaScript オブジェクトを受け取ります。

5.1 `style` 属性の使用例

function Car() {
  const mystyles = {
    color: "red",
    fontSize: "20px",
    backgroundColor: "lightyellow",
  };

  return (
    <>
      <h1 style={mystyles}>私の車</h1>
    </>
  );
}

上記の例では、以下の 2 点に注目してください。

スタイルはオブジェクト（Object）に格納されている。
スタイルプロパティは、font-size のようなケバブケースではなく、fontSize のようにキャメルケースで記述されている。

これは HTML と JSX の間の非常に重要な違いです。