React Suspenseの使い方を初心者向けに解説!axios/fetchとの連携やHooksの活用まで

当サイトでは一部リンクに広告が含まれています
アイキャッチ
目次

React Suspenseとは何か?

React Suspenseとは、React(ウェブサイトを作成するためのJavaScriptのライブラリ)の機能の一つです。
この機能は非同期のデータ取得を待つ間、一時的に表示を停止したり、ロード中の画面を表示したりすることができます。
これにより、ページの読み込みが終わるまでユーザーに何も表示させないという問題を解決できます。

React Suspenseの基本理念

Reactの開発チームは、非同期データの取得による待機時間をユーザー体験の向上に活用しようとしています。
具体的には、データを取得する間にローディングアニメーションを表示したり、あらかじめ用意されたダミーデータを表示するといった方法があります。

React Suspenseの主な機能

React Suspenseは主に以下の2つの機能を提供しています。

  1. コード分割:ページをいくつかの部分(チャンク)に分け、それぞれを個別に読み込むことができます。
  2. リソース読み込みの遅延:データやコンポーネントの読み込みを遅らせ、ローディングアニメーションなどを表示することができます。

これらの機能を通じて、React Suspenseはユーザーが快適にウェブページを閲覧できる環境を提供します。

React Suspenseの使い方

次に、React Suspenseの具体的な使い方を見ていきましょう。

基本的な使い方

React Suspenseを使用する最も基本的な方法は、<Suspense>コンポーネントを使うことです。
以下に具体的なコードを示します。

import React, { Suspense } from 'react';

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

このコードでは、<AnotherComponent />の読み込みが完了するまで、<div>Loading...</div>が表示されます。
<AnotherComponent />の読み込みが完了すると、Loading...の文字は消え、<AnotherComponent />が表示されます。

応用的な使い方

応用的な使い方としては、React.lazy()という関数を使って非同期にコンポーネントを読み込む方法があります。
以下に具体的なコードを示します。

import React, { Suspense, lazy } from 'react';

const AnotherComponent = lazy(() => import('./AnotherComponent'));

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

このコードでは、<AnotherComponent />が必要となるまでその読み込みを遅延させています。
そして、読み込み中に<div>Loading...</div>を表示し、読み込みが完了したら<AnotherComponent />を表示します。

これらの手法を使うことで、React Suspenseを効果的に活用することができます。

React SuspenseとErrorハンドリング

React Suspenseを使って非同期のデータを扱う際、データ取得に失敗した場合の処理も重要です。
この処理はErrorハンドリングと呼ばれ、適切に設定することでユーザー体験を向上させます。

Error Boundaryとは

Error Boundary(エラーバウンダリ)とは、エラーを捕捉し、それによるアプリケーションのクラッシュを防ぐ仕組みです。
これを使って、エラーが発生した場合でもユーザーには適切なメッセージを表示できます。

React SuspenseでのErrorハンドリング

React Suspenseでは、エラーが発生した場合にそれを捕捉し、エラーメッセージを表示することができます。
具体的なコードは以下のようになります。

import React, { Suspense } from 'react';

// ErrorBoundaryコンポーネントを作成します。
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    // エラーが発生したら、stateを更新します。
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // エラーが発生した場合、エラーメッセージを表示します。
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

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

このコードでは、<AnotherComponent />の読み込み中にエラーが発生した場合、Something went wrong.と表示されます。
こうすることで、何か問題が発生したときでもユーザーに適切なフィードバックを提供できます。

React SuspenseとAxios

次に、React SuspenseとAxios(非同期通信を行うためのライブラリ)の連携について解説します。

Axiosとは

Axiosとは、JavaScriptで非常に人気のあるHTTPクライアントライブラリの一つです。
サーバーからのデータ取得やサーバーへのデータ送信を容易に行えます。

React SuspenseでのAxiosの使用方法

