Reactにおける「Adjacent JSX elements must be wrapped in an enclosing tag」エラーの解決方法

問題点誰にでも起こることです。ヘッダーとサブテキストのようなシンプルなコンポーネントを作成し、それらを並べて返そうとしたとします。保存ボタンを押すと、新しいUIが表示される代わりに、真っ赤なエラーがターミナルやブラウザのコンソールに表示されます：

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

これは、すべてのReact開発者が最初に直面するハードルの1つです。これはロジックのバグではなく、JSXが舞台裏でどのように処理されるかという厳格な要件によるものです。

エラーが発生する理由JSXはHTMLのように見えるかもしれませんが、実際にはJavaScriptのショートカットです。BabelやViteのようなツールは、記述されたすべてのタグを React.createElement() の呼び出しに変換します。Reactは、コンポーネントのルートが何であるかを正確に知る必要があります。

以下の無効なコードスニペットを見てみましょう：

function MyComponent() {
  return (
    <h1>Hello World</h1>
    <p>This is a description.</p>
  );
}

コンパイラはこのコードを次のように変換しようとします：

function MyComponent() {
  return (
    React.createElement('h1', null, 'Hello World')
    React.createElement('p', null, 'This is a description.')
  );
}

JavaScriptでは、関数は一度に2つの値を返すことはできません。返せるのは、単一のオブジェクト、文字列、または要素のみです。これら2つの createElement 呼び出しは、親要素なしで並んでいるため、JavaScriptエンジンは処理を断念してしまいます。

デバッグの手順ここではIDEが心強い味方になります。VS Codeを使用している場合、通常は2番目の要素を入力した瞬間に赤い波線でハイライトされます。大きなファイルでエラーを探している場合は、以下の手順に従ってください：

• return 文の中に複数のトップレベル要素がないか確認する。- エラー箇所の上のどこかで閉じタグが抜けていないか特定する。- ラッパーなしで2つの兄弟要素を返している可能性がある .map() 関数を確認する。## ステップバイステップの解決策### 1. コンテナ要素でラップする最も手っ取り早い修正方法は、要素を <div> や <section> のような標準的なHTMLタグで囲むことです。

function MyComponent() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </div>
  );
}

使用場面： CSSのFlexboxやGrid、または特定のスタイリング用クラスを適用するために、DOM内に物理的な要素が必要な場合にこれを選択してください。

2. React Fragmentsを使用する余分な <div> タグを追加すると「div soup（divの乱立）」を招き、DOMが乱雑になったりCSSレイアウトが崩れたりすることがあります。React Fragmentsを使用すると、ブラウザのHTMLツリーに余分なノードを追加せずに要素をグループ化できます。

import { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </Fragment>
  );
}

3. 短縮構文（推奨）モダンなReactでは、Fragmentsをより簡潔に記述する方法が提供されています。空のタグ <>...</> を使用します。これは、90%のケースで業界標準となっています。

function MyComponent() {
  return (
    <>
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </>
  );
}

プロのアドバイス： key プロップを渡す必要がある場合（ループ内など）は、この短縮構文は使用できません。その特定のシナリオでは、明示的な <Fragment key={item.id}> 構文を使用する必要があります。

4. 配列を返す一般的ではありませんが、要素の配列を返すこともできます。これはUI構造が動的な場合に便利ですが、すべてのアイテムに一意の key が必要です。

function MyComponent() {
  return [
    <h1 key="header">Hello World</h1>,
    <p key="desc">This is a description.</p>
  ];
}

確認手順- コンソールを確認する： ターミナルに「Compiled successfully」と表示されていることを確認します。- DOMを検証する： Chrome DevTools (F12) を開きます。Fragmentを使用した場合は、<h1> と <p> が間に <div> を挟まずに、親の直接の子として表示されるはずです。- レイアウトを検証する： CSSが崩れていないか確認します。ラッパーの <div> を追加すると、親コンテナの display: flex プロパティなどが意図せずリセットされることがあります。## 学んだこと- JSXは最終的に単一のJavaScript関数呼び出しになるため、単一のルートノードが必要です。- HTML出力を簡潔に保ち、レイアウトのバグを避けるために、Fragments（<>...</>）を使用しましょう。- ラッパータグ（<div>）は、実際にそのグループをスタイリングする必要がある場合のために取っておきましょう。- JSXはHTMLのように見えますが、JavaScriptの厳格な構造ルールに従っています。