【ITニュース解説】React Native: FlatList or SectionList, which one to use in your app?

React Nativeでモバイルアプリを開発する際、ユーザーがアプリ内で最も多く触れる要素の一つに「リスト表示」がある。ソーシャルメディアのタイムライン、チャット履歴、音楽ライブラリなど、多くのアプリは終わりなく続くコンテンツのリストで構成されている。これらのリストを大量のデータがあってもスムーズにスクロールさせるためには、高度な技術が不可欠となる。

React Nativeには、このような大規模なデータを効率的に表示するための主要なコンポーネントとして、「FlatList」と「SectionList」の二つが用意されている。これらは「仮想化リスト」という技術に基づいて設計されており、アプリの快適な操作性を実現する上で非常に重要な役割を果たす。

まず、この「仮想化リスト」とは何かを理解しよう。仮想化リストは、画面に表示されているアイテムのみを描画し、見えていない部分のアイテムは描画しないというフロントエンドのパフォーマンス最適化技術である。リスト内のすべての要素を一度に作成するのではなく、ほとんどのアイテムは「仮想的な状態」に保たれ、ユーザーがスクロールするたびに、画面に表示される新しいアイテムだけが描画され、画面外に出たアイテムはメモリから解放されたり、再利用されたりする。これにより、メモリの使用量を大幅に削減し、特に大規模なデータセットを扱う際の描画速度を向上させることができるのだ。

では、具体的に「FlatList」から見ていこう。 FlatListは、一つの次元で構成された単純なリスト、つまり「行」としてアイテムを並べるリストを表示するために使われる。例えば、メニュー項目の一覧や、検索結果の羅列など、グループ分けの必要がない場面で活躍する。 FlatListを使うには、最低限二つのプロパティを設定する必要がある。一つ目は「data」プロパティで、これは表示したいアイテムを格納したシンプルな配列を渡す。例えば、料理のメニュー項目が複数入った配列などだ。二つ目は「renderItem」プロパティで、これはdata配列から一つ一つのアイテムを取り出し、それを実際に画面上にどのように表示するかを定義する関数である。この関数を使って、各アイテムの見た目を自由にデザインできる。 また、リストを効率的に動作させるためによく使われるのが「keyExtractor」というプロパティだ。これは各アイテムにユニークな識別子、つまり「キー」を与えることで、React Nativeがリストのアイテムが追加、削除、または移動されたときに、どのアイテムが変更されたのかを素早く特定できるようにする。これにより、リストの描画パフォーマンスが向上する。

FlatListには、他にもリストの見た目や動作をカスタマイズするための様々なプロパティが用意されている。 「ItemSeparatorComponent」は、各アイテムの間に表示する区切り線を指定できるプロパティだ。例えば、各メニュー項目の間に薄い線を引きたい場合に便利だ。「horizontal」プロパティをtrueに設定すると、リストは縦方向ではなく、横方向にスクロールするようになる。 「ListHeaderComponent」はリスト全体の一番上に表示されるコンポーネントで、検索バーやフィルターを設置するのに適している。同様に、「ListFooterComponent」はリストの一番下に表示されるコンポーネントで、データの読み込み中を示すスピナーや「これ以上アイテムはありません」といったメッセージを表示するのに役立つ。

