React Nativeで無限スクロールを実装する方法：基本から応用まで徹底解説

React Nativeは、クロスプラットフォームアプリケーションを効率的に開発できるフレームワークとして広く利用されています。中でも無限スクロールは、膨大なデータを扱うアプリケーションにおいて、優れたユーザー体験を提供する重要な機能です。この記事では、React Nativeを使った無限スクロールの実装方法について、基本的な概念から応用まで詳しく解説します。特に、FlatListコンポーネントを活用し、パフォーマンスを最適化しながら動的にデータを読み込む方法に焦点を当てます。無限スクロールの理解を深め、アプリケーションに応用できるスキルを身につけましょう。

無限スクロールとは何か

無限スクロールとは、ユーザーがリストやフィードをスクロールする際に、画面の下端に到達するたびに追加のデータを自動的にロードする仕組みです。この手法により、全データを一度に読み込む必要がなくなり、アプリケーションのパフォーマンス向上と優れたユーザー体験が実現します。

無限スクロールのメリット

無限スクロールを導入することで得られる主な利点は以下の通りです。

パフォーマンスの向上

必要なデータだけを動的に読み込むため、初期ロード時間を短縮し、デバイスのリソースを効率的に使用できます。

シームレスなユーザー体験

スクロール操作だけでコンテンツが自動的に更新されるため、ユーザーの操作感が向上します。

直感的なインターフェース

ページネーションなどの明示的なナビゲーションが不要になり、より自然な操作が可能です。

無限スクロールの課題

一方で、無限スクロールの実装には以下の課題も伴います。

パフォーマンスのボトルネック

データが増えるにつれて、スクロール操作や描画処理に負荷がかかる可能性があります。

エラーや遅延の処理

ネットワーク環境やAPIの応答が遅い場合に適切なエラー処理を実装する必要があります。

無限スクロールは、正しく設計されることで、ユーザーの期待に応える高機能なアプリケーションを実現する重要な技術です。

React Nativeで無限スクロールを実現する方法

React Nativeを用いた無限スクロールの実装には、基本的なアプローチと適切なツールの選択が重要です。以下では、具体的な方法について解説します。

無限スクロール実現の基本アプローチ

リストコンポーネントの活用

React Nativeには、リスト表示を効率的に行うためのコンポーネントが用意されています。特に、無限スクロールの実装には以下のコンポーネントを活用します。

FlatList: 大量のデータを効率的に表示できるReact Native標準のリストコンポーネント。
SectionList: グループ化されたデータを扱う場合に便利なリストコンポーネント。

データの動的ロード

無限スクロールでは、画面下端に近づくたびにAPIやデータソースから追加データを取得する設計が必要です。

基本構造の概要

無限スクロールの基本的な流れは次の通りです。

初期データのロード
　アプリ起動時に最初のデータセットを取得します。
スクロール位置の監視
　ユーザーのスクロール操作を監視し、特定の位置に達した際に次のデータセットをロードします。
データの追加表示
　取得したデータを既存のリストに結合して再描画します。

これらの基本概念を基に、次のセクションでは具体的な実装手法を解説していきます。

FlatListを使用した無限スクロールの実装

FlatListは、React Nativeで無限スクロールを実装する際に最も適したコンポーネントの一つです。以下では、FlatListを活用して無限スクロールを設定する具体的な手順を解説します。

FlatListの基本構造

FlatListは、大量のデータを効率的にレンダリングできるReact Native標準のリストコンポーネントです。無限スクロールを実現するためには、onEndReachedやonEndReachedThresholdといったプロパティを活用します。

主要プロパティ

data: リスト表示するデータの配列を指定します。
renderItem: 各リストアイテムの描画方法を定義します。
onEndReached: リストの末尾に到達した際に呼び出されるコールバック関数。
onEndReachedThreshold: 末尾とみなすスクロール位置を設定します。デフォルトは0.5（リストの50%）。

基本的な実装例

以下は、FlatListを使った無限スクロールの基本実装例です。

import React, { useState, useEffect } from 'react';
import { View, FlatList, Text, ActivityIndicator } from 'react-native';