React SuspenseとAxiosを組み合わせることで、非同期データの取得とその待機中の表示を効果的に扱うことができます。
具体的なコードは以下のようになります。

import React, { Suspense, useState, useEffect } from 'react';
import axios from 'axios';

const fetchProfileData = async () => {
  const response = await axios.get('https://api.example.com/profile');
  return response.data;
};

function ProfilePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchProfileData().then(setData);
  }, []);

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data.name}</div>;
}

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

このコードでは、fetchProfileData()関数を使ってサーバーからデータを非同期に取得し、その結果をProfilePageコンポーネントで表示しています。
データの取得中はLoading...が表示され、取得が完了するとユーザーのプロフィール名が表示されます。

React SuspenseとFetch

React Suspenseは、Fetch(ブラウザが提供する非同期通信の機能)とも連携可能です。
Fetchを用いた非同期データ取得も、Suspenseを使って効果的に扱うことができます。

Fetchとは

Fetchとは、JavaScriptの標準機能で、サーバーからデータを非同期に取得したり、サーバーへデータを送信したりすることができます。
FetchはPromisesを返すので、非同期処理を扱いやすいです。

React SuspenseでのFetchの使用方法

FetchとReact Suspenseを組み合わせることで、非同期データ取得の待機中の表示を効果的に扱うことができます。
具体的なコードは以下のようになります。

import React, { Suspense, useState, useEffect } from 'react';

const fetchProfileData = async () => {
  const response = await fetch('https://api.example.com/profile');
  const data = await response.json();
  return data;
};

function ProfilePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchProfileData().then(setData);
  }, []);

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data.name}</div>;
}

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

このコードでは、fetchProfileData()関数を使ってサーバーからデータを非同期に取得し、その結果をProfilePageコンポーネントで表示しています。
データの取得中はLoading...が表示され、取得が完了するとユーザーのプロフィール名が表示されます。

React SuspenseとHooks

最後に、React SuspenseとReact Hooksの連携について説明します。

React Hooksとは

React Hooksとは、関数コンポーネント内でステートやライフサイクルメソッドを使うための機能です。
useStateuseEffectなどの一般的なHooksがあります。

React SuspenseでのHooksの使用方法

React SuspenseとHooksを組み合わせることで、非同期データ取得のロジックをコンポーネントから切り離し、コードの可読性と再利用性を高めることができます。
具体的なコードは以下のようになります。

import React, { Suspense, useState, useEffect } from 'react';
import axios from 'axios';

const useProfileData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://api.example.com/profile');
      setData(response.data);
    };

    fetchData();
  }, []);

  return data;
};

function ProfilePage() {
  const data = useProfileData();

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data.name}</div>;
}

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

このコードでは、useProfileDataというカスタムフックを使って非同期データの取得とステートの管理を行っています。
これにより、データ取得のロジックがコンポーネントから切り離され、コードが見やすく、再利用しやすくなります。

これでReact Suspenseの基本的な使い方と、Errorハンドリング、Axios、Fetch、Hooksとの連携について解説しました。
React Suspenseを使うことで、非同期のデータ取得とその待機中の表示を効果的に扱うことができます。
これにより、ユーザー体験を向上させることができます。

転職のためにReactを学ぶならプログラミングスクールがおすすめ

React には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • Reactエンジニアとして活躍するために何をすればいい?
  • 何から勉強すればいいんだろう?
  • 絶対に転職を成功させるには?

そんな方は、転職サポートまでおまかせできるプログラミングスクールも検討してみてもいいかもしれませんね。

無料で体験レッスンを1週間受けられるスクールや、給付金により実質15万円以下で6ヶ月も学べるスクールもありますので、まずは気軽に無料カウンセリングを受けてみてはいかがでしょうか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フルスタックWebエンジニアであり、プログラミングスクール講師でもあります。
プログラミングスクールのカリキュラム執筆にも携わっており、プログラミング教材に精通しています。
Rails / React / Next.js / Vue.js / AWS が得意技術。

目次