React Native FlatListプログラミング：基本例から無限スクロール、Pull to Refreshまで
2025-05-31
FlatListとは？
React Nativeの FlatList は、大量のデータを効率的に表示するためのコンポーネントです。JavaScriptの配列（Array）のようなデータを受け取り、そのデータをリスト形式で画面にレンダリングします。
FlatListの重要な特徴
- キーの自動生成: 各アイテムに一意のキー（
keyプロパティ）を設定する必要がありますが、データの中に一意のIDがない場合でも、keyExtractorプロパティを使ってキーを生成できます。 - カスタマイズ性: 各アイテムのレンダリング方法、区切り線の表示、ヘッダーやフッターの追加、スクロール時の動作など、さまざまなカスタマイズが可能です。
- 基本的なリスト表示: シンプルなリスト表示を簡単に実装できます。データの配列と、各アイテムをどのように表示するかを定義するだけで済みます。
- パフォーマンス:
FlatListの最も重要な特徴はその高いパフォーマンスです。画面に表示されていないアイテムはレンダリングされないため、メモリの使用量を抑え、スムーズなスクロールを実現します。これは「遅延ロード」や「仮想化」と呼ばれる技術によるものです。
FlatListの基本的な使い方
FlatList を使用するには、主に以下のプロパティを設定します。
keyExtractor: 各アイテムの一意のキーを生成するための関数を指定します。データ内の特定のプロパティをキーとして使用したり、インデックスをキーとして使用したりできます。renderItem: 配列の各アイテムを受け取り、それをどのようにレンダリングするかを定義する関数を指定します。この関数は、各アイテムのデータ (item) とそのインデックス (index) を引数として受け取ります。data: 表示するデータの配列を指定します。
基本的なコード例
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const data = [
{ id: '1', name: 'アイテム 1' },
{ id: '2', name: 'アイテム 2' },
{ id: '3', name: 'アイテム 3' },
// ... その他のデータ
];
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.name}</Text>
</View>
);
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 24,
},
});
export default App;
この例では、data 配列の各オブジェクトを Item コンポーネントを使ってレンダリングしています。renderItem プロパティで各アイテムの表示方法を定義し、keyExtractor プロパティで各アイテムの id を一意のキーとして使用しています。
FlatList には、上記以外にも多くの便利なプロパティがあります。
onRefresh: Pull-to-refresh がトリガーされたときに呼び出される関数を指定します。refreshing: リストがリフレッシュ中かどうかを示すブール値を指定します（Pull-to-refresh の実装に使用します）。onEndReachedThreshold:onEndReachedが呼び出されるまでの残り距離の割合を指定します。onEndReached: リストの末尾近くまでスクロールされたときに呼び出される関数を指定します（無限スクロールの実装などに使用します）。ItemSeparatorComponent: 各アイテムの間に表示する区切り線のコンポーネントを指定します。ListFooterComponent: リストの末尾に表示するコンポーネントを指定します。ListHeaderComponent: リストの先頭に表示するコンポーネントを指定します。
よくあるエラーとトラブルシューティング
-
- 原因:
FlatListでレンダリングされる各アイテムに、一意のkeyプロパティが設定されていない場合に発生します。React Nativeは、このkeyを使って要素の変更、追加、削除を効率的に追跡します。 - 解決策:
keyExtractorプロパティを使用して、データ内の各アイテムから一意の値をキーとして抽出するようにします。例えば、アイテムオブジェクトにidプロパティがある場合は、keyExtractor={item => item.id}のように設定します。- データ内に一意のIDがない場合は、インデックスをキーとして使用することもできますが（
keyExtractor={(item, index) => index.toString()}）、アイテムの順序が変わる可能性がある場合には推奨されません。可能な限り、データに一意のIDを追加するか、UUIDなどの生成関数を使用して一意のキーを生成することを検討してください。
- 原因:
-
リストが空で何も表示されない
- 原因:
dataプロパティに空の配列が渡されている。dataプロパティがundefinedまたはnullである。renderItem関数が正しく定義されていない、または何も返していない。renderItem関数内で条件分岐があり、すべてのアイテムがその条件を満たしていない。
- 解決策:
dataプロパティに正しいデータ配列が渡されているか確認します。- APIからのデータ取得など非同期処理を行っている場合は、データがロードされる前に
FlatListがレンダリングされていないか確認します。必要に応じて、ローディング状態を表示するなどの処理を追加します。 renderItem関数がコンポーネントまたは表示したい要素をreturnしているか確認します。renderItem内の条件分岐が意図通りに動作しているか確認します。
- 原因:
-
スクロールがスムーズでない、またはカクつく
- 原因:
renderItemでレンダリングされるコンポーネントが複雑すぎる、または計算量の多い処理を行っている。- 画像などのアセットのロードに時間がかかっている。
- 不必要な再レンダリングが発生している。
- 解決策:
renderItem内のコンポーネントをできるだけ軽量化し、不要な処理を避けます。- 画像の遅延ロードやキャッシュの仕組みを導入します。
React.memoやshouldComponentUpdateなどの最適化手法を用いて、不必要な再レンダリングを防ぎます。getItemLayoutプロパティを実装することで、React Nativeがアイテムのサイズを事前に知ることができ、スクロールのパフォーマンスが向上する場合があります。特にアイテムの高さが固定されている場合に有効です。
- 原因:
-
onEndReachedが期待通りに動作しない- 原因:
onEndReached関数が設定されていない。onEndReachedThresholdの値が小さすぎる、または大きすぎる。- リストのコンテンツが短く、スクロールの余地がない。
- データの更新処理が非同期で行われており、
FlatListが再レンダリングされていない。
- 解決策:
onEndReachedプロパティに関数を設定しているか確認します。onEndReachedThresholdの値を調整して、適切なタイミングでonEndReachedが呼び出されるようにします。通常は 0.5 (リストの残り半分) 程度から試してみると良いでしょう。- リストに十分なアイテムがあるか確認します。
- データの更新後に
FlatListが再レンダリングされるように、状態管理を適切に行います。
- 原因:
-
アイテムのレイアウトが崩れる
- 原因:
renderItemでレンダリングされるコンポーネントのスタイル設定が不適切。- 動的なコンテンツによってアイテムの高さが変わり、他のアイテムとレイアウトが揃わない。
- 解決策:
StyleSheetを使用して、アイテムのスタイルを適切に定義します。- アイテムの高さが動的に変わる場合は、それを考慮したレイアウトを設計します。必要に応じて、
getItemLayoutを使用してアイテムの高さの概算値を伝えることも有効です。
- 原因:
-
Pull-to-refresh が動作しない
- 原因:
refreshingプロパティの制御が正しく行われていない。onRefresh関数が設定されていない。onRefresh関数内でデータの取得処理が完了してもrefreshingをfalseに設定していない。
- 解決策:
refreshingプロパティが、リフレッシュの状態に応じてtrueまたはfalseに正しく更新されるようにします。onRefreshプロパティに関数を設定し、その中でデータの再取得処理を行います。- データの取得処理が完了したら、必ず
refreshingをfalseに設定して、リフレッシュインジケーターを非表示にします。
- 原因:
トラブルシューティングのヒント
- 公式ドキュメントの参照: React Native の公式ドキュメントは、各コンポーネントのプロパティや使い方について詳しく解説しています。困ったときは、まず公式ドキュメントを参照することをおすすめします。
- シンプルな実装から: 問題が複雑な場合は、まず最小限のコードで
FlatListの基本的な表示ができるか試し、徐々に機能を追加していくと原因を特定しやすくなります。 - React Developer Tools: React Native Debugger などの開発ツールを使用すると、コンポーネントのpropsやstateの状態、再レンダリングの状況などを詳しく調べることができます。
console.logの活用:renderItem関数や、データの流れの中でconsole.logを使用して、データが正しく渡されているか、各アイテムがどのようにレンダリングされているかなどを確認します。
基本的なリスト表示
これは、最も基本的な FlatList の使い方を示す例です。簡単なデータ配列を data プロパティに渡し、renderItem で各アイテムをレンダリングします。
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const data = [
{ id: '1', title: '最初のアイテム' },
{ id: '2', title: '2番目のアイテム' },
{ id: '3', title: '3つ目のアイテム' },
// ... その他のデータ
];
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 24,
},
});
export default App;
ポイント:
keyExtractor: 各アイテムの一意のキーを生成する関数。ここでは、各アイテムのidプロパティをキーとして使用しています。renderItem: 各データアイテムを受け取り、表示するコンポーネント (Item) を返す関数。{ item }のように分割代入でアイテムオブジェクトを受け取ります。data: 表示するデータの配列。各オブジェクトは一意のidを持つことが推奨されます。
区切り線の追加
ItemSeparatorComponent プロパティを使用すると、各アイテムの間に区切り線を追加できます。
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
// ... (data 配列は上記と同じ)
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
const Separator = () => (
<View style={styles.separator} />
);
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
ItemSeparatorComponent={Separator}
/>
</View>
);
};
const styles = StyleSheet.create({
// ... (container, item, title スタイルは上記と同じ)
separator: {
height: 1,
backgroundColor: '#ccc',
marginHorizontal: 16,
},
});
export default App;
ポイント:
ItemSeparatorComponent: 区切り線を表示するためのコンポーネント (Separator) を指定します。
ヘッダーとフッターの追加
ListHeaderComponent と ListFooterComponent プロパティを使用すると、リストの先頭と末尾にコンポーネントを追加できます。
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
// ... (data 配列と Item コンポーネントは上記と同じ)
const ListHeader = () => (
<View style={styles.headerFooter}>
<Text>リストのヘッダー</Text>
</View>
);
const ListFooter = () => (
<View style={styles.headerFooter}>
<Text>リストのフッター</Text>
</View>
);
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
ListHeaderComponent={ListHeader}
ListFooterComponent={ListFooter}
/>
</View>
);
};
const styles = StyleSheet.create({
// ... (container, item, title スタイルは上記と同じ)
headerFooter: {
backgroundColor: '#eee',
padding: 20,
alignItems: 'center',
},
});
export default App;
ポイント:
ListFooterComponent: リストの末尾に表示するコンポーネント (ListFooter) を指定します。ListHeaderComponent: リストの先頭に表示するコンポーネント (ListHeader) を指定します。
無限スクロール (データの追加ロード)
onEndReached プロパティと onEndReachedThreshold プロパティを使用すると、リストの末尾近くまでスクロールされたときに処理を実行し、追加のデータをロードすることができます。
import React, { useState } from 'react';
import { FlatList, StyleSheet, Text, View, ActivityIndicator } from 'react-native';
const initialData = Array.from({ length: 20 }, (_, i) => ({ id: String(i + 1), title: `アイテム ${i + 1}` }));
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
const App = () => {
const [data, setData] = useState(initialData);
const [loadingMore, setLoadingMore] = useState(false);
const [page, setPage] = useState(1);
const loadMoreData = () => {
if (!loadingMore) {
setLoadingMore(true);
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, i) => ({
id: String(data.length + i + 1),
title: `追加アイテム ${data.length + i + 1}`,
}));
setData([...data, ...newData]);
setLoadingMore(false);
setPage(page + 1);
}, 1500); // 1.5秒後に新しいデータを追加 (APIリクエストをシミュレート)
}
};
const renderFooter = () => {
if (loadingMore) {
return <ActivityIndicator size="large" color="#0000ff" />;
}
return null;
};
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5} // リストの残り半分までスクロールしたら loadMoreData を呼び出す
ListFooterComponent={renderFooter}
/>
</View>
);
};
const styles = StyleSheet.create({
// ... (container, item, title スタイルは上記と同じ)
});
export default App;
ポイント:
ListFooterComponent: ローディング中に表示するインジケーター (ActivityIndicator) を表示します。onEndReachedThreshold:onEndReachedが呼び出されるまでの残り距離の割合 (0 から 1 の値)。0.5 は、リストの残り半分までスクロールしたら呼び出すことを意味します。onEndReached: リストの末尾近くまでスクロールされたときに呼び出される関数 (loadMoreData) を指定します。
Pull-to-refresh
refreshing プロパティと onRefresh プロパティを使用すると、Pull-to-refresh の機能を実装できます。
import React, { useState, useCallback } from 'react';
import { FlatList, StyleSheet, Text, View, RefreshControl } from 'react-native';
const initialData = Array.from({ length: 20 }, (_, i) => ({ id: String(i + 1), title: `アイテム ${i + 1}` }));
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
const App = () => {
const [data, setData] = useState(initialData);
const [refreshing, setRefreshing] = useState(false);
const onRefresh = useCallback(() => {
setRefreshing(true);
// ここでデータの再取得などの処理を行う (APIリクエストなど)
setTimeout(() => {
const newData = Array.from({ length: 20 }, (_, i) => ({ id: String(i + 21), title: `リフレッシュされたアイテム ${i + 1}` }));
setData(newData);
setRefreshing(false);
}, 1500); // 1.5秒後にリフレッシュ完了
}, []);
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
/>
</View>
);
};
const styles = StyleSheet.create({
// ... (container, item, title スタイルは上記と同じ)
});
export default App;
ポイント:
RefreshControl:FlatListのrefreshControlプロパティに渡すコンポーネント。refreshingとonRefreshプロパティを制御します。onRefresh: Pull-to-refresh がトリガーされたときに呼び出される関数 (onRefresh)。この中でデータの再取得処理を行い、処理が完了したらsetRefreshing(false)を呼び出してリフレッシュインジケーターを非表示にします。refreshing: リフレッシュの状態を示すブール値の state。
ScrollView の使用
- 使用例:
- 欠点:
- 大量のアイテムを扱う場合、すべてのアイテムを一度にレンダリングするため、パフォーマンスが著しく低下し、メモリ消費量が増加します。
- 遅延ロードや仮想化の機能がないため、非常に長いリストでは動作が重くなります。
- 利点:
- シンプルなリストや、アイテム数が少ないリストの表示に手軽です。
- 複雑なレイアウトや、リスト表示と他の要素が混在するような画面に適しています。
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
const data = Array.from({ length: 5 }, (_, i) => ({ id: String(i + 1), title: `アイテム ${i + 1}` }));
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
const App = () => {
return (
<ScrollView style={styles.container}>
{data.map(item => (
<Item key={item.id} item={item} />
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 24,
},
});
export default App;
注意点: 大量のデータを扱うリストには絶対に ScrollView を使用しないでください。
SectionList の使用
- 使用例:
- 欠点:
- データの構造が特定の形式（セクションの配列、各セクション内にデータ配列とヘッダー情報）である必要があります。
- 単純なリスト表示にはやや複雑になります。
- 利点:
- データを意味のあるグループに分けて表示するのに適しています（例: アルファベット順の連絡先リスト、日付ごとのイベントリストなど）。
- 各セクションごとにヘッダーやフッターをカスタマイズできます。
FlatListと同様に、表示範囲外のアイテムはレンダリングされないため、ある程度のパフォーマンスを維持できます。
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
const sections = [
{
title: 'セクション A',
data: [{ id: '1', name: 'アイテム A1' }, { id: '2', name: 'アイテム A2' }],
},
{
title: 'セクション B',
data: [{ id: '3', name: 'アイテム B1' }, { id: '4', name: 'アイテム B2' }, { id: '5', name: 'アイテム B3' }],
},
];
const Item = ({ item }) => (
<View style={styles.item}>
<Text style={styles.itemName}>{item.name}</Text>
</View>
);
const SectionHeader = ({ section: { title } }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{title}</Text>
</View>
);
const App = () => {
return (
<View style={styles.container}>
<SectionList
sections={sections}
keyExtractor={item => item.id}
renderItem={({ item }) => <Item item={item} />}
renderSectionHeader={({ section }) => <SectionHeader section={section} />}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
},
sectionHeader: {
backgroundColor: '#ddd',
padding: 10,
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
},
item: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
itemName: {
fontSize: 16,
},
});
export default App;
ポイント:
renderSectionHeader: 各セクションのヘッダーをレンダリングする関数。sections: セクションデータの配列。各セクションはtitleとdataプロパティを持ちます。dataはそのセクションのアイテム配列です。
カスタム実装 (高度なケース)
非常に特殊なリスト表示の要件がある場合や、高度なパフォーマンス最適化が必要な場合は、ScrollView や他の基本的なコンポーネントを組み合わせて、独自のリスト表示ロジックを実装することも可能です。
- 例:
- 特定の条件に基づいてアイテムのレンダリングを完全に制御したい場合。
- 高度な仮想化技術を独自に実装したい場合。
- リストアイテムのレイアウトが非常に複雑で、標準のコンポーネントでは対応しきれない場合。
ただし、カスタム実装は一般的に複雑で、開発コストや保守コストが高くなるため、特別な理由がない限りは FlatList や SectionList の利用を検討すべきです。
FlatList を引き続き使用する場合の最適化
FlatList 自体も、様々なプロパティを通じてパフォーマンスを最適化できます。代替手段を検討する前に、以下の点を再確認することをおすすめします。
- 複雑な計算の遅延実行: 各アイテムのレンダリング内で重い処理を行う場合は、必要に応じて遅延実行やメモ化を検討します。
- 画像の最適化: リスト内で画像を表示する場合は、サイズ最適化やキャッシュ戦略を検討します。
shouldComponentUpdateやReact.memoの使用:renderItemで使用するコンポーネントの不要な再レンダリングを防ぎます。getItemLayoutの使用: アイテムの高さが固定されている場合に、レンダリング前に高さを知らせることでパフォーマンスが向上します。keyExtractorの適切な使用: 一意で安定したキーを提供することが重要です。
FlatList は、React Native におけるリスト表示の標準的で強力な選択肢です。代替手段としては、シンプルなリストや少量データには ScrollView、セクション化されたデータには SectionList が考えられます。非常に特殊なケースではカスタム実装も可能ですが、一般的には FlatList の最適化を検討することが推奨されます。