ReactでAPIからユーザー情報を取得・表示する方法

はじめに

この記事では、ReactとTypeScriptを使って、APIからユーザー情報を取得し、表示する方法を紹介します。特に、エラーハンドリングや型安全性に焦点を当てます。

方法について

1. APIからユーザー情報を取得する

まず、axiosを使ってAPIからユーザー情報を取得します。axios.get()を使ってAPIにリクエストを送り、結果を受け取ります。

2. 型安全なエラーハンドリング

TypeScriptを使っている場合、エラーハンドリングにも型安全性を保つことが重要です。isError関数を使って、エラーがError型であることを確認します。これにより、エラーハンドリング時に型安全性が確保されます。
is を使って返り値を指定している箇所がポイントです。

3. ユーザー情報を表示するコンポーネント

取得したユーザー情報を表示するコンポーネントを作成します。Userインターフェイスを定義し、useStateを使ってユーザー情報を管理します。また、エラーがある場合は、エラーメッセージを表示するようにします。

4. useEffectを利用する

useEffectを使って、コンポーネントのマウント時にAPIからユーザー情報を取得する処理を実行します。useEffectは、コンポーネントのライフサイクルに合わせて副作用を実行するために使用します。
今回はマウント時に実行します。

実装例

import axios from "axios";
import { useCallback, useEffect, useState } from "react";

/**
 * エラー型かどうかを判定する関数
 */
const isError = (error: unknown): error is Error => {
  return error instanceof Error;
};

interface User {
  id: string;
  name: string;
}
const UserInfo = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [error, setError] = useState<Error | undefined>(undefined);

  const fetchUser = useCallback(async () => {
    try {
      const response = axios.get("https://jsonplaceholder.typicode.com/users");
      setUsers(response.data);
    } catch (e) {
      if (isError(e)) {
        setError(e);
      }
    }
  }, []);

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

  if (error) {
    return <div>{error.message}</div>;
  }

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

まとめ

型安全性を保ちながらエラーハンドリングを行い、useEffectを使ってAPIからデータを取得する方法を紹介しました。この記事が、データを取得・表示する機能を実装する際の参考になれば幸いです。