MENU
  1. ホーム
  2. React
  3. SuspenseとReact.lazyでデータロード時のUXを向上させる方法

SuspenseとReact.lazyでデータロード時のUXを向上させる方法

React

Reactアプリケーションでは、データロードやコンポーネントの読み込み中に、ユーザーに待ち時間を感じさせない工夫が重要です。この課題を解決するために、ReactはSuspenseとReact.lazyという強力な機能を提供しています。本記事では、これらの機能を用いてデータロード時のユーザー体験（UX）をどのように向上させるかについて、基本的な使い方から応用例までを詳しく解説します。データがロード中でも、スムーズで魅力的なUIを実現する方法を学びましょう。

目次

Suspenseの基本概念とその役割


ReactのSuspenseは、非同期処理が完了するまで特定のUI部分を待機させるための機能です。具体的には、非同期でデータやコンポーネントをロードする際、指定したフォールバックUI（例えばローディングスピナー）を表示しながら、処理が終わるのを待つ役割を果たします。

非同期処理における課題


従来の方法では、データロード中にエラーハンドリングやローディング表示の実装が複雑化することが多く、コードの可読性が低下する可能性がありました。Suspenseはこれらの課題を解消し、コードのシンプルさを保ちながらユーザー体験を向上させます。

Suspenseの仕組み


Suspenseは、特定の非同期操作が「解決済み」または「完了」するまで、フォールバックUIを表示します。そのため、開発者は複雑なローディング処理や状態管理を直接記述する必要がありません。

例: Suspenseの基本的な使用法


以下のコード例は、Suspenseを使用してローディングスピナーを表示する簡単な方法を示しています。

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

この例では、LazyComponentのロードが完了するまで、「Loading…」というテキストが表示されます。

SuspenseはReact 18以降で、非同期データ取得にも対応しており、より幅広いユースケースに利用可能です。この基本的な理解をもとに、次項ではReact.lazyを使用したコードスプリッティングについて詳しく見ていきます。

React.lazyを使ったコードスプリッティング


React.lazyは、コードスプリッティングを簡単に実現するための関数です。コードスプリッティングとは、アプリケーションを必要に応じて部分的に読み込むことで、初回ロード時間を短縮するテクニックです。この機能は、アプリケーションのパフォーマンスを向上させるために不可欠です。

コードスプリッティングの概要


通常、Reactアプリケーションは一度にすべてのコンポーネントをロードします。しかし、React.lazyを使用すると、特定のコンポーネントを必要なときにのみロードする「遅延ロード」が可能になります。これにより、初期ロード時のパフォーマンスが大幅に改善されます。

React.lazyの基本構文


以下の構文を使用して、React.lazyを簡単に実装できます。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

このコードは、./LazyComponentを非同期的にロードし、必要に応じて利用します。

React.lazyを使った具体例