次に、「SectionList」について説明しよう。 SectionListは、アイテムを「セクション」というグループに分けて表示したい場合に最適なコンポーネントである。例えば、レストランのメニューを「メイン料理」「サイドメニュー」「デザート」といったカテゴリごとに分類して表示したい場合や、連絡先を頭文字ごとにグループ化して表示する場合などがこれに当たる。FlatListと同様に仮想化リストの恩恵を受けるが、グループ化のための構造と、セクションヘッダーの固定表示といった追加機能を提供する。 SectionListも、最低限二つのプロパティが必要となる。一つ目は「sections」プロパティで、これは「セクション」の配列を渡す。各セクションオブジェクトは、セクションのタイトルとそのセクションに属するアイテムの配列を含む構造になっている。二つ目はFlatListと同様に「renderItem」プロパティで、各セクション内のアイテムをどのように表示するかを定義する。 SectionListには、セクションを扱うための独自の重要なプロパティがある。「renderSectionHeader」は、各セクションのタイトル（例：「メイン料理」）を画面上に表示するためのコンポーネントを定義する関数だ。また、「stickySectionHeadersEnabled」プロパティをtrueに設定すると、ユーザーがリストをスクロールした際に、現在のセクションヘッダーが画面の上部に固定され、そのセクション内のすべてのアイテムが表示されるまでそこに留まるという便利な機能が実現できる。これは、長いリストでユーザーが今どのセクションを見ているのかを常に把握できるようにするのに役立つ。 さらに、「renderSectionFooter」プロパティを使って各セクションの最後に表示するコンポーネントを定義したり、「SectionSeparatorComponent」を使ってセクション全体の間に区切りを入れたりすることも可能だ。

FlatListとSectionListは、どちらもReact Nativeの基盤となる「VirtualizedList」というコンポーネントの上に構築されているため、多くの強力な共通プロパティを持っている。これらは、リストの描画、パフォーマンス、ユーザーとのインタラクションを制御するために利用される。 例えば、「initialNumToRender」は、リストが最初に表示されたときにいくつのアイテムを描画するかを決定する。この値を調整することで、アプリの起動時の負荷と、最初のスクロールの滑らかさのバランスを取ることができる。 「windowSize」は、メモリ内に保持するアイテムのスクリーン画面分の数を指定し、スクロールの滑らかさとメモリ使用量のバランスを調整するのに役立つ。 「removeClippedSubviews」は、特にAndroidでパフォーマンスを向上させるために、画面外にスクロールされた行をメモリから解放する設定だ。 「getItemLayout」は、各アイテムの固定の高さや幅を事前に提供することで、リストがアイテムのサイズを測定する手間を省き、スクロールパフォーマンスを向上させる。 また、リストを下に引っ張って更新する「プル・トゥ・リフレッシュ」機能を実装するための「refreshing」と「onRefresh」プロパティや、リストが一番下近くに到達したときに新しいデータを読み込む「無限スクロール」機能を実現するための「onEndReached」と「onEndReachedThreshold」プロパティも共通で用意されている。 これらの共通プロパティによって、FlatListとSectionListは、画面に見えているアイテムだけを「遅延レンダリング」し、画面外に出たアイテムは非表示にしたり削除したりすることで、大量のデータを扱うモバイルアプリで非常に高性能なリスト表示を実現している。

では、結局どちらのコンポーネントを選べば良いのだろうか。 「FlatList」を選ぶべきなのは、表示したいデータが単一でグループ化されていない場合だ。例えば、ニュースフィード、チャットの履歴、検索結果のように、アイテムがひたすら連続して並んでいるような状況に適している。セクションヘッダーのような特別なUIが必要なく、最もシンプルな構造で最大のパフォーマンスを追求したい場合に最適である。 一方、「SectionList」を選ぶべきなのは、データを特定の基準（例えば、アルファベット順、日付順、カテゴリ別）でグループ化して表示する必要がある場合だ。セクションヘッダーを画面上部に固定表示したい場合や、セクションの間に特別なビジュアルやロジック（区切り線など）が必要な場合に非常に強力なツールとなる。

このように、FlatListとSectionListはそれぞれ異なるユースケースに特化しているが、パフォーマンスを調整するための共通のプロパティを多く持っている。それぞれの特性と能力を理解することで、アプリの要件に合った適切なリストコンポーネントを選択し、どんなデバイスでも数千ものアイテムがあっても、高速でスムーズなスクロールを実現できる堅牢なモバイルアプリを開発できるだろう。