React JSX Syntax Error の原因と解決方法｜初心者向け完全ガイド

Reactを使ったWeb開発を始めたばかりの方が最初に遭遇しやすいトラブルの一つが「JSX Syntax Error」です。このエラーが発生すると、アプリケーションが正常に動作せず、どこが原因なのか分からず困ってしまうことも多いでしょう。

本記事では、React JSX Syntax Errorの原因から解決方法、そしてよくある間違いまで、初心者の方でもすぐに実践できる内容をまとめました。

React JSX Syntax Errorとは
React JSX Syntax Errorの主な原因
React JSX Syntax Errorの解決手順
実践的なコード例と解決方法
よくある間違いと対策
エラーデバッグのコツ
デバッグの実例
まとめ

React JSX Syntax Errorとは

JSXはJavaScriptの拡張構文で、HTMLのようなタグをJavaScript内に記述できます。しかし、この独特の構文のため、文法的な間違いが発生しやすいのが特徴です。

JSX Syntax Errorは、JSXの記述方法が正しくないときに発生するエラーです。ブラウザのコンソールに赤い警告が表示され、開発サーバーも停止してしまいます。

React JSX Syntax Errorの主な原因

1. 閉じタグの忘れ

JSXの最も一般的なエラー原因は、要素の閉じタグを忘れてしまうことです。HTMLと同じく、すべてのタグは開き要素と閉じ要素のペアで構成される必要があります。

2. 複数の要素をreturnする

React コンポーネントの render 関数やステートレスコンポーネントは、複数のトップレベル要素を直接 return することができません。必ず1つの親要素で囲む必要があります。

3. JavaScriptの式を正しくラップしていない

JSX内でJavaScriptの式を使用する場合、波括弧 {} で囲む必要があります。これを忘れるとエラーが発生します。

4. 予約語やキーワードの使用

JavaScriptの予約語（class、forなど）をそのままJSXで使用するとエラーになります。JSXでは特別な属性名が必要です。

5. 不正なプロップの記述

JSXの属性（プロップ）の書き方を誤ると、構文エラーが発生します。

React JSX Syntax Errorの解決手順

ステップ1：エラーメッセージを確認する

まず、ブラウザの開発者ツール（F12キー）を開き、コンソール画面でエラーメッセージを確認しましょう。エラーメッセージには、問題が発生しているファイル名と行番号が表示されます。

ステップ2：該当のコードを確認する

エラーメッセージに表示されたファイルと行番号を確認し、その周辺のコードを見直します。多くの場合、エラーの原因はこの周辺にあります。

ステップ3：構文をチェックする

以下の項目を確認してください：

すべてのタグが閉じられているか
複数のトップレベル要素がないか
JavaScriptの式が {} で囲まれているか
属性の記述方法が正しいか
文字列がクォートで囲まれているか

ステップ4：修正して保存する

問題を修正したら、ファイルを保存します。開発サーバーはホットリロード機能を持っているため、自動的に更新されます。

実践的なコード例と解決方法

例1：閉じタグの忘れ

❌ エラーのあるコード：

function App() {
  return (
    <div>
      <h1>Hello React
      <p>This is a paragraph</p>
    </div>
  );
}

このコードでは、<h1>タグが閉じられていません。

✅ 修正後：

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>This is a paragraph</p>
    </div>
  );
}

例2：複数のトップレベル要素

❌ エラーのあるコード：

function App() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>
  );
}

このコードは複数のトップレベル要素を return しています。

✅ 修正後（方法1：divで囲む）：

function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  );
}

✅ 修正後（方法2：React.Fragmentを使用）：

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

React.Fragmentは、DOM上に余分な要素を追加しない便利な方法です。空のタグ <></> で表記できます。

例3：JavaScriptの式を正しくラップしていない

❌ エラーのあるコード：

function App() {
  const name = 'React';
  return (
    <div>
      <h1>Hello name</h1>
    </div>
  );
}