const InfiniteScrollExample = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadData();
  }, [page]);

  const loadData = async () => {
    if (isLoading) return;
    setIsLoading(true);

    try {
      // サンプルAPIリクエスト
      const response = await fetch(`https://example.com/api/data?page=${page}`);
      const newData = await response.json();
      setData([...data, ...newData]);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleLoadMore = () => {
    setPage(page + 1);
  };

  const renderFooter = () => {
    if (!isLoading) return null;
    return <ActivityIndicator size="large" color="#0000ff" />;
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  );
};

export default InfiniteScrollExample;

コードのポイント

データの動的取得

loadData関数でAPIからデータを取得し、既存のデータに追加しています。

スクロール位置の監視

onEndReachedプロパティを使い、リストの末尾に到達した際に次のデータをロードしています。

ロード中の表示

ListFooterComponentで、追加データをロードしている間にスピナーを表示しています。

FlatListを使用することで、効率的かつ簡潔に無限スクロールを実現できます。次のセクションでは、パフォーマンスの最適化やエラー処理についてさらに深掘りしていきます。

スクロールイベントのハンドリング

無限スクロールを効果的に実装するためには、スクロール位置を適切に監視し、データ取得のトリガーを正確に制御することが重要です。このセクションでは、スクロールイベントの詳細と最適なハンドリング方法について解説します。

スクロールイベントの監視

React NativeのFlatListやScrollViewでは、スクロールイベントを監視することで、ユーザーの操作に応じた動的な処理が可能です。主に以下のプロパティを活用します。

主要なプロパティと機能

onEndReached: リストの末尾に到達した際に呼び出されるイベント。無限スクロールの実装で最も使用されます。
onScroll: ユーザーがスクロールするたびに呼び出されるイベント。より細かいスクロール位置の制御が必要な場合に使用します。
scrollEventThrottle: onScrollイベントの発火頻度を調整するプロパティ。パフォーマンスを最適化するために設定します。

onScrollを使用したスクロール位置の取得

場合によっては、スクロール位置を正確に取得し、カスタマイズされた動作を実装する必要があります。以下はonScrollを利用した例です。

import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';

const ScrollEventExample = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  const handleScroll = (event) => {
    const yOffset = event.nativeEvent.contentOffset.y; // 垂直方向のスクロール位置
    setScrollPosition(yOffset);
    console.log(`Scroll Position: ${yOffset}`);
  };

  return (
    <View>
      <FlatList
        data={Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)}
        renderItem={({ item }) => <Text style={{ padding: 20 }}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
        onScroll={handleScroll}
        scrollEventThrottle={16} // 16ms（約60fps）
      />
      <Text style={{ position: 'absolute', top: 40, left: 10 }}>
        Scroll Position: {scrollPosition}
      </Text>
    </View>
  );
};

export default ScrollEventExample;

ポイント解説

スクロール位置の取得: event.nativeEvent.contentOffsetを使用して現在のスクロール位置を把握します。
パフォーマンスの考慮: scrollEventThrottleを16ms（1フレームごと）に設定して、高頻度のイベント処理を効率化しています。

onEndReachedの効果的な使用

onEndReachedを使用する場合、適切なonEndReachedThresholdの設定が重要です。この値は、リストの末尾に到達する前にイベントを発火させる閾値を設定します。

<FlatList
  data={data}
  renderItem={renderItem}
  onEndReached={handleLoadMore}
  onEndReachedThreshold={0.7} // リスト末尾の70%手前でイベント発火
/>

実装上の注意点

閾値の調整: 値が大きすぎると頻繁にイベントが発生し、パフォーマンスが低下する可能性があります。
多重イベントの防止: データ取得中はフラグを設定して、onEndReachedが複数回呼び出されないよう制御します。

スクロールイベントの応用例

スクロールイベントを活用して、以下のような追加機能を実装することも可能です。

リストトップでの再読み込み

onScrollとスクロール位置を組み合わせて、リストの先頭で引っ張る操作（プルリフレッシュ）をトリガーする。

ヘッダーやフッターの動的表示

スクロール位置に基づいてヘッダーやフッターを表示または非表示にする。

