1. ReactでFetch APIを使う基本の形

Fetch API（フェッチ・エーピーアイ）は、ブラウザに標準で備わっている機能で、サーバーからデータを取得するときに使います。

Reactでは、主にuseEffectフックと組み合わせて使われます。これにより、ページが表示されたときに自動で通信が行われるようになります。


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

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data))
      .catch((err) => console.error(err));
  }, []);

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

export default App;

（画面にサーバーから取得したユーザー名の一覧が表示されます）

2. ベストプラクティス1：ローディング中の状態を表示しよう

データが読み込まれている間、何も表示されないと「アプリが固まっている」と思われてしまうかもしれません。

そのため、「ローディング中です…」などの表示を入れるのがベストプラクティスです。


const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch("URL")
    .then((res) => res.json())
    .then((data) => {
      setUsers(data);
      setLoading(false);
    });
}, []);

if (loading) return <p>読み込み中です…</p>;

3. ベストプラクティス2：エラー処理は必ず書こう

サーバーが落ちていたり、通信に失敗したとき、ユーザーに何が起こったか分からないのは困ります。

そこで、.catch()を使ってエラーメッセージを表示するのが基本です。


.catch((error) => {
  console.error("通信エラー:", error);
  setError("データの取得に失敗しました");
});

4. ベストプラクティス3：非同期関数をasync/awaitで書こう

初心者には.then()よりもasync/awaitの書き方のほうが読みやすいという声も多いです。

より見やすく、エラー処理もしやすいので、Reactではよく使われています。


useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch("URL");
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      setError("取得に失敗しました");
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

5. ベストプラクティス4：useEffectの依存配列に注意しよう

useEffectの第二引数には[]（空の配列）を渡すと、最初の1回だけ実行されます。

この書き方にすることで、ページ読み込み時のみFetchが動くようになり、無限ループになるのを防げます。

6. ベストプラクティス5：コンポーネントがアンマウントされたときのキャンセル処理

画面を切り替えた直後に通信が終わると、すでに消えたコンポーネントにsetStateしてエラーになることがあります。

その防止策として、AbortControllerを使う方法があります。


useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const res = await fetch("URL", { signal: controller.signal });
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      if (err.name === "AbortError") {
        console.log("リクエストが中断されました");
      }
    }
  };

  fetchData();

  return () => {
    controller.abort();
  };
}, []);