React NativeのScrollView長短所とコード

皆さん、こんにちは。

今日は「React NativeのScrollView長短所」についてご紹介します。

React Native のScrollViewは、単純なスクロール可能領域を作成するのに便利ですが、同時に大量データを扱う場合には注意すべき点があります。

ScrollViewは、全ての子要素を一度にレンダリングする単純なスクロールコンテナです。子要素は事前に全て用意されている必要があり、親コンポーネントがマウントされた時点で全てメモリに読み込まれます。

今回はScrollView の長所と短所をまとめて解説します。

長所

• 実装がシンプル
  でコンテンツを包むだけで簡単にスクロール機能を実装できます。

• 柔軟なレイアウト
  縦スクロールや横スクロール（horizontal={true}）を簡単に切り替えられます。
  フォームなど、コンテンツ量が比較的少なく縦方向に長い画面を作りたいときに有用です。

• すべての要素が常に描画されるので扱いやすい
  遅延描画や要素の入れ替えといった考慮がいらないため、小～中規模のコンテンツでは管理が楽です。

• 追加ライブラリ不要
  React Native 標準のコンポーネントなので、インストールや設定の手間がありません。

短所

• パフォーマンスの低下（大量要素のレンダリング）
  ScrollView は、画面に見えていない要素も含めて全てを一度にレンダリングします。アイテムが多い場合、描画・メモリの負荷が大きくなり、アプリが重くなります。

• メモリ使用量の増大
  特に画像など容量の大きい要素を多数含む場合、必要以上にメモリを消費する可能性があります。

• 大量のリスト表示には不向き
  大量のアイテムを表示する場合は、要素の仮想化（VirtualizedList）を行う FlatList や SectionList を使う方がパフォーマンスが向上します。

• スクロール位置の制御が複雑になる場合がある
  画面の特定位置へのスクロールや、動的に要素が増減する場合に、手動で scrollTo() や scrollToEnd() を呼び出すなど制御が必要になることがあります。

コード例

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.contentContainer}>
        {/* スクロール可能なコンテンツ */}
        {[...Array(30)].map((_, index) => (
          <Text style={styles.item} key={index}>
            Item {index + 1}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  contentContainer: {
    padding: 20,
  },
  item: {
    fontSize: 16,
    marginVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

この例では 30 個の項目を単純にスクロール表示しています。アイテム数が増えるとメモリとパフォーマンスに影響が出るため、必要に応じて FlatList への切り替えを検討しましょう。

まとめ

• ScrollView

  • 長所: 実装が簡単で、シンプルにスクロールコンテンツを表示できる。
  • 短所: 全要素を一度にレンダリングするため、大量のデータには不向きでパフォーマンスやメモリ消費に影響が出る。

• 大量のアイテムやリスト表示をする場合
  FlatList や SectionList を使用して、必要な要素だけをレンダリングする “仮想化” を利用することが一般的です。

もし画面に表示する要素が 100 件以下程度であれば ScrollView でも問題ないケースが多いですが、さらに多い場合は FlatList などを検討するとよいでしょう。

参考
https://zenn.dev/woodstock_tech/articles/14011577c33f90

今日は以上です。

ありがとうございました。
よろしくお願いいたします。