スクロールイベントのハンドリングは、無限スクロールを実現するだけでなく、直感的でダイナミックなユーザー体験を提供するための強力なツールとなります。次のセクションでは、データ取得とパフォーマンスの最適化に焦点を当てます。

APIデータの動的取得とパフォーマンス最適化

無限スクロールでは、APIからデータを動的に取得する仕組みが重要です。同時に、パフォーマンスを最適化してスムーズなユーザー体験を提供する必要があります。このセクションでは、効率的なデータ取得とパフォーマンス最適化の方法を解説します。

APIデータの動的取得

データ取得の設計

無限スクロールにおけるデータ取得は、以下のような流れで設計します。

初期データの取得
　アプリ起動時に、最初のページのデータをロードします。
次ページのリクエスト
　リスト末尾に到達した際に次のページをAPIから取得します。
データの結合
　取得したデータを既存のリストデータに追加します。

以下は、APIを利用したデータ取得の基本コード例です。

const fetchData = async (page) => {
  try {
    const response = await fetch(`https://example.com/api/data?page=${page}`);
    const result = await response.json();
    return result.items; // データを返却
  } catch (error) {
    console.error("データ取得エラー:", error);
    return [];
  }
};

状態管理とデータの結合

取得したデータをリストに結合する際には、Reactの状態管理を活用します。

const handleLoadMore = async () => {
  if (isLoading) return;
  setIsLoading(true);

  const newData = await fetchData(page);
  setData([...data, ...newData]); // 既存データに結合
  setPage(page + 1);

  setIsLoading(false);
};

パフォーマンス最適化のポイント

無限スクロールでは、効率的にデータを表示し、スクロールの滑らかさを維持することが重要です。以下の方法で最適化を図ります。

1. メモリ使用量の削減

大量のデータを表示する場合、リストの再利用を活用してメモリ使用量を最小限に抑えます。

FlatListのinitialNumToRenderプロパティ
初期にレンダリングするアイテム数を制限します。
windowSizeプロパティ
レンダリングを維持するアイテム範囲を指定します。

<FlatList
  data={data}
  renderItem={renderItem}
  initialNumToRender={10} // 初期表示アイテム数
  windowSize={5}          // レンダリング範囲
/>

2. ロードのデバウンス

スクロールイベントに連動したデータ取得の頻度を減らし、パフォーマンスを改善します。

let debounceTimer;
const handleLoadMoreDebounced = () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    handleLoadMore();
  }, 200);
};

3. データのキャッシュ

同じデータを繰り返し取得しないように、キャッシュを活用します。
以下はreact-queryを利用した例です。

import { useQuery } from 'react-query';

const { data, fetchNextPage, isFetching } = useInfiniteQuery(
  'infiniteScroll',
  ({ pageParam = 1 }) => fetchData(pageParam),
  {
    getNextPageParam: (lastPage, pages) => lastPage.nextPage,
  }
);

4. レンダリング最適化

不要な再レンダリングを防ぐため、keyExtractorを適切に設定し、リストアイテムをReact.memoでメモ化します。

const MemoizedItem = React.memo(({ item }) => {
  return <Text>{item.name}</Text>;
});

エラー処理とロード中の状態

ユーザー体験を向上させるために、エラー発生時やロード中の状態を適切に表示します。

エラーメッセージの表示

APIリクエストが失敗した場合にメッセージを表示します。

if (error) {
  return <Text>データを取得できませんでした。</Text>;
}

ローディングスピナー

データ取得中にスピナーを表示してユーザーに処理中であることを伝えます。

<ListFooterComponent>
  {isLoading && <ActivityIndicator size="large" />}
</ListFooterComponent>

これらの方法を組み合わせることで、無限スクロールの動作を効率化し、ユーザー体験を大幅に向上させることができます。次のセクションでは、エラー処理とユーザー体験向上のポイントについて詳しく説明します。

エラー処理とユーザー体験向上のポイント

無限スクロールを実装する際には、エラー処理やロード中の状態表示を適切に設計することが重要です。これにより、ユーザーが快適にアプリケーションを利用できる環境を提供できます。このセクションでは、エラー処理とユーザー体験を向上させる具体的なポイントを解説します。

