Firestoreドキュメントに紐づくサブコレクションの取得方法

Firestoreを使っている際、特定のドキュメントに紐づくサブコレクションを取得する方法がわからずハマったため、備忘録としてまとめます。

バージョン

• vue 3.3.11
• firebase 10.8.0

記事の信頼性

• ぼくは独学で未経験から従業員300名以上の自社開発企業へ転職しました。
• 実務ではVue.jsとRailsを毎日書いています。
• 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。

問題

ぼくは現在、Vue.jsとFirebaseを使い、個人開発でクイズアプリを作っています。

Firestoreのトップコレクションとしてquizzesコレクションが、そのサブコレクションとして選択肢を表すchoicesコレクションが存在しています。

特定のクイズに紐づく選択肢をすべて取得したかったのですが、やり方がわかりませんでした、、。

解決策

結論として、以下のようにコードを記述すればOKです。

import { collection, getDocs } from 'firebase/firestore'
import { db } from '@/firebase'

// 特定の quizId に紐づく choices コレクションのデータを取得
const getChoicesForQuiz = async (quizId: string) => {
  // quizId を使用して choices コレクションへの参照を作成
  const choicesCollectionRef = collection(db, 'quizzes', quizId, 'choices');

  // choices コレクションのドキュメントを取得
  const choicesSnapshot = await getDocs(choicesCollectionRef);

  // choices ドキュメントのデータを配列に変換
  const choices = choicesSnapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));

  return choices
}

これでサブコレクションのデータを取得することができました！

おわりに

今回はquizzesコレクションの配下にサブコレクションとしてchoicesコレクションが設定された、階層構造となっている場合の取得方法です。

親子関係のコレクションが同一階層に定義されている場合の取得方法については、↓の記事をご確認ください。

あわせて読みたい

Firestoreで参照フィールドを使用してデータを取得する方法 ぼくは今、Vue.jsとFirestoreでクイズアプリを作っています。 Firestoreで作成したコレクションから参照フィールドを使用してデータを取得する方法がわからなかったため...

というか、階層構造の場合でも、↑の記事のやり方を使うこともできます。

技術書が好きなエンジニア向け

あわせて読みたい

【エンジニア向け】効率的な技術書の読み方5選【経験談】 スキルアップに直結させるための効率的な技術書の読み方を知りたくないですか？この記事ではエンジニア向けに効果的なインプットのための技術書の読み方を5つ紹介します。最後まで読めば自分に合う読み方が1つくらい見つかるはずです。ぜひご一読ください。