React ファンクショナルコンポーネント開発における非同期処理の羅針盤：Async/Await の詳細ガイド

2024-04-14

React ファンクショナルコンポーネントは、非同期処理を扱う際に async/await を活用することで、より読みやすく、メンテナンスしやすいコードを書くことができます。このガイドでは、async/await を用いた非同期処理の実装方法を、分かりやすく詳細に解説します。

async/await の基礎

まず、async/await の基本的な仕組みを理解しておきましょう。

1 async キーワード

関数の前に async キーワードを付加することで、その関数を非同期関数として宣言できます。非同期関数は、非同期処理を含むコードを記述することができます。

await キーワードは、非同期処理の結果を待機するために使用されます。await キーワードを Promise や非同期処理を返す関数と共に使用することで、その処理が完了するまでコードの実行を一時停止し、結果を取得することができます。

React ファンクショナルコンポーネントで async/await を使用するには、以下の手順に従います。

1 データフェッチング

API 呼び出しなどの非同期処理を行う場合、async/await を用いてデータをフェッチすることができます。

async function MyComponent() {
  const [data, setData] = useState([]);

  try {
    const response = await fetch('https://api.example.com/data');
    const responseData = await response.json();
    setData(responseData);
  } catch (error) {
    console.error(error);
  }

  return (
    <div>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
}

この例では、async 関数 MyComponent を定義し、非同期処理を含むコードを記述しています。await キーワードを使用して、fetch API によるデータフェッチング結果を待機し、useState フックを使用して取得したデータをコンポーネントの状態に設定しています。

2 その他の非同期処理

データフェッチング以外にも、タイマー処理やファイル読み込みなど、様々な非同期処理に async/await を適用することができます。

useEffect フックと async/await を組み合わせることで、データフェッチングなどの非同期処理をコンポーネントのマウント時やアンマウント時などに実行することができます。

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const responseData = await response.json();
        setData(responseData);
      } catch (error) {
        console.error(error);
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
}

この例では、useEffect フックの空の依存関係配列 [] を指定することで、コンポーネントのマウント時に fetchData 関数を実行しています。fetchData 関数内で async/await を使って非同期処理を行い、取得したデータをコンポーネントの状態に設定しています。

エラー処理

async/await を使用する際には、try...catch ブロックでエラー処理を行うことが重要です。

async function MyComponent() {
  const [data, setData] = useState([]);

  try {
    const response = await fetch('https://api.example.com/data');
    const responseData = await response.json();
    setData(responseData);
  } catch (error) {
    console.error(error);
    // エラー処理
  }

  return (
    <div>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
}

この例では、try...catch ブロックを使用して、fetch API によるデータフェッチング中に発生する可能性のあるエラーを捕捉しています。

サンプルコード：非同期処理とエラー処理

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

function MyComponent() {
  const [data, setData] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const responseData = await response.json();
        setData(responseData);
      } catch (error) {
        setErrorMessage(error.message);
        console.error(error);
      }
    }

    fetchData();
  }, []);

  if (errorMessage) {
    return <div className="error-message">{errorMessage}</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
}

export default MyComponent;

解説

このコンポーネントは、data と errorMessage という 2 つの状態変数を定義します。
useEffect フックを使用して、コンポーネントのマウント時に非同期処理を実行します。
fetchData 関数は、async/await を使って fetch API によるデータフェッチングを行います。
データフェッチングが成功した場合、取得したデータを data 状態変数に設定します。
エラーが発生した場合、エラーメッセージを errorMessage 状態変数に設定し、コンソールにログ出力します。
errorMessage 状態変数に値がある場合は、エラーメッセージを表示する要素をレンダリングします。
それ以外の場合は、取得したデータを表示する要素をレンダリングします。

このサンプルコードをどのように拡張できますか？

異なる API エンドポイントからデータをフェッチする
データをフィルタリングまたはソートする
コンポーネント内でデータを加工する
アニメーションやその他の視覚効果を追加する
テストを記述して、コードの動作を確認する

このサンプルコードは、React ファンクショナルコンポーネントで async/await を使って非同期処理を行うための出発点として役立ちます。ぜひ、このコードを参考に、独自の機能やロジックを追加してみてください。

React ファンクショナルコンポーネントで非同期処理を行うその他の方法

Promise API

async/await が登場する以前は、非同期処理を扱うために Promise API が一般的に使用されていました。Promise は、非同期処理の結果を表現するオブジェクトです。

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

  fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((responseData) => setData(responseData))
    .catch((error) => {
      console.error(error);
    });

  return (
    <div>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
}