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

生徒

「ReactでJSXを書いてると、よくエラーが出るんですが、どうしたらいいですか？」

先生

「JSXはHTMLに似ていますが、実はJavaScriptの中で使われる特別な書き方なので、細かいルールがあるんです。」

生徒

「なるほど……初心者でもつまずかないように、よくあるエラーと解決方法を教えてください！」

先生

「もちろんです。JSXでよくあるエラーと、その対処法をわかりやすく説明しますね！」

1. JSXは1つの親要素で囲む必要がある

Reactでは、JSXの中身は必ず1つの親要素（ルート要素）で囲む必要があります。HTMLのように複数のタグをそのまま並べると、エラーになります。

以下のような書き方はエラーになります。


return (
  <h1>こんにちは</h1>
  <p>Reactを学びましょう</p>
);

これは、<h1>と<p>が兄弟として並んでいるため、JSXとしては無効です。正しくは、<div>などで全体を囲います。


return (
  <div>
    <h1>こんにちは</h1>
    <p>Reactを学びましょう</p>
  </div>
);

このように、必ず全体を一つのタグで囲むことがJSXのルールです。

2. classではなくclassNameを使う

HTMLではCSSのクラスを指定する際にclass属性を使いますが、ReactではclassではなくclassNameを使います。

これはJavaScriptの予約語であるclassと混同を避けるためです。

間違った書き方：


<div class="box">こんにちは</div>

正しい書き方：


<div className="box">こんにちは</div>

3. JavaScriptの式を書くときは{}（中かっこ）を使う

JSXでは、文字列や変数などのJavaScriptの式を使う場合、必ず{}（中かっこ）で囲みます。HTMLとは違い、直接書くだけでは動作しません。

例えば、変数nameの中身を表示したい場合、次のように書きます。


const name = "太郎";

return (
  <h1>こんにちは、{name}さん！</h1>
);

{name}のように、変数や計算式を中かっこで囲むのがポイントです。

4. タグを閉じ忘れるとエラーになる

JSXでは、すべてのタグを閉じる必要があります。HTMLではタグの閉じ忘れがあってもブラウザが自動で補完してくれますが、Reactでは厳密に書かないとエラーになります。

例えば画像タグはHTMLでは<img>でも動きますが、JSXでは以下のように必ずスラッシュ（/）で閉じます。


<img src="logo.png" alt="ロゴ" />

自己終了タグ（空のタグ）は、スラッシュを忘れずに書きましょう。

5. if文は使えない！？三項演算子か論理演算子を使おう

JSXの中ではif文は使えません。条件分岐をしたい場合は、三項演算子condition ? true : falseや論理演算子&&を使います。


const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <p>ログイン中</p> : <p>ログインしてください</p>}
  </div>
);

また、ある条件がtrueのときだけ表示したい場合は、論理演算子が便利です。


{isLoggedIn && <p>ログイン中</p>}

6. 属性名はキャメルケースで書く

HTMLではtabindexやforなどがそのまま使えますが、JSXではJavaScriptに合わせてキャメルケース（小文字ではじめて途中を大文字）で書く必要があります。

間違い例：


<label for="name">名前</label>

正しい書き方：


<label htmlFor="name">名前</label>

htmlForのように、HTMLの属性名と違う書き方になることもあるので注意しましょう。

7. 複数行のJSXを返す場合はカッコで囲む

JSXを複数行にわたって書く場合、()で全体を囲わないと構文エラーになります。


return (
  <div>
    <h1>こんにちは</h1>
    <p>JSXのルールを覚えましょう</p>
  </div>
);

カッコがないと、どこからどこまでがJSXなのかが分からなくなり、エラーの原因になります。

8. undefinedやnullをそのまま表示しない

変数の中身がundefinedやnullの場合、画面に思わぬ表示になったり、エラーになることがあります。

対策としては、??（null合体演算子）を使って、代わりの文字を表示すると安心です。


const name = undefined;

return (
  <p>こんにちは、{name ?? "ゲスト"}さん！</p>
);

（画面に「こんにちは、ゲストさん！」と表示されます）

9. ReactのJSXはあくまでJavaScript

最後に覚えておきたいのは、JSXは見た目はHTMLにそっくりですが、JavaScriptの中で書く構文だということです。

そのため、タグの閉じ方や属性の書き方、条件分岐の仕方などがHTMLと少し違うのです。

最初は混乱するかもしれませんが、少しずつ慣れていきましょう！

まとめ

