ReactのuseEffectを使ったカスケードデータフェッチ（親子データの取得）を解説

import { useEffect } from 'react';

useEffect(() => {
  // 副作用処理（API呼び出し、データ取得など）
}, [依存関係]);

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // 空の配列で初回レンダリング時のみ実行

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
};

import { useState, useEffect } from 'react';

const ParentDataComponent = () => {
  const [parentData, setParentData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchParentData = async () => {
      try {
        const response = await fetch('https://api.example.com/parent');
        const data = await response.json();
        setParentData(data);  // 親データをステートに保存
      } catch (error) {
        console.error('Error fetching parent data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchParentData();  // 親データの取得を開始
  }, []);  // 初回レンダリング時にのみ実行

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
    </div>
  );
};

import { useState, useEffect } from 'react';

const ParentChildDataComponent = () => {
  const [parentData, setParentData] = useState(null);
  const [childData, setChildData] = useState(null);
  const [loading, setLoading] = useState(true);

  // 親データの取得
  useEffect(() => {
    const fetchParentData = async () => {
      try {
        const response = await fetch('https://api.example.com/parent');
        const data = await response.json();
        setParentData(data);
      } catch (error) {
        console.error('Error fetching parent data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchParentData();
  }, []);

  // 親データが取得された後に子データを取得
  useEffect(() => {
    if (parentData) {
      const fetchChildData = async () => {
        try {
          const response = await fetch(`https://api.example.com/child/${parentData.id}`);
          const data = await response.json();
          setChildData(data);  // 子データを保存
        } catch (error) {
          console.error('Error fetching child data:', error);
        }
      };
      fetchChildData();
    }
  }, [parentData]);  // parentDataが変更されたときに実行

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
      <h3>子データ</h3>
      <pre>{JSON.stringify(childData, null, 2)}</pre>
    </div>
  );
};

import { useState, useEffect } from 'react';

const ParentChildDataComponent = () => {
  const [parentData, setParentData] = useState(null);
  const [childData, setChildData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 親データの取得
  useEffect(() => {
    const fetchParentData = async () => {
      try {
        const response = await fetch('https://api.example.com/parent');
        const data = await response.json();
        setParentData(data);  // 親データを状態に保存
      } catch (error) {
        setError('親データの取得に失敗しました');
        console.error('Error fetching parent data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchParentData();
  }, []);

  // 親データが取得された後に子データを取得
  useEffect(() => {
    if (parentData) {
      const fetchChildData = async () => {
        try {
          const response = await fetch(`https://api.example.com/child/${parentData.id}`);
          const data = await response.json();
          setChildData(data);  // 子データを状態に保存
        } catch (error) {
          setError('子データの取得に失敗しました');
          console.error('Error fetching child data:', error);
        }
      };
      fetchChildData();
    }
  }, [parentData]);  // parentDataが変更されたときに実行

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

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
      <h3>子データ</h3>
      <pre>{JSON.stringify(childData, null, 2)}</pre>
    </div>
  );
};

useEffect(() => {
  const fetchData = async () => {
    try {
      // 並列で親データと子データを取得
      const [parentRes, childRes] = await Promise.all([
        fetch('https://api.example.com/parent'),
        fetch('https://api.example.com/child')
      ]);

      const parentData = await parentRes.json();
      const childData = await childRes.json();

      setParentData(parentData);
      setChildData(childData);
    } catch (error) {
      console.error('データの取得に失敗しました:', error);
    }
  };

  fetchData();
}, []);  // 初回レンダリング時にのみ実行

useEffect(() => {
  if (parentData) {
    const fetchChildData = async () => {
      const response = await fetch(`https://api.example.com/child/${parentData.id}`);
      const data = await response.json();
      setChildData(data);
    };
    fetchChildData();
  }
}, [parentData]);  // parentDataが変更されたときのみ再実行

useEffect(() => {
  const fetchParentData = async () => {
    const cachedData = localStorage.getItem('parentData');
    if (cachedData) {
      setParentData(JSON.parse(cachedData));  // キャッシュからデータを取得
      setLoading(false);
      return;
    }

    try {
      const response = await fetch('https://api.example.com/parent');
      const data = await response.json();
      localStorage.setItem('parentData', JSON.stringify(data));  // データをキャッシュに保存
      setParentData(data);
    } catch (error) {
      console.error('親データの取得に失敗しました:', error);
    } finally {
      setLoading(false);
    }
  };

  fetchParentData();
}, []);  // 初回レンダリング時にのみ実行

import { useState, useEffect } from 'react';

const UserDetails = () => {
  const [users, setUsers] = useState([]);
  const [userDetails, setUserDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ユーザーリストの取得
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://api.example.com/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        setError('ユーザーリストの取得に失敗しました');
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  // 特定のユーザー詳細を取得
  const fetchUserDetails = async (userId) => {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserDetails(data);
    } catch (error) {
      setError('ユーザー詳細の取得に失敗しました');
    }
  };

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

  return (
    <div>
      <h3>ユーザーリスト</h3>
      <ul>
        {users.map(user => (
          <li key={user.id} onClick={() => fetchUserDetails(user.id)}>
            {user.name}
          </li>
        ))}
      </ul>

      {userDetails && (
        <div>
          <h3>ユーザー詳細</h3>
          <pre>{JSON.stringify(userDetails, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

import { useState, useEffect } from 'react';

const Dashboard = () => {
  const [statistics, setStatistics] = useState(null);
  const [details, setDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ダッシュボード統計の取得
  useEffect(() => {
    const fetchStatistics = async () => {
      try {
        const response = await fetch('https://api.example.com/statistics');
        const data = await response.json();
        setStatistics(data);
      } catch (error) {
        setError('統計情報の取得に失敗しました');
      } finally {
        setLoading(false);
      }
    };

    fetchStatistics();
  }, []);

  // 詳細データの取得
  const fetchDetails = async (statId) => {
    try {
      const response = await fetch(`https://api.example.com/statistics/${statId}`);
      const data = await response.json();
      setDetails(data);
    } catch (error) {
      setError('詳細データの取得に失敗しました');
    }
  };

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

  return (
    <div>
      <h3>ダッシュボード統計</h3>
      <ul>
        {statistics && statistics.map(stat => (
          <li key={stat.id} onClick={() => fetchDetails(stat.id)}>
            {stat.name}: {stat.value}
          </li>
        ))}
      </ul>

      {details && (
        <div>
          <h3>詳細データ</h3>
          <pre>{JSON.stringify(details, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

import { useState, useEffect } from 'react';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  const [productDetails, setProductDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 商品一覧の取得
  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('https://api.example.com/products');
        const data = await response.json();
        setProducts(data);
      } catch (error) {
        setError('商品一覧の取得に失敗しました');
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  // 商品詳細の取得
  const fetchProductDetails = async (productId) => {
    try {
      const response = await fetch(`https://api.example.com/products/${productId}`);
      const data = await response.json();
      setProductDetails(data);
    } catch (error) {
      setError('商品詳細の取得に失敗しました');
    }
  };

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

  return (
    <div>
      <h3>商品一覧</h3>
      <ul>
        {products.map(product => (
          <li key={product.id} onClick={() => fetchProductDetails(product.id)}>
            {product.name}
          </li>
        ))}
      </ul>

      {productDetails && (
        <div>
          <h3>商品詳細</h3>
          <pre>{JSON.stringify(productDetails, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

import { useState, useEffect } from 'react';

const CascadeFetchWithErrorHandling = () => {
  const [parentData, setParentData] = useState(null);
  const [childData, setChildData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchParentData = async () => {
      try {
        const response = await fetch('https://api.example.com/parent');
        if (!response.ok) throw new Error('親データの取得に失敗しました');
        const data = await response.json();
        setParentData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchParentData();
  }, []);

  useEffect(() => {
    if (parentData) {
      const fetchChildData = async () => {
        try {
          const response = await fetch(`https://api.example.com/child/${parentData.id}`);
          if (!response.ok) throw new Error('子データの取得に失敗しました');
          const data = await response.json();
          setChildData(data);
        } catch (err) {
          setError(err.message);
        }
      };

      fetchChildData();
    }
  }, [parentData]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
      <h3>子データ</h3>
      <pre>{JSON.stringify(childData, null, 2)}</pre>
    </div>
  );
};

import { useState, useEffect } from 'react';

const CascadeFetchWithRetry = () => {
  const [parentData, setParentData] = useState(null);
  const [childData, setChildData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [retryCount, setRetryCount] = useState(0);  // リトライ回数

  const fetchParentData = async () => {
    try {
      const response = await fetch('https://api.example.com/parent');
      if (!response.ok) throw new Error('親データの取得に失敗しました');
      const data = await response.json();
      setParentData(data);
    } catch (err) {
      if (retryCount < 3) {
        setRetryCount(prevCount => prevCount + 1);
        setTimeout(fetchParentData, 2000);  // 2秒後に再試行
      } else {
        setError('親データの取得に失敗しました');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchParentData();
  }, [retryCount]);  // リトライ回数が変更されるたびに再実行

  useEffect(() => {
    if (parentData) {
      const fetchChildData = async () => {
        try {
          const response = await fetch(`https://api.example.com/child/${parentData.id}`);
          if (!response.ok) throw new Error('子データの取得に失敗しました');
          const data = await response.json();
          setChildData(data);
        } catch (err) {
          setError('子データの取得に失敗しました');
        }
      };

      fetchChildData();
    }
  }, [parentData]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error} <button onClick={() => setRetryCount(0)}>再試行</button></div>;

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
      <h3>子データ</h3>
      <pre>{JSON.stringify(childData, null, 2)}</pre>
    </div>
  );
};

import { useState, useEffect } from 'react';

const CascadeFetchWithFallback = () => {
  const [parentData, setParentData] = useState(null);
  const [childData, setChildData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchParentData = async () => {
    try {
      const response = await fetch('https://api.example.com/parent');
      if (!response.ok) throw new Error('親データの取得に失敗しました');
      const data = await response.json();
      setParentData(data);
    } catch (err) {
      setError('親データの取得に失敗しました。フォールバックデータを表示します。');
      setParentData({ id: 1, name: 'フォールバックデータ' });  // フォールバックデータ
    } finally {
      setLoading(false);
    }
  };

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

  useEffect(() => {
    if (parentData) {
      const fetchChildData = async () => {
        try {
          const response = await fetch(`https://api.example.com/child/${parentData.id}`);
          if (!response.ok) throw new Error('子データの取得に失敗しました');
          const data = await response.json();
          setChildData(data);
        } catch (err) {
          setChildData({ name: '子データの読み込みに失敗' });  // フォールバック子データ
        }
      };

      fetchChildData();
    }
  }, [parentData]);

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

  return (
    <div>
      <h3>親データ</h3>
      <pre>{JSON.stringify(parentData, null, 2)}</pre>
      <h3>子データ</h3
<h2>カスケードデータフェッチのパフォーマンス最適化</h2>

カスケードデータフェッチは、複数のデータを非同期に取得するプロセスですが、複数のリクエストを順番に行うことがパフォーマンスに影響を与える可能性があります。特に、大規模なデータセットや複雑なユーザーインターフェースを持つアプリケーションでは、データ取得の効率化が重要です。このセクションでは、カスケードデータフェッチにおけるパフォーマンス最適化のアプローチを紹介します。

<h3>1. 並列リクエストの活用</h3>  
親データの取得後、子データの取得を順番に行うと、処理が直列的になり、全体の処理時間が長くなります。これを解決するためには、親データの取得と子データの取得を並列で行う方法が有効です。`Promise.all`を使用して、複数の非同期リクエストを並列に処理できます。

例えば、複数の子データを親データを取得後に並列でフェッチする場合、次のように実装します。

    // 子データの並列取得
    const childRequests = parent.childrenIds.map(id =>
      fetch(`https://api.example.com/child/${id}`).then(res => res.json())
    );

    const children = await Promise.all(childRequests);
    setChildData(children);
  } catch (err) {
    setError('データ取得に失敗しました: ' + err.message);
  } finally {
    setLoading(false);
  }
};

fetchData();

このアプローチでは、親データが取得された後に、親データに基づいて複数の子データを並列にリクエストしています。これにより、リクエストの待機時間を短縮し、全体のパフォーマンスが向上します。

<h3>2. ページネーションと遅延読み込みの活用</h3>  
データ量が非常に多い場合、一度にすべてのデータを取得することはパフォーマンスに悪影響を与えます。この場合、ページネーション（分割読み込み）や遅延読み込み（インフィニットスクロール）を活用することが効果的です。これにより、一度に取得するデータの量を制限し、UIのパフォーマンスを最適化できます。

例えば、子データが大量にある場合、最初に最初のページだけを取得し、ユーザーがスクロールしたときに次のページを読み込むようにします。

    // ページネーションを利用して子データを取得
    const childResponse = await fetch(`https://api.example.com/child?page=${page}`);
    if (!childResponse.ok) throw new Error('子データの取得に失敗しました');
    const children = await childResponse.json();
    setChildData(prevChildren => [...prevChildren, ...children]);
  } catch (err) {
    setError('データ取得に失敗しました: ' + err.message);
  } finally {
    setLoading(false);
  }
};

fetchData();

この例では、子データをページネーションで取得し、ボタンをクリックすることで次のページを読み込むようになっています。大量のデータを一度に読み込むのではなく、必要な分だけを取得し、UIを動的に更新しています。

<h3>3. データのキャッシュと再利用</h3>  
複数回同じデータをリクエストすることは、無駄なネットワークトラフィックを生む原因になります。データを一度取得した後、ローカルのキャッシュに保存して再利用することで、無駄なリクエストを防ぎ、パフォーマンスを向上させることができます。`localStorage`や`sessionStorage`、あるいは専用のキャッシュライブラリを使用して、データをキャッシュする方法があります。

    // 子データもキャッシュを確認
    let children = localStorage.getItem('childData');
    if (!children) {
      const childResponse = await fetch(`https://api.example.com/child`);
      if (!childResponse.ok) throw new Error('子データの取得に失敗しました');
      children = await childResponse.json();
      localStorage.setItem('childData', JSON.stringify(children));
    } else {
      children = JSON.parse(children);
    }

    setChildData(children);
  } catch (err) {
    setError('データ取得に失敗しました: ' + err.message);
  } finally {
    setLoading(false);
  }
};

fetchData();

この例では、親データと子データを`localStorage`に保存して再利用しています。データがキャッシュされてい
<h2>カスケードデータフェッチのUX向上と最適化</h2>

カスケードデータフェッチを実装する際、単にデータを取得するだけでなく、ユーザー体験（UX）を最適化することが重要です。データが遅れて読み込まれると、ユーザーはアプリケーションの応答性に不満を持つことがあります。このセクションでは、データ取得中のUX向上と最適化の方法を探ります。

<h3>1. ローディングインディケーターの表示</h3>  
データがフェッチされている間、ユーザーにはローディングインディケーターを表示することで、処理中であることを明示的に伝え、ユーザーの不安を軽減できます。ローディングインディケーターには、スピナーやプログレスバーなどを使用することが一般的です。

例えば、以下のようにスピナーを表示する方法があります。

    const childResponse = await fetch(`https://api.example.com/child`);
    if (!childResponse.ok) throw new Error('子データの取得に失敗しました');
    const children = await childResponse.json();
    setChildData(children);
  } catch (err) {
    setError('データ取得に失敗しました');
  } finally {
    setLoading(false);
  }
};

fetchData();

このスピナーは、データが取得中であることをユーザーに視覚的に伝えます。

<h3>2. スケルトンローディング</h3>  
スケルトンローディングは、データがまだ読み込まれていない状態で、ページの構造を模したプレースホルダー（骨組み）を表示する手法です。このアプローチは、ローディングインディケーターよりも洗練されており、ユーザーにページのレイアウトをすばやく理解させることができます。スケルトンローディングは、特にリストやカードなどの複数のコンテンツがある場合に有効です。

以下は、スケルトンローディングの例です。

    const childResponse = await fetch(`https://api.example.com/child`);
    if (!childResponse.ok) throw new Error('子データの取得に失敗しました');
    const children = await childResponse.json();
    setChildData(children);
  } catch (err) {
    setError('データ取得に失敗しました');
  } finally {
    setLoading(false);
  }
};

fetchData();

スケルトンローディングは、データが遅れている間でも、レイアウトがしっかりと構成されていることを示します。

<h3>3. エラーの優れたユーザー通知</h3>  
データ取得に失敗した場合、エラーをユーザーに知らせる方法を最適化することも重要です。単に「エラーが発生しました」と表示するのではなく、ユーザーがその後どうすべきかを明確に案内することが求められます。例えば、再試行ボタンを表示したり、具体的なエラーメッセージを提供することで、ユーザーは問題をより理解しやすくなります。

  const childResponse = await fetch(`https://api.example.com/child`);
  if (!childResponse.ok) throw new Error('子データの取得に失敗しました');
  const children = await childResponse.json();
  setChildData(children);
} catch (err) {
  setError('データ取得に失敗しました。再試行してください。');
} finally {
  setLoading(false);
}

再試行ボタンを表示し、ユーザーが簡単に操作できるようにすることで、エラー後のユーザー体験を改善します。

<h3>4. プリフェッチとインタラクション</h3>  
データを事前にフェッチしておくことで、ユーザーが必要とするデータを即座に提供でき、UXを向上させることができます。例えば、ユーザーが次に必要とする可能性があるデータを予測してプリフェッチすることで、インタラクションの待機時間を短縮します。

例えば、あるページを表示する前に、そのページに必要なデータをバックグラウンドで事前に取得しておく方法です。