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

生徒

「Reactで複数の要素を並べて返そうとしたらエラーになりました…」

先生

「それはきっと、JSXでは1つの親要素で囲まないといけないというルールが関係してますね。」

生徒

「1つの親要素ってなんですか？複数のタグを書いたらだめなんですか？」

先生

「はい、でもReactにはFragmentという便利な書き方があって、それで解決できますよ。具体的に見ていきましょう！」

1. Reactで複数の要素を返したいときの注意点

React（リアクト）では、コンポーネントの中でreturnする内容（JSX）は、必ず1つの親要素で囲む必要があります。

たとえば、次のように<h1>と<p>を並べて書いただけではエラーになります。

これはHTMLでは問題なくても、JSXではルール違反なんです。

2. divで囲ってもいいけど…

このエラーを防ぐためによくやる方法は、<div>タグでまとめて囲うことです。

でも、これを繰り返すとHTMLの中に意味のないdivがどんどん増えてしまいます。これを無駄なネストと呼ぶこともあります。

そんなときに便利なのが、今回紹介するFragment（フラグメント）です。

3. React.Fragmentを使って複数の要素を返す

React.Fragmentは、見た目には表示されないけれど、複数の要素をまとめて返すことができる特別なタグです。

つまり、「画面には何も出さないけど、複数のタグを1つのまとまりとして返す」という役割です。


import React from "react";

function App() {
  return (
    <React.Fragment>
      <h1>こんにちは</h1>
      <p>これは説明文です。</p>
    </React.Fragment>
  );
}

export default App;

（画面に「こんにちは」と「これは説明文です。」が表示されますが、余計なタグは出力されません）

このように書くことで、無駄なHTMLタグを増やさずに複数の要素を返せます。

4. よりシンプルに書ける省略記法

React.Fragmentはよく使うので、もっと簡単に書けるように<>と</>で省略する方法も用意されています。


function App() {
  return (
    <>
      <h1>こんにちは</h1>
      <p>省略記法でも使えます。</p>
    </>
  );
}

（画面に「こんにちは」と「省略記法でも使えます。」が表示されます）

このように、<>と</>を使うことで、コードがすっきり見やすくなります。

5. Fragmentとdivの違い

ここで、Fragmentとdivの違いを整理しておきましょう。

Fragment：画面に表示されない、HTMLに影響を与えない
div：画面に表示され、HTMLに残る

つまり、どうしてもレイアウトのために枠が必要なときはdivを使い、それ以外はFragmentでまとめるのがおすすめです。

6. 複数のコンポーネントを並べたいときにも便利

たとえば、子コンポーネントの中で複数の要素を返したいときにも、Fragmentが活躍します。


function ItemList() {
  return (
    <>
      <li>りんご</li>
      <li>みかん</li>
      <li>ぶどう</li>
    </>
  );
}

function App() {
  return (
    <ul>
      <ItemList />
    </ul>
  );
}

（画面には「りんご」「みかん」「ぶどう」がリストとして表示されます）

このように、<ul>の中にリスト項目（<li>）を複数まとめて返すときも、Fragmentがあると便利です。

まとめ

この記事では、ReactにおけるFragmentの使い方について解説しました。ReactではJSXで複数の要素を返す際、必ず1つの親要素で囲む必要がありますが、divで囲うと余計なHTMLタグが増えてしまいます。その問題を解決するのがReact.Fragmentや省略記法の<>です。Fragmentを使うと、見た目に影響を与えずに複数要素をまとめて返すことができ、無駄なネストを避けることができます。

Fragmentは単なるラッパーであり、画面には表示されません。これにより、HTMLの構造をシンプルに保ちながら、複数の要素や子コンポーネントを返すことができます。特にリストや複数の子要素を扱う場合、ulやtableの中で非常に便利です。また、省略記法を使えばコードが読みやすくなり、開発効率も上がります。

さらに、Fragmentとdivの違いを理解しておくことで、適切に使い分けられるようになります。divは表示用の枠を作るために使い、Fragmentは構造上の親要素としてのみ利用します。この使い分けをマスターすることで、ReactでのUI設計がより洗練され、可読性も向上します。

サンプルプログラムで振り返り


import React from "react";

function Fruits() {
  return (
    <>
      <li>りんご</li>
      <li>みかん</li>
      <li>ぶどう</li>
    </>
  );
}

function App() {
  return (
    <ul>
      <Fruits />
    </ul>
  );
}

export default App;

（画面には「りんご」「みかん」「ぶどう」がリストとして表示され、余計なタグは増えません）

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

生徒

「Fragmentを使うと、複数の要素をまとめて返せるのが便利ですね。divで囲む必要がないのも助かります。」

先生

「そうですね。画面には表示されずHTML構造もシンプルに保てるので、リストやテーブルの中で特に役立ちます。」

生徒

「省略記法も使えばコードがすっきりして、読みやすくなりますね。」

先生

「その通りです。Fragmentの理解はReactでのコンポーネント設計に必須です。今後は、複数要素の返却や子コンポーネントの組み合わせで必ず活用できるようになります。」

生徒

「これで、エラーにならずに複数の要素を返せるようになるんですね。」