ReactのJSXは見た目こそHTMLに似ていますが、実際にはJavaScriptとして解釈される特別な構文であり、その性質によって初心者がつまずきやすいポイントが数多く存在します。今回の記事では、JSXで発生しがちなエラーとその原因、そして解決方法を具体例とともに整理しました。まず重要なのは、JSXの内容は必ずひとつの親要素でまとめる必要があるという点です。複数の要素を並べて返すとエラーになる性質はHTMLとは異なるため、このルールを理解しておくことで構文エラーを大きく減らせます。また、classではなくclassNameを使うといった属性名の違い、JavaScriptの値を埋め込むときには{}を用いるルールなど、Reactならではの表記方法を知っておくことで、コードの意味がさらに明確になります。

JSXでよくあるエラーとして、「タグの閉じ忘れ」「自己終了タグのスラッシュ忘れ」「if文をそのまま書いてしまう」といったミスも取り上げました。画像タグやbrタグなど、通常のHTMLでは閉じなくても動いていた部分が、JSXでは厳密な記述を求められます。また、JSX内での条件分岐は三項演算子や論理演算子を用いる必要があり、JavaScriptでありながらテンプレート的に扱われるJSXの特徴が現れています。こうした書き方の違いに慣れてくると、より柔軟にコンポーネントを組み立て、エラーを未然に防げるようになります。

属性名のキャメルケースもほぼ必須の知識で、HTMLとの細かな違いを理解することでReactでの設計が楽になります。特にhtmlForやtabIndexのように、明確に名前が変わっているものは初心者が頻繁に間違えるポイントです。さらに、JSXでは長いコードを返す場合には全体を丸括弧で囲む必要があり、複数行にまたがって書くときにエラーを防ぐ助けになります。undefinedやnullをそのまま表示しようとして意図せぬ結果になる場合も多く、?? "ゲスト"のようにフォールバックを設定しておくことで、より安定したUIが作れます。

JSXが「HTMLに似ているJavaScriptの構文」であることを理解してしまえば、React開発は格段に進めやすくなります。タグの閉じ方、属性の記述、動的な値の埋め込み、条件分岐、自己終了タグなど、基礎的なエラーをなくすだけでコードの扱いやすさは大きく変わります。初心者はまずJSXのルールを確実に身につけ、それを土台としてReactのコンポーネント設計や状態管理に進んでいくことが大切です。こうした基礎が整うことで、より複雑なUIでも迷わず構築できるようになり、Reactの魅力を最大限に生かせるようになります。

サンプルプログラムでエラー対策を確認

ここでは、今回の学びを踏まえて正しいJSXの記述例を整理します。複数の要素を返し、クラス名や条件分岐を含んだReactコンポーネントの典型的なサンプルです。


function JsxCheckSample() {
  const user = { name: "花子", age: 20 };
  const isAdult = user.age >= 20;
  const message = user.name ?? "ゲスト";

  return (
    <div className="card p-3">
      <h1>こんにちは、{message}さん！</h1>

      {isAdult ? (
        <p>{user.age}歳なので大人です。</p>
      ) : (
        <p>{user.age}歳なので未成年です。</p>
      )}

      <img src="profile.png" alt="プロフィール画像" />

      <label htmlFor="inputName">名前入力：</label>
      <input id="inputName" tabIndex={0} />

      <p style={{ color: "blue", fontSize: "18px" }}>
        JSXの書き方を正しく理解するとエラーが減ります！
      </p>
    </div>
  );
}

このサンプルでは、キャメルケースの属性名、波かっこの使い方、三項演算子による条件分岐、自己終了タグの正しい書き方、ひとつの親要素で全体を包む構造など、ReactのJSXでよく発生するエラーを防ぐための基本がすべて盛り込まれています。初心者が実際に手を動かしながら学ぶのに非常に適した例となっています。

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

生徒「JSXのエラーって単純なミスが多いんですね。閉じタグやclassNameの書き方を間違えていました…！」

先生「そうなんです。HTMLとの違いを理解するとエラーが一気に減りますよ。JSXはあくまでJavaScriptの構文なので、そのルールに合わせる必要があります。」

生徒「三項演算子も便利だと感じました！if文が使えない理由がやっと納得できました。」

先生「条件分岐がスムーズに書けるようになると、Reactの表現力がぐんと広がります。JSXの基本をしっかり習得することが第一歩ですね。」

生徒「nullやundefinedをそのまま表示しないように気をつけます！」

先生「その意識はとても大切です。JSXの特性を理解していけば、Reactの開発がもっと楽しくなりますよ。」

生徒「今日の学びでReactの土台が一段と固まりました！」

先生「引き続きたくさんコードを書いて、さらに理解を深めていきましょう。」