このコードでは、変数 name が単なるテキストとして扱われます。

✅ 修正後：

function App() {
  const name = 'React';
  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
}

波括弧 {} で変数を囲むことで、JavaScriptの式として認識されます。

例4：予約語の使用

❌ エラーのあるコード：

function App() {
  return (
    <div class="container">
      <label for="username">Username</label>
      <input type="text" />
    </div>
  );
}

JSXでは、JavaScriptの予約語 class と for をそのまま使用できません。

✅ 修正後：

function App() {
  return (
    <div className="container">
      <label htmlFor="username">Username</label>
      <input type="text" />
    </div>
  );
}

JSXでは className と htmlFor を使用します。

例5：プロップの記述ミス

❌ エラーのあるコード：

function App() {
  return (
    <div>
      <button disabled=true>Click me</button>
    </div>
  );
}

このコードでは boolean 値をクォートで囲んでいるため、文字列として扱われます。

✅ 修正後：

function App() {
  return (
    <div>
      <button disabled={true}>Click me</button>
    </div>
  );
}

boolean 値や数値などの JavaScriptの値は、波括弧で囲む必要があります。

よくある間違いと対策

間違い1：セルフクロージングタグを正しく記述していない

❌ 間違い：

<img src="photo.jpg">
<input type="text">

✅ 正解：

<img src="photo.jpg" />
<input type="text" />

JSXではセルフクロージングタグの最後にスラッシュ / が必要です。

間違い2：style プロップに文字列を渡している

❌ 間違い：

<div style="color: red; font-size: 16px">
  Styled text
</div>

✅ 正解：

<div style={{ color: 'red', fontSize: '16px' }}>
  Styled text
</div>

React では style プロップにオブジェクトを渡す必要があります。また、CSS プロパティ名はキャメルケースで記述します。

間違い3：条件分岐の記述方法

❌ 間違い：

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {if (isLoggedIn) <h1>Welcome</h1>}
    </div>
  );
}

JSX 内で if 文を直接使用することはできません。

✅ 正解（方法1：三項演算子）：

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome</h1> : <h1>Please log in</h1>}
    </div>
  );
}

✅ 正解（方法2：論理演算子）：

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn && <h1>Welcome</h1>}
    </div>
  );
}

間違い4：コンポーネント名の大文字小文字

❌ 間違い：

import myComponent from './MyComponent';

function App() {
  return <myComponent />;
}

✅ 正解：

import MyComponent from './MyComponent';

function App() {
  return <MyComponent />;
}

React では、カスタムコンポーネントは大文字で始まる必要があります。小文字で始まるタグはネイティブ HTML タグと解釈されます。

エラーデバッグのコツ

1. ESLintプラグインを使用する

VS Code に ESLint と eslint-plugin-react をインストールすることで、コード入力中にエラーを検出できます。

2. Prettierでコードを自動整形する

Prettier を使用することで、自動的にコードがフォーマットされ、見落としやすい構文エラーが減ります。

3. React DevToolsを活用する

ブラウザの React DevTools 拡張機能を使用することで、コンポーネントの状態やプロップを可視化できます。

デバッグの実例

複雑なコード例：

function UserProfile() {
  const user = { name: 'John', age: 30, isActive: true };
  
  return (
    <>
      <div className="profile-container"
        <h2>{user.name}</h2>
        <p>Age: {user.age}</p>
        {user.isActive && <span className="active-badge">Active</span>}
      </div>
    </>
  );
}

このコードのエラーを見つけてみましょう：

div タグが閉じられていない
className の値が引用符で囲まれていない

修正版：

function UserProfile() {
  const user = { name: 'John', age: 30, isActive: true };
  
  return (
    <>
      <div className="profile-container">
        <h2>{user.name}</h2>
        <p>Age: {user.age}</p>
        {user.isActive && <span className="active-badge">Active</span>}
      </div>
    </>
  );
}