FlatListでリストをレンダリングするにはどうしますか?

Question

Accepted Answer

**FlatList**はReact Nativeの**スクロール可能なデータリスト**を効率的にレンダリングするコンポーネントです。アイテムを**遅延ロード**（表示されているもののみ）し、長いリストに対して高いパフォーマンスを発揮します。ScrollViewでデータをマップするよりはるかに優れています。 ## FlatList — 効率的なリスト ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatListは**data**配列、**renderItem**関数（各アイテムをレンダリング）、および**keyExtractor**（一意のキー）を受け取り、アイテムを効率的にレンダリングします。 ## FlatListを使う理由（ScrollView + mapではなく） ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## 便利なFlatListの機能 ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## なぜ重要なのか FlatListの理解は必須です。なぜなら、**データリストの表示はアプリケーションにおける基本的なニーズ**であり、FlatListはReact Nativeでこれを行うための標準的で高性能なアプローチだからです。これは必ず習得すべき知識です。ほぼすべてのアプリケーションはリスト（フィード、メッセージ、検索結果など）を表示しており、これを効率的に行うことは重要です。重要な洞察は、**FlatListはアイテムを遅延ロード**（仮想化によって表示されているもののみ、スクロール時にリサイクル）するということです。これにより長いリストに対して高いパフォーマンスが実現されます。対照的に、**ScrollViewで`data.map()`を使用する**という一般的な誤りは、すべてのアイテムを一度にレンダリング（画面外のものも含む）するため、長いリストではパフォーマンス低下とメモリ問題が発生します。 **実質的なリストに対してはFlatListを使用する**こと（ScrollViewは小さく固定されたコンテンツのみに使用）を理解することは重要な実践知識であり、実際のパフォーマンス問題を防ぎます。基本的な使用法を理解すること（`data`配列、`renderItem`関数、一意のキー用の`keyExtractor`）はリストのレンダリングに必要です。 **便利な機能**を理解すること — `onEndReached`（無限スクロール/ページネーション、エンド近くでのデータ読み込み — 非常に一般的なニーズ）、プルして更新、ヘッダー/フッター/セパレータコンポーネント、グリッドとホリゾンタルレイアウト、およびグループ化されたリスト用のSectionList — はアプリケーションが持つ一般的なリスト要件をカバーします。リストを効率的に表示することはほぼ全世界的なアプリケーション要件であり、FlatList（その遅延レンダリング/仮想化機能により）は標準的で高性能なReact Nativeソリューションです。素朴なScrollView+mapアプローチよりはるかに優れています。そのため、FlatListの理解は必須であり、頻繁に使用されるReact Native知識です — データリストを表示するためにほぼすべてのアプリで使用されるコアコンポーネントであり、その効率的な遅延レンダリングと機能（無限スクロールやプルして更新など）の理解は、高性能で機能的なリストを構築するために基本的であり、React Native開発の標準的なスキルです。