【第6回】React初心者入門！useEffectでAPIからデータ取得！読み込み中・エラー表示まで実装しよう

[React / ブラウザ]                    [Hono / Workers]              [D1 Database]
      │                                     │                             │
      │ 1. useEffect で fetch() 実行 ─────> │                             │
      │                                     │ 2. SQLでデータ取得 ───────> │
      │                                     │ <────── データ返却 ─────────│
      │ <───── 3. JSONデータでレスポンス ────│                             │
      │                                     
 4. useState で画面を再描画

// ❌ やってはいけない書き方（無限ループが発生する）
export default function UserList() {
  const [users, setUsers] = useState([]);

  // コンポーネントがレンダリングされるたびに fetch が走り、
  // setState されることで再レンダリングが起き、無限ループに陥る！
  fetch('https://api.example.com/users')
    ? .then(res => res.json())
    ? .then(data => setUsers(data));

  return <div>...</div>;
}

// ⭕ 正しい書き方
useEffect(() => {
  // 画面が表示された初回1回だけ実行される
  fetch('https://api.example.com/users')
    ? .then(res => res.json())
    ? .then(data => setUsers(data));
}, []); // ← 第2引数の「空配列 []」が「初回のみ実行」の意味！

import { useState, useEffect } from 'react';

export default function UserList() {
  // 1. 取得したデータを保持する State
  const [users, setUsers] = useState([]);
  // 2. 読み込み中かどうかを管理する State
  const [loading, setLoading] = useState(true);
  // 3. エラー情報を管理する State
  const [error, setError] = useState(null);

  useEffect(() => {
    // 非同期関数を定義して呼び出す
    const fetchUsers = async () => {
      try {
        setLoading(true);
        // Hono APIの基本URL（※必要に応じて環境変数化）
        const response = await fetch('https://your-worker.workers.dev/api/users');

        if (!response.ok) {
          throw new Error(`HTTPエラー! status: ${response.status}`);
        }

        const data = await response.json();
        setUsers(data); // 取得したデータを保存
      } catch (err) {
        console.error('データ取得失敗:', err);
        setError('データの取得に失敗しました。');
      } finally {
        setLoading(false); // 成功・失敗に関わらずローディング終了
      }
    };

    fetchUsers();
  }, []); // 初回描画時のみ実行

  // ① 読み込み中の表示
  if (loading) {
    return <p>データを読み込み中...</p>;
  }

  // ② エラー発生時の表示
  if (error) {
    return <p style={{ color: 'red' }}>{error}</p>;
  }

  // ③ 正常にデータが取得できた場合の表示
  return (
    <div>
      <h2>ユーザー一覧</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
}