エラー処理の基本

無限スクロールでは、ネットワークエラーやAPIの応答遅延が発生する可能性があります。以下の方法でエラーを管理します。

エラー発生時の通知

エラーが発生した場合、ユーザーに状況を明確に伝えます。エラーメッセージの表示はシンプルかつ分かりやすくすることが重要です。

if (error) {
  return (
    <View style={{ padding: 20 }}>
      <Text>データの取得に失敗しました。再試行してください。</Text>
      <Button title="再試行" onPress={retryFunction} />
    </View>
  );
}

エラー状態の再試行

ユーザーがエラー後に再試行できるように、リトライボタンを用意します。

const retryFunction = () => {
  fetchData(page);
};

ロード中の状態表示

データをロード中であることを適切に伝えることで、ユーザーに安心感を与えます。

ローディングスピナーの活用

データ取得中には、スピナーやプログレスバーを表示します。

<ListFooterComponent>
  {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
</ListFooterComponent>

「データがありません」メッセージ

ロード完了後にデータが空の場合には、明確なメッセージを表示します。

if (!isLoading && data.length === 0) {
  return <Text>表示できるデータがありません。</Text>;
}

ユーザー体験を向上させる工夫

スムーズなスクロール体験

データ取得中でもスムーズなスクロールができるように、適切なリスト設計を行います。

データのロード中に既存のリストを更新しない。
バッファ領域を設定し、スクロール遅延を軽減する。

視覚的なフィードバック

以下のような視覚的要素を加えることで、ロード中やエラー時のユーザー体験を向上させます。

プルリフレッシュ: ユーザーがリストを引っ張ることでデータを再取得する操作。
ロード中のスケルトンスクリーン: データが表示される前に骨格のようなプレースホルダーを表示。

const SkeletonItem = () => (
  <View style={{ backgroundColor: '#ccc', height: 20, marginVertical: 10 }} />
);

<SkeletonItem />

ページ終了時の通知

すべてのデータがロードされた際には、それをユーザーに通知します。

<ListFooterComponent>
  {!hasMoreData && <Text>すべてのデータを読み込みました。</Text>}
</ListFooterComponent>

エラー処理の応用例

バックオフ戦略の導入

エラー発生時には、一定時間間隔を設けて再試行する仕組みを実装します。

const retryWithBackoff = (retryCount = 0) => {
  const delay = Math.min(1000 * 2 ** retryCount, 30000);
  setTimeout(() => fetchData(page), delay);
};

エラーのログ記録

エラー内容をログに記録することで、問題の早期発見や修正を可能にします。

console.error("Error details:", error.message);

エラー処理とユーザー体験向上の取り組みは、アプリの信頼性を高め、長期的な利用を促進します。次のセクションでは、無限スクロールの具体的な応用例を紹介します。

無限スクロールの応用例

無限スクロールは、多くのアプリケーションで活用される便利な機能です。以下では、具体的な応用例を紹介し、それぞれの場面でどのように無限スクロールが役立つかを解説します。

応用例1: SNSアプリケーション

ユーザー体験の向上

FacebookやInstagramのようなSNSアプリでは、ユーザーがフィードを無限にスクロールし、新しいコンテンツにアクセスできる仕組みが重要です。

実装の特徴

リアルタイムのデータ更新: 新しい投稿を追加していくことで、ユーザーは常に最新の情報を取得可能。
広告の挿入: コンテンツの間に広告を差し込むことで収益化を図ります。

例コード

const fetchPosts = async (page) => {
  const response = await fetch(`https://example.com/api/posts?page=${page}`);
  return await response.json();
};

// 無限スクロールの設定はFlatListの標準的な方法を使用
<FlatList
  data={posts}
  renderItem={({ item }) => <PostComponent post={item} />}
  onEndReached={loadMorePosts}
  onEndReachedThreshold={0.5}
/>;

応用例2: ECサイトの商品一覧

ユーザー体験の向上

Amazonや楽天などのECアプリでは、ユーザーが商品を簡単に検索・閲覧できることが重要です。無限スクロールにより、大量の商品を少しずつ表示することで、ページ遷移のストレスを軽減します。

実装の特徴

カテゴリフィルタリング: 特定のカテゴリや条件に合った商品のみを動的にロード。
在庫状況の確認: 商品リストにリアルタイムで在庫ステータスを反映。

例コード

const fetchProducts = async (page, category) => {
  const response = await fetch(
    `https://example.com/api/products?category=${category}&page=${page}`
  );
  return await response.json();
};

<FlatList
  data={products}
  renderItem={({ item }) => <ProductCard product={item} />}
  onEndReached={loadMoreProducts}
  ListFooterComponent={() => isLoading && <ActivityIndicator />}
  onEndReachedThreshold={0.8}
/>;

応用例3: ニュースアプリケーション

ユーザー体験の向上

ニュースアプリでは、ユーザーが興味のある記事を無限に読み進められる機能が重宝されます。これにより、アプリ内での滞在時間が増加します。

実装の特徴

関連ニュースの提案: 現在表示している記事に関連するコンテンツを無限スクロールで表示。
トピックごとの分類: カテゴリや人気順でニュースをフィルタリング。

例コード

const fetchNews = async (page) => {
  const response = await fetch(`https://example.com/api/news?page=${page}`);
  return await response.json();
};

<FlatList
  data={newsArticles}
  renderItem={({ item }) => <NewsCard article={item} />}
  onEndReached={loadMoreNews}
  ListFooterComponent={renderFooter}
  onEndReachedThreshold={0.6}
/>;

応用例4: 動画ストリーミングプラットフォーム

ユーザー体験の向上

NetflixやYouTubeのようなプラットフォームでは、次々とコンテンツを表示する無限スクロールが視聴時間の増加に寄与します。

実装の特徴

動画のプレビュー再生: ユーザーがスクロールするたびに動画のプレビューを再生。
レコメンデーション機能: ユーザーの視聴履歴に基づくコンテンツ推薦。

まとめ

無限スクロールは、SNSやEC、ニュース、動画ストリーミングなど、多様な場面でユーザー体験を向上させるために活用されています。各応用例で適切なカスタマイズを行うことで、アプリの利便性を最大限に高めることができます。次のセクションでは、実装演習として簡単なプロジェクトを作成します。

実装演習：簡単なプロジェクト作成

これまで学んだ無限スクロールの概念や実装方法を基に、React Nativeで簡単なプロジェクトを作成してみましょう。この演習では、APIを使用して動的にデータを取得し、FlatListを使って無限スクロールを実現します。

プロジェクト概要

目的: ユーザーリストを無限スクロールで表示するアプリを作成します。
データソース: 無料のサンプルAPIであるRandom User APIを利用します。
機能: 無限スクロール、ロード中のスピナー表示、エラー処理。

ステップ1: プロジェクトのセットアップ

React Nativeプロジェクトを作成し、必要なライブラリをインストールします。

npx react-native init InfiniteScrollDemo
cd InfiniteScrollDemo
npm install axios

ステップ2: データ取得ロジックの実装

APIを呼び出し、データを取得する関数を作成します。

import axios from 'axios';

const fetchUsers = async (page) => {
  try {
    const response = await axios.get(`https://randomuser.me/api/?page=${page}&results=10`);
    return response.data.results;
  } catch (error) {
    console.error("Error fetching users:", error);
    throw error;
  }
};

ステップ3: 無限スクロールの構築

FlatListを使用して、無限スクロールを構築します。

import React, { useState, useEffect } from 'react';
import { View, FlatList, Text, ActivityIndicator, StyleSheet } from 'react-native';

const App = () => {
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadUsers();
  }, [page]);

  const loadUsers = async () => {
    if (isLoading) return;
    setIsLoading(true);
    setError(null);

    try {
      const newUsers = await fetchUsers(page);
      setUsers((prevUsers) => [...prevUsers, ...newUsers]);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  const renderFooter = () => {
    if (!isLoading) return null;
    return <ActivityIndicator size="large" color="#0000ff" />;
  };

  return (
    <View style={styles.container}>
      {error && <Text style={styles.errorText}>Error: {error}</Text>}
      <FlatList
        data={users}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.userItem}>
            <Text>{`${item.name.first} ${item.name.last}`}</Text>
          </View>
        )}
        onEndReached={() => setPage(page + 1)}
        onEndReachedThreshold={0.5}
        ListFooterComponent={renderFooter}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  userItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  errorText: {
    color: 'red',
    textAlign: 'center',
    marginVertical: 10,
  },
});

