用語集に戻る
AI中級

Fragment

fragment

一言で言うと

余計な div を作らずに複数要素を返すラッパ。

もう少し詳しく

一言で言うと

余計な div を作らずに複数要素を返すラッパ。

もう少し詳しく

余計な div を作らずに複数要素を返すラッパ。IT エンジニアリングの現場で頻繁に登場する概念のひとつで、関連する仕組みやベストプラクティスと合わせて理解しておくと応用が利きます。

React コンポーネントは必ず単一のルート要素を返す必要があります。Fragment を使うと、不要な div を DOM に追加せずに複数の要素をひとまとめにして返せます。

実務でどう使うか

  • リストアイテムの返却 ──
  • を複数返すコンポーネントで親に余分な要素を挿入しない

  • テーブル行のラップ ── を返す場面で構造を壊さずに済む

  • 複数ルート要素が必要な場合 ── 兄弟要素をまとめて返したいときに <>... の短縮記法が使える
  • 関連する章

    Ch166 で詳しく学べます。

    関連する用語

    この用語を学べるコース

    この用語を実際に使ってみよう

    チョットデキルなら、5分のレッスンで実際にコードを書いて学べます。

    コース一覧を見る