Firestore を Vue から使ってみる

zako-lab929.hatenablog.com

さて、Firestore は使ったことないのですが、
メモがてら使ってみようという魂胆で進めていきます。

今回も前提として各種準備が終わっている状態からのスタートになります。

前提
- 前提1
- 前提2
Firebase SDK のセットアップ
Firestore にデータを追加する
- Firestore を確認する
Firestore からデータを取得する
Firestore のデータ構造について
まとめ

前提

この記事では前提として以下の準備がされている状態からスタートしています。

これは、必ず最初にやるもので、
Realtime Database を使う場合も Authentication を使う場合も、
Firestore を使う場合も必須です。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxx",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);

export { firestore };

firestore を export してます。

Firestore にデータを追加する

const onSend = async () => {
  try {
    const docRef = await addDoc(collection(firestore, "users"), {
      firstName: "John",
      familyName: "Doe",
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (err) {
    console.error("Error adding document: ", err);
  }
};

イメージとしては users テーブルに{ "firstName": "John", "familyName": "Doe" }を登録した感じ
Realtime Database的にはpush()したのと同じ感じ

Firestore を確認する

Firestore からデータを取得する

const onRecv = async () => {
  const snapshots = await getDocs(collection(firestore, "users"));
  snapshots.forEach((doc) => {
    const data = doc.data();
    console.log(`${doc.id} => ${JSON.stringify(data, null, 2)}`);
  });
};

イメージとしては users テーブルの全レコードを取得した感じ
Realtime Database的にはget()したのと同じ感じ

Firestore のデータ構造について

Firestore を扱う上で重要になるのが コレクション と ドキュメント のようです。

コレクション

コレクション は、ドキュメントを入れておくフォルダのようなもののようです。

ドキュメント

ドキュメント は、データの塊を表すものようです。
上記の登録データを例にすると、以下がドキュメントとなります。

{
    "firstName": "John",  // データ
    "familyName": "Doe",  // データ
}

サブコレクション

ドキュメント には、更に コレクション を入れることが可能なようです。

コレクションにコレクションは登録できないっぽいところが注意

{
  "schools": [  // <- コレクション
    "XX School": {  // <- ドキュメント
      "name": "XX School"  // <- データ
      "classrooms": [  // <- コレクション
        "1-1": {},  // <- ドキュメント
        "1-2": {},  // <- ドキュメント
        "2-1": {},  // <- ドキュメント
      ]
    },
    "YY School": {  // <- ドキュメント
      "name": "YY School"  // <- データ
      "classrooms": [  // <- コレクション
        "1-1": {},  // <- ドキュメント
        "1-2": {},  // <- ドキュメント
        "2-1": {},  // <- ドキュメント
      ]
    }
  ]
}