以下はReact.lazyを使用したサンプルコードです。

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>React.lazyによるコードスプリッティング</h1>
      <Suspense fallback={<div>Loading Component...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

この例では、LazyComponentが実際に必要になるまでロードされません。また、ロード中にはSuspenseを使って「Loading Component…」が表示されます。

利点と注意点

利点

  1. 初期ロード時間の短縮。
  2. ユーザーが実際にアクセスする部分のみロードすることで、効率的なリソース利用が可能。
  3. 大規模アプリケーションでのパフォーマンス最適化。

注意点

  1. 必ずSuspenseと組み合わせて使用する必要がある。
  2. バンドルサイズの管理が重要になる。

React.lazyを活用すると、必要なリソースだけを適切なタイミングでロードするアプリケーションを構築できます。次項では、SuspenseとReact.lazyを組み合わせた場合の利点について詳しく解説します。

SuspenseとReact.lazyの連携による利点


SuspenseとReact.lazyを組み合わせることで、アプリケーションのパフォーマンスとユーザー体験（UX）を大幅に向上させることができます。このセクションでは、両者の連携による具体的な利点を解説します。

コードスプリッティングと非同期UIの簡素化


React.lazyを使った遅延ロードは、Suspenseのフォールバック機能と組み合わせることで、ローディング中の状態を簡単に制御できます。これにより、コードスプリッティングとローディング中のUI管理が統一的かつシンプルに行えます。

例: SuspenseとReact.lazyの連携

import React, { Suspense } from 'react';

const LazyAbout = React.lazy(() => import('./About'));
const LazyContact = React.lazy(() => import('./Contact'));

function App() {
  return (
    <div>
      <h1>SuspenseとReact.lazyの活用例</h1>
      <Suspense fallback={<div>Loading components...</div>}>
        <LazyAbout />
        <LazyContact />
      </Suspense>
    </div>
  );
}

export default App;

この例では、AboutとContactコンポーネントがそれぞれ非同期的にロードされ、ロード中は「Loading components…」が表示されます。

ユーザー体験（UX）の向上


SuspenseとReact.lazyの連携により、データロード中の空白画面や不自然な遅延が解消され、シームレスなUIが提供できます。これにより、ユーザーは操作中の途切れを感じにくくなります。

主なUX向上のポイント

  1. スムーズなフォールバックUI
    ローディング中に代替の視覚フィードバックを提供することで、ユーザーに安心感を与えます。
  2. データロードの効率化
    必要な部分だけロードすることで、画面遷移時のスムーズさを保ちます。

パフォーマンス向上の具体例

ビフォー: すべてのコンポーネントを一度にロード


初期ロードで大量のコードが読み込まれ、ページロード時間が長くなります。

アフター: React.lazyを使用した遅延ロード


ユーザーがアクセスしたときだけ特定のコンポーネントをロードするため、初期ロードが高速化されます。

まとめ


SuspenseとReact.lazyの連携は、コードの簡潔さを保ちながら、アプリケーションのパフォーマンスとユーザー体験を両立するための強力な手法です。次項では、Suspenseのフォールバック機能をさらに深掘りし、その活用方法を紹介します。

Suspenseのフォールバック機能の活用


Suspenseのフォールバック機能は、非同期処理が完了するまでユーザーに視覚的なフィードバックを提供する重要な仕組みです。このセクションでは、フォールバック機能の設定方法とその応用例を詳しく解説します。

フォールバック機能の概要


フォールバックとは、非同期操作が進行中の場合に一時的に表示されるUIのことです。これにより、ユーザーはロード中であることを視覚的に認識でき、ストレスのない操作体験を得られます。

基本的なフォールバック設定


Suspenseのfallbackプロパティを使用して、ローディング中のUIを簡単に設定できます。

例: シンプルなフォールバックUI

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

この例では、LazyComponentがロードされる間、「Loading…」というテキストが一時的に表示されます。

フォールバックに高度なUIを設定する


フォールバックUIには、単純なテキストだけでなく、カスタムローディングスピナーやアニメーションなどの複雑なコンポーネントを使用できます。

例: カスタムローディングスピナー

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function LoadingSpinner() {
  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 100 100"
        width="50"
        height="50"
      >
        <circle
          cx="50"
          cy="50"
          r="45"
          stroke="blue"
          strokeWidth="4"
          fill="none"
          strokeDasharray="283"
          strokeDashoffset="75"
        >
          <animate
            attributeName="stroke-dashoffset"
            values="75; 300"
            dur="1s"
            repeatCount="indefinite"
          />
        </circle>
      </svg>
      <p>Loading, please wait...</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

この例では、カスタムのローディングスピナーをフォールバックとして表示し、より洗練されたUIを提供します。

フォールバックUIのベストプラクティス

1. 明確で簡潔なフィードバック


ローディング中であることを即座に認識できるテキストやアニメーションを使う。

2. ブランドに合わせたデザイン


アプリケーション全体のデザインに統一感を持たせたフォールバックUIを作成する。

3. フォールバックの最適化


ローディング時間が短い場合でも違和感がないように、スムーズなトランジションを考慮する。

まとめ


Suspenseのフォールバック機能は、ユーザーが非同期処理中に快適に待機できるようサポートします。カスタムデザインやアニメーションを活用することで、アプリケーション全体のUXをさらに向上させることが可能です。次項では、非同期データ取得におけるSuspenseの実践的な使い方を詳しく紹介します。

非同期データ取得でのSuspenseの応用例


React 18以降、Suspenseは非同期データ取得にも対応し、データロード時のUI管理を大幅に簡略化できるようになりました。このセクションでは、非同期データ取得でのSuspenseの効果的な活用法を解説します。

非同期データ取得における課題


従来の非同期データ取得では、次のような課題がありました。

  • ローディング状態やエラー状態を手動で管理する必要がある
  • コードの複雑化により、保守性が低下する
  • UIの状態とデータの状態が同期しない場合がある

Suspenseを使用すると、これらの課題を解消し、データロード中の状態を簡潔に管理できます。

Suspense for Data Fetchingの概要


React 18からは、非同期データ取得にSuspenseを活用できるライブラリや技術が整備されています。react-fetchやReact Query、SWRなどのライブラリは、Suspenseと連携可能です。

非同期データ取得の基本構造


以下は、データ取得でSuspenseを活用する基本的な例です。

import React, { Suspense } from 'react';

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 2000);
  });
};

