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

React Fragmentを使うと、コンポーネントは余分な <div> で包まずに複数の要素を返せます。最初の要素の前に <>、最後の要素の後に </> を書くと、Reactは要素を親の中に直接置き、ページにはフラグメント自身のノードは残りません。

function Greeting({ name }) {
    return (
        <>
            <h2 style={{ margin: 0 }}>Hello, {name}</h2>
            <p style={{ marginTop: 4 }}>You have 3 new messages.</p>
        </>
    );
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Linus" />
        </div>
    );
}

それぞれの Greeting は見出しと段落を並べて返します。<> と </> の行を削除すると、プレビューには代わりにビルドエラーが表示されます。関数が2つの値を返そうとするからです。

コンポーネントにルートが1つ必要な理由

JSXは関数呼び出しをより見やすく書く方法です。<h2>Hi</h2> はおおよそ jsx('h2', { children: 'Hi' }) という1つの式にコンパイルされます。return 文が返せるのは1つの値なので、何にも囲まれていない2つの兄弟タグは return a b と書くようなものです。コンパイラは「Adjacent JSX elements must be wrapped in an enclosing tag」で止まります。

フラグメントが登場する前は、ラッパーの <div> で解決していました。それでも動きますが、divは本物の要素です。DOMに現れ、CSSのレイアウトに参加し、そもそも子として受け付けない親もあります。フラグメントはルートを1つにするルールを満たした後、消えてしまいます。

何も追加されないことは確かめられます。次の例は同じ2つの項目をフラグメントとdivで描画し、それぞれのコンテナの直接の子を数えます。

import { useEffect, useRef } from 'react';

function WithFragment() {
    return (
        <>
            <span>A</span>
            <span>B</span>
        </>
    );
}

function WithDiv() {
    return (
        <div>
            <span>A</span>
            <span>B</span>
        </div>
    );
}

export default function App() {
    const first = useRef(null);
    const second = useRef(null);

    useEffect(() => {
        console.log('fragment box children:', first.current.children.length);
        console.log('div box children:', second.current.children.length);
    }, []);

    return (
        <div>
            <div ref={first}><WithFragment /></div>
            <div ref={second}><WithDiv /></div>
        </div>
    );
}

コンソールには、フラグメントでは2つのspanで 2、divではそれらを包むdivで 1 と出力されます。flexやgridのコンテナでは、この違いによってspanが個別の項目として配置されるか、1つにまとめられるかが決まります。

短い構文とFragmentコンポーネント

フラグメントの書き方は2つあり、どちらも同じものにコンパイルされます。

import { Fragment } from 'react';

// Short syntax, no import needed
<>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</>

// Long form
<Fragment>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</Fragment>

ほとんどの場所では <>...</> を使ってください。<Fragment> を使うのは、フラグメントに key が必要なときだけです。短い構文は属性を受け取れないので、<key={id}> は有効なJSXではありません。古いコードでは <React.Fragment> を見かけることもありますが、デフォルトの React インポートを通じて参照した同じコンポーネントです。

リストでのkey付きフラグメント

map でリストを描画するとき、Reactがレンダリング間で追跡できるように、各項目に key が必要です（理由はリストとkeyのページで説明しています）。各項目が1つの要素ではなく要素のグループなら、keyはフラグメントに付けるので、長い形が必要です。

典型的なのは説明リストです。各項目は <dt> と <dd> で、<dl> はそれらを直接含むべきです。

import { Fragment, useState } from 'react';

const initialTerms = [
    { id: 1, term: 'Component', meaning: 'A function that returns UI.' },
    { id: 2, term: 'Prop', meaning: 'An input a parent passes to a component.' },
    { id: 3, term: 'State', meaning: 'Data a component remembers between renders.' },
];

export default function App() {
    const [terms, setTerms] = useState(initialTerms);

    return (
        <div>
            <dl>
                {terms.map((t) => (
                    <Fragment key={t.id}>
                        <dt style={{ fontWeight: 600 }}>{t.term}</dt>
                        <dd style={{ marginBottom: 8 }}>{t.meaning}</dd>
                    </Fragment>
                ))}
            </dl>
            <button onClick={() => setTerms([...terms].reverse())}>Reverse</button>
        </div>
    );
}

Reverseをクリックすると、各組が独自のkeyを持っているので、組ごと丸ごと入れ替わります。各組をラッパーの <div> で囲んでもkeyは付けられ、dl の中では有効なHTMLですが、フラグメントなら避けられる3つ目の階層がマークアップに入ります。

テーブルの中のフラグメント

余計なラッパーが一番害になるのはテーブルです。<tr> は直接の子として <td> と <th> のセルを期待します。複数のセルを返すコンポーネントがそれを <div> で包むと、ブラウザはdivを1つの奇妙なセルとして扱い、中のセルはヘッダーと揃わなくなります。

const cell = { border: '1px solid #ccc', padding: '4px 8px' };

function CellsInDiv() {
    return (
        <div>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </div>
    );
}

function CellsInFragment() {
    return (
        <>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </>
    );
}

export default function App() {
    return (
        <table style={{ borderCollapse: 'collapse' }}>
            <thead>
                <tr>
                    <th style={cell}>Item</th>
                    <th style={cell}>Price</th>
                    <th style={cell}>Stock</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style={cell}>Pen (div)</td>
                    <CellsInDiv />
                </tr>
                <tr>
                    <td style={cell}>Pen (fragment)</td>
                    <CellsInFragment />
                </tr>
            </tbody>
        </table>
    );
}

フラグメントの行では、価格がPriceの下に、在庫がStockの下にあります。divの行では両方のセルがPriceの列に押し込まれ、Stockの列は空です。開発環境ではReactが <div> は <tr> の子になれないという警告も記録しますが、プレビューは本番ビルドのように動くのでそのチェックは省かれ、ここでは崩れたレイアウトが見えます。サーバーレンダリングでは、ブラウザのHTMLパーサーが場違いなdivを移動させるので、同じ間違いがハイドレーションエラーを起こすこともあります。

同じルールは、<li> 要素を含むべき <ul> や <ol>、<option> 要素を含むべき <select> にも当てはまります。そうした親の中に直接置くべき部品をコンポーネントが返すときは、フラグメントを返してください。

フラグメントか配列か

コンポーネントは要素の配列を返すこともでき、Reactはフラグメントと同じように順番に描画します。Reactは配列をリストとして扱うので、返す配列の各要素には map の出力と同じく独自のkeyが必要です。

function Cells() {
    return [<td key="price">$4</td>, <td key="stock">In stock</td>];
}

これでも動きますが、より煩雑です。要素の間にカンマが入り、それぞれにkeyが必要で、マークアップが大きくなると角かっこを見落としやすくなります。決まった要素のグループにはフラグメントを使い、配列はデータを map した結果という本来の用途に取っておきましょう。

フラグメントにできないこと

フラグメントは要素を描画しないので、クラス、スタイル、イベントハンドラ、refを付ける場所がありません。<Fragment className="row"> は何の役にも立たず、Reactがフラグメントから読むpropは key だけです。グループにスタイルを付けたり、クリックを受け取ったりしたいなら、結局は本物の要素が必要です。それで問題ありません。行をまとめる <tbody> やリスト項目を入れる <li> のように、その場所で有効な要素を選んでください。

フラグメントは要素が使える場所ならどこでも使えます。条件付きレンダリングの中でも使え、{show && <>...</>} はグループ全体を一度に表示したり隠したりします。