React.Fragment・`<></>`とは

はじめに

Reactを使用してコンポーネントを作成する際、複数の子要素を一つの親要素でラップする必要があります。しかし、不要なDOMノードを増やしたくない場合、フラグメント (Fragment) を利用することで、追加のDOM要素を作成せずに子要素をグループ化できます。Reactでは、React.Fragmentとその短縮記法である<></>を使用してフラグメントを作成できます。本記事では、これら二つの違いと使い分けについて詳しく解説します。

React.Fragmentとは

React.Fragmentは、複数の子要素を一つの親要素で包みつつ、実際のDOMには余分なノードを追加しないためのコンポーネントです。これにより、無意味な<div>やその他の要素を挿入せずに、クリーンなDOM構造を保つことができます。

使用例

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>タイトル</h1>
      <p>コンテンツ</p>
    </React.Fragment>
  );
}

export default MyComponent;

上記のコードでは、<h1>と<p>がReact.Fragmentでラップされていますが、実際のDOMにはReact.Fragmentに対応する要素は追加されません。

短縮記法：<></>

React.Fragmentをより簡潔に記述するための短縮記法が<></>です。これにより、コードの可読性が向上します。

使用例

import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>タイトル</h1>
      <p>コンテンツ</p>
    </>
  );
}

export default MyComponent;

短縮記法でも、React.Fragmentと同様に動作し、DOMに余分なノードを追加しません。

React.Fragmentと<></>の違い

1. 属性（props）の使用

React.Fragmentは属性（props）を受け取ることができますが、短縮記法の<></>は属性を指定できません。

キー属性の使用

リストをレンダリングする際、各フラグメントにkey属性を指定したい場合があります。この場合、短縮記法ではkeyを指定できないため、React.Fragmentを使用する必要があります。

// 正しい例
import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

export default ItemList;

// エラーになる例
function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </>
      ))}
    </ul>
  );
}

上記のエラー例では、key属性を指定していないため、Reactはリストアイテムの差分を正しく認識できません。

2. 開発者ツールでの表示

React.Fragmentを使用すると、React開発者ツールで<React.Fragment>として明示的に表示されます。一方、短縮記法のフラグメントは匿名の要素として表示されるため、デバッグ時に識別しづらい場合があります。

3. ネストしたフラグメント

特定の状況では、フラグメントをネストする必要があるかもしれません。この場合でも、React.Fragmentと短縮記法は同様に動作します。ただし、属性を持たせたい場合はReact.Fragmentを使用します。

まとめ

• 共通点:
  • どちらも複数の子要素をラップし、DOMに余分なノードを追加しない。
• React.Fragmentの特徴:
  • 属性（props）を指定できる（key属性など）。
  • 開発者ツールで名前付きで表示される。
• 短縮記法<></>の特徴:
  • コードを簡潔に記述できる。
  • 属性を指定できない。

使い分けのポイント

• 属性が不要な場合:
  • 短縮記法<></>を使用してコードを簡潔に。
• key属性や他の属性が必要な場合:
  • React.Fragmentを使用する。

参考情報

• React公式ドキュメント - フラグメント
• React公式ドキュメント - フラグメントの短縮記法