const resource = fetchData();

function DataComponent() {
  const data = resource.read(); // データを読み込む
  return <div>Data: {data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

この例では、fetchData関数を使って非同期データを取得し、Suspenseを使ってローディング状態を管理しています。

データ取得ライブラリとの統合例

React Queryとの組み合わせ


React Queryを使うと、Suspenseを利用したデータ取得がさらに簡単になります。

import React from 'react';
import { useQuery } from 'react-query';
import { Suspense } from 'react';

function fetchData() {
  return fetch('https://api.example.com/data').then((res) => res.json());
}

function DataComponent() {
  const { data } = useQuery('exampleData', fetchData, { suspense: true });
  return <div>Data: {JSON.stringify(data)}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

この例では、React QueryのuseQueryフックを使用してデータを非同期で取得し、Suspenseによってローディング中の状態を管理しています。

実践的な活用ポイント

1. フォールバックUIの工夫


非同期処理中は、シンプルなローディングスピナーやユーザーガイド付きのUIを活用してUXを向上させましょう。

2. データキャッシュを活用


データキャッシュ機能を利用することで、同じデータを再取得する際のパフォーマンスを最適化できます。

3. エラーハンドリング


非同期データ取得で発生するエラーには、Error Boundaryを併用して対応するのがベストプラクティスです。

まとめ


非同期データ取得でSuspenseを活用することで、コードの可読性が向上し、UXを洗練されたものにできます。次項では、データフェッチングライブラリとSuspenseを統合する際のベストプラクティスについて詳しく解説します。

データフェッチングライブラリとの統合


Suspenseは、データフェッチングライブラリと統合することで、非同期データ取得をさらに効率的に管理できます。このセクションでは、React QueryやSWRなどのライブラリをSuspenseと組み合わせる際のベストプラクティスを解説します。

React Queryとの統合


React Queryは、非同期データ取得を簡単に管理できる強力なライブラリです。Suspenseとの組み合わせにより、ローディング状態やエラーハンドリングを大幅に簡素化できます。

React Queryを使った例

import React from 'react';
import { useQuery } from 'react-query';
import { Suspense } from 'react';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function DataComponent() {
  const { data } = useQuery('exampleData', fetchData, { suspense: true });
  return <div>Data: {JSON.stringify(data)}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

このコードでは、useQueryフックでデータを取得し、Suspenseを使ってローディング中のUIを簡単に制御しています。

SWRとの統合


SWRは、データ取得とキャッシュ管理を効率化するライブラリです。Suspenseとの連携によって、よりスムーズな非同期データ取得が可能になります。

SWRを使った例

import React from 'react';
import useSWR from 'swr';
import { Suspense } from 'react';

const fetcher = (url) => fetch(url).then((res) => res.json());

function DataComponent() {
  const { data } = useSWR('https://api.example.com/data', fetcher, {
    suspense: true,
  });
  return <div>Data: {JSON.stringify(data)}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

SWRを使用することで、簡潔なコードで非同期データ取得とキャッシュ管理を同時に実現できます。

統合のメリット

1. ローディングとエラーハンドリングの簡素化


Suspenseを使えば、複雑なローディング状態やエラーハンドリングロジックを書く必要がありません。

2. 再利用可能なコードの実現


React QueryやSWRのフックを活用することで、データ取得ロジックを簡単に再利用できます。

3. キャッシュによるパフォーマンス向上


データフェッチングライブラリはキャッシュ機能を備えており、再取得の負荷を軽減します。

注意点とベストプラクティス

  • Error Boundaryの併用: Suspenseはエラーを直接処理できないため、Error Boundaryでのエラーハンドリングが推奨されます。
  • キャッシュ設定の最適化: キャッシュの期限やリフレッシュ間隔を適切に設定し、ユーザー体験を最適化します。
  • フォールバックUIの工夫: シンプルで視覚的に分かりやすいフォールバックUIを用意することで、ローディング中のストレスを軽減します。

まとめ


React QueryやSWRなどのライブラリをSuspenseと統合することで、非同期データ取得の複雑さを軽減し、効率的で保守性の高いアプリケーションを構築できます。次項では、データロード時のUX改善に役立つ具体的なヒントを提供します。

UX改善のためのベストプラクティス


SuspenseとReact.lazyを活用してデータロード時のUXを向上させるには、フォールバックUIやローディング時間の管理など、いくつかの重要なポイントを押さえる必要があります。このセクションでは、UXを最適化するための具体的なベストプラクティスを解説します。

1. ユーザーの期待に応えるフォールバックUIの設計


フォールバックUIは、ユーザーがデータロード中に何が起きているのかを視覚的に理解できるように設計することが重要です。

実践例: インタラクティブなローディングUI

  • シンプルなアニメーション: スピナーやプログレスバーを使用して、進行状況を示す。
  • 文言の工夫: 「データを読み込み中です。少々お待ちください」といったメッセージを添える。
function LoadingUI() {
  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <p>データをロード中です...</p>
      <progress />
    </div>
  );
}

2. 非同期処理の分割


アプリケーション全体を一括してロードするのではなく、ページや機能単位で非同期処理を分割することで、ローディング時間を短縮できます。

例: セクションごとの遅延ロード

const LazyHeader = React.lazy(() => import('./Header'));
const LazyContent = React.lazy(() => import('./Content'));

function App() {
  return (
    <>
      <Suspense fallback={<div>Loading header...</div>}>
        <LazyHeader />
      </Suspense>
      <Suspense fallback={<div>Loading content...</div>}>
        <LazyContent />
      </Suspense>
    </>
  );
}

3. キャッシュを活用して再ロードを削減


データフェッチングライブラリのキャッシュ機能を使用することで、同じデータを再取得する必要を減らし、ロード時間を短縮できます。

例: SWRのキャッシュ設定

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function DataComponent() {
  const { data } = useSWR('https://api.example.com/data', fetcher, {
    suspense: true,
    revalidateOnFocus: false, // フォーカス時の再取得を無効化
  });
  return <div>{JSON.stringify(data)}</div>;
}

4. エラーハンドリングを適切に行う


非同期処理中にエラーが発生した場合、適切に対処することでユーザー体験を維持します。Error Boundaryを使用するのが一般的です。

例: Error Boundaryの実装

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>エラーが発生しました。リロードしてください。</div>;
    }
    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

5. スケルトンスクリーンの利用


スケルトンスクリーン（簡易的なプレースホルダーUI）を使用することで、画面が突然変わる印象を避け、自然な体験を提供します。

例: スケルトンスクリーンの例

function SkeletonScreen() {
  return (
    <div style={{ background: '#eee', height: '100px', margin: '10px' }}></div>
  );
}

function App() {
  return (
    <Suspense fallback={<SkeletonScreen />}>
      <LazyComponent />
    </Suspense>
  );
}

まとめ


フォールバックUIの工夫や非同期処理の分割、キャッシュの活用などのベストプラクティスを実践することで、データロード時のUXを大幅に向上させることができます。次項では、学んだ知識を確認するためのコード例と演習問題を紹介します。

コード例と演習問題


このセクションでは、SuspenseとReact.lazyを使ったコード例をいくつか紹介します。これらのコードを実践的に応用できるよう、演習問題も用意しました。

コード例1: React.lazyとSuspenseの基本


以下のコードでは、React.lazyを使ったコンポーネントの遅延ロードとSuspenseによるローディングUIの表示を示します。

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>React.lazyとSuspenseの基本例</h1>
      <Suspense fallback={<div>Loading component...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

このコードでは、LazyComponentが読み込まれるまで「Loading component…」というテキストが表示されます。

コード例2: 非同期データ取得とSuspense


以下は、非同期データ取得を行いながら、Suspenseを使用する例です。

import React, { Suspense } from 'react';

const fetchData = () =>
  new Promise((resolve) => setTimeout(() => resolve('Hello, Suspense!'), 2000));

const resource = {
  read() {
    throw fetchData();
  },
};

function DataComponent() {
  const data = resource.read();
  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

この例では、2秒後に「Hello, Suspense!」が表示されます。

コード例3: スケルトンスクリーンの使用


以下の例では、スケルトンスクリーンをフォールバックUIとして使用します。

function SkeletonScreen() {
  return <div style={{ backgroundColor: '#ccc', height: '100px' }}></div>;
}

const LazyContent = React.lazy(() => import('./Content'));

function App() {
  return (
    <Suspense fallback={<SkeletonScreen />}>
      <LazyContent />
    </Suspense>
  );
}

export default App;

スケルトンスクリーンが表示され、コンテンツが読み込まれるまでの間、自然なUXを提供します。

演習問題


以下の問題に取り組んで、SuspenseとReact.lazyの理解を深めましょう。

問題1: 非同期データ取得の実装

  • 以下の要件を満たすコンポーネントを実装してください。
  • APIエンドポイントhttps://jsonplaceholder.typicode.com/posts/1からデータを取得する。
  • Suspenseを使用してローディング中に「データをロード中です」というテキストを表示する。

問題2: 複数の遅延コンポーネントのロード

  • HeaderとFooterという2つの遅延コンポーネントを作成し、Suspenseを使ってそれぞれに異なるフォールバックUIを設定してください。

問題3: エラーハンドリングの実装

  • 非同期データ取得時にエラーが発生した場合、Error Boundaryを使用して「エラーが発生しました」というUIを表示してください。

解答へのヒント

  • 問題1では、fetchを使った非同期データ取得を実装します。
  • 問題2では、各コンポーネントのフォールバックUIを独立して設定します。
  • 問題3では、ReactのError Boundaryの実装を参考にしてください。

まとめ


これらのコード例と演習問題を通じて、SuspenseとReact.lazyを使った実践的なアプリケーション構築のスキルを習得できます。次項では、これまでの内容を振り返り、記事の要点を簡潔にまとめます。

まとめ


本記事では、ReactのSuspenseとReact.lazyを使ったUX向上の方法について解説しました。Suspenseは、非同期処理中のフォールバックUIを簡単に設定できる強力な機能であり、React.lazyと組み合わせることで、コードスプリッティングや非同期データ取得が効率化されます。また、データフェッチングライブラリとの統合やスケルトンスクリーンの利用など、実践的なテクニックも紹介しました。

これらのテクニックを活用すれば、Reactアプリケーションのパフォーマンスとユーザー体験を大幅に向上させることができます。特に、フォールバックUIの工夫やエラーハンドリングの最適化は、ユーザーに信頼感を与える重要な要素です。今回の知識をもとに、実際のプロジェクトで活用し、より洗練されたアプリケーションを構築してください。

React
React データロード UX改善 Suspense React.lazy

コメント

コメントする

目次