【React × Firebase】Firestoreからデータを取得して表示させる

はじめに

個人開発でReactとfirebaseを使って簡単なレシピサイトを作成しています。今回は食材を入力して検索ボタンをクリックするとレシピが表示される処理を書いていきます。

コード

 // レシピデータを取得する関数
  const fetchRecipes = async () => {
    try {
      // 1. Firestoreからレシピコレクションを取得します
      const querySnapshot = await getDocs(collection(database, 'recipes'));

      // 2. ドキュメントをマップして必要なデータを抽出します
      const recipesData = querySnapshot.docs.map(doc => ({
        id: doc.id,
        title: doc.data().title,
        ingredients: doc.data().ingredients,
        instructions: doc.data().instructions
      }));

      // 3. 取得したレシピデータをセット
      setRecipes(recipesData);
    } catch (error) {
      // 4. データ取得中にエラーが発生した場合のエラーハンドリング
      setError("データの取得中にエラーが発生しました。");
      setRecipes([]);
    }
  };

  useEffect(() => {
    fetchRecipes();
  }, []); // 5. 空の依存配列を渡すことで、マウント時に一度だけ実行される

1行ずつ処理の流れを解説

1.const querySnapshot = await getDocs(collection(database, 'recipes'));
Firestoreデータベースの'recipes'コレクションからドキュメントを取得します。
getDocsメソッドは指定されたコレクション内のドキュメントを非同期で取得するために使用されます。
collectionメソッドは指定されたFirestoreデータベース（database）内の特定のコレクション（'recipes'）を参照するためのメソッドです。
database: Firestoreデータベースのインスタンスを表します。Firebase SDKを初期化した際に取得することができます。
recipes: 参照したいコレクションの名前です。

2.const recipesData = querySnapshot.docs.map(doc => ({ ... }))
ドキュメントをマップして必要なデータを抜き出します。
mapメソッドは、は各ドキュメントから新しいオブジェクトを生成し、これらのオブジェクトからなる新しい配列（recipesData）を返します。
querySnapshot.docsは、Firestoreのドキュメントのスナップショットを表すオブジェクトの配列です。
id: ドキュメントの一意のIDを取得します。このIDはFirestoreで自動生成される文字列です。
data(): ドキュメントの実際のデータを取得します。このメソッドはオブジェクトを返し、ドキュメントのフィールドとその値にアクセスすることができます。

3.setRecipes(recipesData);
取得およびマップされたデータ（recipesData）でrecipesを更新します。

4.setRecipes([]);
recipesの状態配列を空の配列に設定します。これにより、エラーが発生した後に状態を既知の状態にリセットし、未定義の動作を回避します。

5.このuseEffectは空の依存配列[]のため、コンポーネントがマウントされた時に一度だけ実行されます。
コンポーネントがマウントされるとfetchRecipes()が呼び出され、データ取得処理が開始されます。

最後に

React Hooksのフックは色々な使い方ができるみたいなのでまだまだ勉強中です。
(React難しい...)