ScrollView — 概要、スクロールコンテナとReact Native

React NativeのScrollViewとは

ScrollViewは、コンテンツをスクロール可能なコンテナで包むReact Nativeコンポーネントです。コンテンツが画面の境界を超える場合、ユーザーは垂直または水平にスクロールできます。ScrollViewはマウント時にすべての子要素をレンダリングします。画面に表示されるかどうかに関係ありません。

FlatListが表示されている要素のみをレンダリングする（遅延レンダリング）のとは異なり、ScrollViewは即座にすべてのネイティブビューを作成します。これにより、ScrollViewはフォーム、設定ページ、1画面の商品カードなど、子要素の数が少ない（20〜30まで）か、正確な数が事前にわからない場合に便利です。

React Native Using ScrollView、2024によると、ScrollViewはネストされたスクロール（ScrollView内のScrollViewなど）、端に達したときのバウンス効果、スクロールインジケータ、スナップ位置決め、ジェスチャ処理をサポートしています。iOSでは、ScrollViewはcontentInsetAdjustmentBehaviorを通じてSafeAreaパディングを自動的に追加します。

ScrollViewコンポーネントのプロパティとAPI

ScrollViewは、スクロール動作、外観、インタラクティビティを制御するための豊富なプロパティセットを提供します。主要なグループを見てみましょう：スクロール制御、視覚設定、イベント、プラットフォーム固有の機能。

方向とスクロール制御

horizontal — スクロール方向を垂直（デフォルト）から水平に切り替えます。scrollEnabled — 必要に応じてスクロールを無効にします。showsVerticalScrollIndicatorとshowsHorizontalScrollIndicatorはスクロールインジケータの表示を制御します。bounces（iOS）はコンテンツの端に達したときのバウンス効果を有効/無効にします。

ScrollViewイベント

メインイベントはonScrollで、スクロールのたびに発生し、nativeEventを含むオブジェクトを渡します。これにはcontentOffset（現在位置）、contentSize（コンテンツサイズ）、layoutMeasurement（表示領域のサイズ）が含まれます。onMomentumScrollEndは慣性スクロールの完了後に発生します。onScrollEndDrag — ユーザーが画面から指を離したときに発生します。これらのイベントは、無限スクロール、パララックス効果、遅延読み込みの実装に使用されます。

refによるプログラム制御

ScrollViewはrefを介したプログラム制御のためのメソッドを提供します：scrollTo({x、y、animated})は指定された座標にスクロールし、scrollToEnd({animated})はコンテンツの最後までスクロールし、flashScrollIndicators()は一時的にスクロールインジケータを表示します。

const scrollRef = useRef(null);

// 先頭にスクロール
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// 末尾にスクロール
scrollRef.current.scrollToEnd({ animated: true });

スクロールのプログラム制御は、チャット（最新メッセージへの自動スクロール）、フォーム（エラーフィールドへのスクロール）、カルーセル（プログラムによるスワイプ）でよく使用されます。

ScrollViewとFlatListの違い

ScrollViewとFlatListの選択は、React Nativeにおける重要なアーキテクチャ上の決定の1つです。両方のコンポーネントがスクロールを提供しますが、根本的に異なるレンダリング戦略を使用します。ScrollViewはすべてを一度にレンダリングし、FlatListは表示されている要素のみをレンダリングします。

選択ルール：ScrollView — 子要素の数がわかり、20〜30を超えない画面向け（ユーザープロフィール、設定フォーム、商品ページ）。FlatList — 多数の要素が予想されるリスト向け（ニュースフィード、商品カタログ、チャットメッセージ）。コンテンツが異種混合（ヘッダー、フォーム、カード、フッター）の場合は、ScrollViewが推奨されます。FlatListは均一な要素を想定しているためです。

水平スクロールとページネーション

ScrollViewはhorizontalプロップを通じて水平スクロールをサポートしており、カルーセル、画像ギャラリー、タブ、水平リストに最適です。pagingEnabledプロップ（iOS）またはsnapToIntervalと組み合わせると、ScrollViewはページベースのナビゲーションのコンポーネントになります。

水平カルーセル

horizontalプロパティはスクロール方向を変更します。pagingEnabled（iOS）はページベースのスクロールを有効にし、スクロールは要素の境界でのみ停止します。snapToIntervalは両方のプラットフォームでスナップステップをピクセル単位で設定します。

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

このカルーセルでは、pagingEnabledが自動的に各画像の境界にスクロールをスナップします。onMomentumScrollEndは現在のページインジケータを更新できます。このようなカルーセルはネイティブに動作し、慣性スクロールをサポートします。

スナップ位置決め

標準以外のスナップステップには、snapToInterval（ピクセル単位のステップサイズ）とsnapToAlignment（start、center、end）を使用します。snapToOffsetsを使用すると、スナップ用の特定の位置の配列を指定できます。これは異なるサイズのカードがある水平リストに便利です。

ScrollViewの実践例

2つの典型的なシナリオを見てみましょう：フォーム画面（垂直スクロール）と水平カテゴリリスト。両方とも最適な動作のために異なるプロップでScrollViewを使用しています。

例1：フォーム付きプロフィール画面

プロフィール編集ページには異種混合の要素が含まれています：アバター、複数の入力フィールド、スイッチ、保存ボタン。ScrollViewは各ブロックを個別にではなく、ページ全体をスクロールできます。

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled'プロップは、キーボードが開いているときにフォームとのスクロールと操作を可能にします。contentContainerStyleはすべてのコンテンツにパディングを適用します。このパターンはReact Nativeのすべてのフォーム画面で使用されます。

例2：水平カテゴリリスト

カテゴリ（チャット、フィルター、タブ）をナビゲートするために、チップ付きの水平ScrollViewが使用されます。このコンポーネントはマーケットプレイスやソーシャルメディアアプリケーションでよく見られます。

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

インジケータをオフにした水平ScrollViewは、カテゴリストリップの標準です。各チップは選択状態を持つ個別のコンポーネントです。showsHorizontalScrollIndicator: falseプロップはスクロールバーを削除し、モバイルアプリユーザーの期待に合致します。