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.jsのコンポーネントがレンダリングする際に、単一のルート要素を期待しているにもかかわらず、複数の要素が同じレベルで並んでいるためです。

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

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

解決方法

このエラーを解決するには、以下のいずれかの方法を採用することができます。

1. div要素でラップする

最も一般的な解決方法は、複数の要素を単一のdiv要素でラップすることです。

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

2. Reactフラグメントを使用する

不要なdiv要素を追加したくない場合は、Reactフラグメントを使用することができます。

import React from 'react';

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

または、短縮構文を使用することもできます：

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

3. 配列を返す

特定のケースでは、要素の配列を返すことで問題を解決できます。ただし、この方法を使用する場合は、各要素に一意のkeyプロパティを指定する必要があります。

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

まとめ

「Adjacent JSX elements must be wrapped in an enclosing tag」エラーは、React.jsの基本的な制約によるものですが、簡単に解決することができます。div要素でラップする、Reactフラグメントを使用する、または配列を返すといった方法を適切に選択することで、クリーンで効率的なコードを維持しつつ、このエラーを回避することができます。

これらの解決方法を理解し、適切に適用することで、React.jsでのコンポーネント開発をよりスムーズに進めることができるでしょう。エラーメッセージに遭遇した際は、まずこれらの方法を試してみることをおすすめします。