React.jsで"Adjacent JSX elements must be wrapped in an enclosing tag"エラーが表示されたときの解決方法

React.jsを使用していると、"Adjacent JSX elements must be wrapped in an enclosing tag"というエラーに遭遇することがあります。このエラーは、JSX内で複数の要素を返そうとしたときに発生します。本記事では、このエラーの原因と解決方法について詳しく説明します。

エラーの原因

このエラーは、React コンポーネントが複数の隣接する JSX 要素を直接返そうとしたときに発生します。React は、コンポーネントが単一のルート要素を返すことを要求します。

例えば、以下のようなコードはエラーを引き起こします：

function ErrorComponent() {
  return (
    <h1>Hello</h1>
    <p>World</p>
  );
}

解決方法

このエラーを解決するには、いくつかの方法があります。以下に主な解決策を紹介します。

1. div タグで囲む

最も簡単な解決方法は、複数の要素を単一の `div` タグで囲むことです：

function FixedComponent() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

2. React.Fragment を使用する

不要な `div` を追加したくない場合は、`React.Fragment` を使用できます：

import React from 'react';

function FixedComponent() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </React.Fragment>
  );
}

3. 短縮構文を使用する

React 16.2 以降では、`React.Fragment` の短縮構文として空のタグ `<>` と `` を使用できます：

function FixedComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

4. 配列を返す

JSX 要素の配列を返すこともできますが、各要素に一意の `key` prop を追加する必要があります：

function FixedComponent() {
  return [
    <h1 key="header">Hello</h1>,
    <p key="paragraph">World</p>
  ];
}

まとめ

"Adjacent JSX elements must be wrapped in an enclosing tag" エラーは、複数の JSX 要素を単一のルート要素で囲むことで簡単に解決できます。`div` タグ、`React.Fragment`、短縮構文 `<>`、または配列を使用することで、このエラーを回避し、クリーンで効率的な React コードを書くことができます。

これらの解決方法を理解し、適切に適用することで、React アプリケーションの開発をスムーズに進めることができるでしょう。