export default App;

ステップ4: 動作確認と改善

アプリを実行し、無限スクロールでユーザーリストが正しく表示されるか確認します。
エラー発生時にメッセージが表示されることを確認します。
データのロード中にスピナーが表示されることを確認します。

学習ポイント

FlatListを活用した無限スクロールの基本的な実装方法。
Axiosを使用したAPIリクエストとエラーハンドリング。
React Nativeでの状態管理と動的データの結合。

次のステップ

このプロジェクトをさらに発展させて、検索機能やカテゴリフィルタを追加することで、実用的なアプリを目指しましょう。次のセクションでは、本記事のまとめを行います。

まとめ

本記事では、React Nativeで無限スクロールを実装する方法を基本から応用まで詳しく解説しました。無限スクロールの概念、FlatListの活用、スクロールイベントのハンドリング、APIデータの取得、パフォーマンスの最適化、そして実践的なプロジェクトの作成方法について学びました。

無限スクロールは、SNS、ECサイト、ニュースアプリなど、さまざまなアプリケーションでユーザー体験を向上させる重要な機能です。今回の内容を基に、実際のプロジェクトに応用することで、効率的かつ魅力的なアプリを構築できるスキルを磨いてください。

これでReact Nativeにおける無限スクロールの基本的な知識は習得できました。次は、カスタマイズや高度な機能追加を検討し、自分だけのアプリを作り上げてみましょう！

