このページの目次

Fragmentとは？

読み方：fragment

最終更新：2026/08/18

3秒でわかる

React で余計な div を増やさずに複数の要素をまとめて返すための入れ物。テーブルやリストの構造を壊さずにコンポーネントを分割できます。

もう少し詳しく

どういうものか

Fragment は React のコンポーネントが複数の要素を返すときに使う、DOM に出力されない入れ物です。... と書くほか、省略記法の <>... が広く使われます。JSX は 1 つのルート要素しか返せないという制約があり、その制約を満たしつつ実際の HTML には何も足さないのが Fragment の役割です。

なぜ必要か

制約を回避するだけなら

で囲めば済みます。しかしテーブルの中に div を置くと HTML として不正になり、ブラウザが要素を勝手に外へ追い出します。Flexbox や Grid のレイアウトでも、親と子の間に div が 1 枚挟まるだけで並び方が崩れます。CSS セレクタの直接子要素指定も効かなくなります。Fragment はこうした「囲みたくないが囲まざるを得ない」場面を解消します。

具体例

function TableRow({ item }) {
  return (
    <>
      <td>{item.name}</td>
      <td>{item.price}円</td>
    </>
  );
}

function List({ items }) {
  return (
    <dl>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

つまずきやすいところ

省略記法の <> には key を渡せない。map() の中で使うときはと正式な書き方に戻す必要がある

見た目の余白がおかしいときに Fragment のせいだと疑ってしまうが、Fragment は DOM に何も出さないので CSS には一切影響しない。原因は別の要素にある

<> は属性を一切受け取れないので、className を付けたい時点で Fragment ではなく本物の要素が必要だと判断する

似た用語との違い

はレイアウトのために意味を持たせず要素を囲む箱で、DOM に残ります。Fragment は DOM に残りません。開発者ツールの Elements タブに出てくるかどうかが最も分かりやすい見分け方です。

覚え方

「透明な袋」と覚えます。中身をまとめて運べますが、置いた先では袋そのものは見えません。

知識のつながり

サイドバーと同じ推奨ルート・関連語を、まとめて確認できます。

現在地FragmentAI

別方向から理解する用語

コンポーネント見た目と振る舞いをひとまとめにした UI の部品。同じ形を何度も書き写さずに済み条件付きレンダリング条件によって画面に出す要素を切り替える書き方。ログイン状態や読み込み中かどうかで

LEARN BY DOING

この用語を、教材で使ってみる

直接関連する編と、その編を含むコースです。用語だけで終わらず、ブラウザ上で実際に手を動かせます。

このコースが入っている学習分野

React

小さな部品から、複数ページを持つアプリまで。

公開中 8コース・148レッスン

学習React入門JSX・コンポーネント・props

学習state・フォーム・リスト入力やクリックに応じてUIを変える

学習useEffect・コンポーネント設計副作用と部品の責務を整理する

学習TypeScript・APIReactとAPIを型で安全に扱う

ほか4コース

学ぶ順番を見る

この用語を扱うコース

コース

実際に学ぶ

React入門：JSX・コンポーネント・props

Reactと宣言的UI、JSX、コンポーネント、props、children、ファイル分割を学ぶ全22レッスンの入門コースです。モダンJavaScript復習7レッスンは、既習または診断合格で免除できます。最後はプロフィールカードを再利用可能なコンポーネントへ分割します。stateやフォームは次のコースで扱います。

22レッスン

学んでみる