firebase v9 tips

初期化（vue.jsの場合）

モジュール

firebase@9.15.0
vue2系

ディレクトリ構成

大まかな構成として、pluginsのfirebaseディレクトリで初期化をし、api keyについては、ドットエンブファイルを使用する。

.
├── src
│   ├── assets
│   ├── components
│   ├── main.js
│   ├──App.vue
│   └── plugins
│       └──firebase
│           └── index.ts
│   
~~
├── .env.prod
└── .env.prod

.env

開発環境と本番環境でfirebaseのプロジェクトを変える場合を想定した設定

.env.develop

VUE_APP_FIREBASE_APIKEY = APIKEY
VUE_APP_FIREBASE_AUTHDOMAIN =　AUTHDOMAIN
VUE_APP_FIREBASE_PROJECTID = PROJECTID
VUE_APP_FIREBASE_STORAGE_BUCKET = BUCKET
VUE_APP_FIREBASE_MESSAGING_SENDER_ID = SENDER_ID
VUE_APP_FIREBASE_APPID = APPID
VUE_APP_FIREBASE_MEASUREMENT_ID = MEASUREMENT_ID

.env.prod

VUE_APP_FIREBASE_APIKEY = APIKEY
VUE_APP_FIREBASE_AUTHDOMAIN =　AUTHDOMAIN
VUE_APP_FIREBASE_PROJECTID = PROJECTID
VUE_APP_FIREBASE_STORAGE_BUCKET = BUCKET
VUE_APP_FIREBASE_MESSAGING_SENDER_ID = SENDER_ID
VUE_APP_FIREBASE_APPID = APPID
VUE_APP_FIREBASE_MEASUREMENT_ID = MEASUREMENT_ID

plugins/firebaseの設定

今回はfirestoreとauthを使用する想定での初期化だが、storageを使用したい場合にはstorageの初期化をここで行い、exportしておく。

plugins/firebase/index.js

import { initializeApp } from "firebase/app"
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
    apiKey: process.env.VUE_APP_FIREBASE_APIKEY,
    authDomain: process.env.VUE_APP_FIREBASE_AUTHDOMAIN,
    projectId: process.env.VUE_APP_FIREBASE_PROJECTID,
    storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET ,
    messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.VUE_APP_FIREBASE_APPID,
}


initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore();
export { db, auth }

storeの使い方

参照&取得

//コレクション
const colRef = collection(db, コレクション名);

//単一のドキュメントへの参照
const docRef = doc(コレクションへの参照, ドキュメント名);

//全ドキュメントへの参照&取得
const colQuerySnapshot = await getDocs(colRef);
colQuerySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});

//複数ドキュメントへの参照&取得
const querySnapshot = getDocs(query(colRef, where("age", "==", '20')));
querySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});

追加

// 任意のドキュメントIDを付与する。ドキュメントを上書きをする。ドキュメントが存在しない場合には新たに生成される。
setDoc(docRef,data)

// ランダムなIDが付与されたドキュメントが作成される。
await addDoc(colRef, data )