React Nativeで無限スクロールを実装する方法：基本から応用まで徹底解説

無限スクロールとは何か

無限スクロールのメリット

パフォーマンスの向上

シームレスなユーザー体験

直感的なインターフェース

無限スクロールの課題

パフォーマンスのボトルネック

エラーや遅延の処理

React Nativeで無限スクロールを実現する方法

無限スクロール実現の基本アプローチ

リストコンポーネントの活用

データの動的ロード

関連するライブラリの選択

React Native標準ライブラリ

サードパーティライブラリ

基本構造の概要

FlatListを使用した無限スクロールの実装

FlatListの基本構造

主要プロパティ

基本的な実装例

コードのポイント

データの動的取得

スクロール位置の監視

ロード中の表示

スクロールイベントのハンドリング

スクロールイベントの監視

主要なプロパティと機能

onScrollを使用したスクロール位置の取得

ポイント解説

onEndReachedの効果的な使用

実装上の注意点

スクロールイベントの応用例

リストトップでの再読み込み

ヘッダーやフッターの動的表示

APIデータの動的取得とパフォーマンス最適化

APIデータの動的取得

データ取得の設計

状態管理とデータの結合

パフォーマンス最適化のポイント

1. メモリ使用量の削減

2. ロードのデバウンス

3. データのキャッシュ

4. レンダリング最適化

エラー処理とロード中の状態

エラーメッセージの表示

ローディングスピナー

エラー処理とユーザー体験向上のポイント

エラー処理の基本

エラー発生時の通知

エラー状態の再試行

ロード中の状態表示

ローディングスピナーの活用

「データがありません」メッセージ

ユーザー体験を向上させる工夫

スムーズなスクロール体験

視覚的なフィードバック

ページ終了時の通知

エラー処理の応用例

バックオフ戦略の導入

エラーのログ記録

無限スクロールの応用例

応用例1: SNSアプリケーション

ユーザー体験の向上

実装の特徴

例コード

応用例2: ECサイトの商品一覧

ユーザー体験の向上

実装の特徴

例コード

応用例3: ニュースアプリケーション

ユーザー体験の向上

実装の特徴

例コード

応用例4: 動画ストリーミングプラットフォーム

ユーザー体験の向上

実装の特徴

まとめ

実装演習：簡単なプロジェクト作成

プロジェクト概要

コメントするコメントをキャンセル