firebaseのWebバージョン9(modular)について

15:21・2021/09/28 公開

15:12・2021/10/14 更新

書き方が新しくなっててわからん!!!ので必要な部分だけ自分なりに解釈したもの

データの追加

ドキュメント名を指定しない(ドキュメント自動生成)

https://firebase.google.com/docs/firestore/quickstart?hl=ja#web-version-9_2

import { collection, addDoc } from "firebase/firestore";//モジュールの読み込み

try {
  const docRef = await addDoc(collection(db, "users"), {
 //データベースに接続し、usersというコレクションにドキュメントを追加する
    first: "Ada",
    last: "Lovelace",
    born: 1815
  });
  console.log("Document written with ID: ", docRef.id);
  //追加されたドキュメントの名前が帰ってくる(?)(undefinedだった)
} catch (e) {
  console.error("Error adding document: ", e);//エラーをキャッチ
}

vue.jsだと「await」が予約語になっていて使えないので消しちゃいました。
今のところ問題なく動いています。

ドキュメント名を指定して作成or上書き

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja

import { doc, setDoc } from "firebase/firestore";

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
 //citiesコレクションのLAドキュメントに上書き
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

【重要】上書きのオプション

import { doc, setDoc } from "firebase/firestore";

const cityRef = doc(db, 'cities', 'BJ');
setDoc(cityRef, { capital: true }, { merge: true });//capitalフィールドを追加したい。
//margeをfalseにするとBJドキュメント内の全てのフィールドが上書きされて「capital」しか残らなくなる。

どういうことかというと、「marge: false」にすると

例:LAドキュメント
name: “Los Angeles”,
state: “CA”,
country: “USA”

となっていたのが

例:LAドキュメント
capital: true

になってしまう。

この悲劇を避けたいときは「marge: true」でOK。

データの上書き

実は上書き専用の関数がある。

import { doc, updateDoc } from "firebase/firestore";

const washingtonRef = doc(db, "cities", "DC");

// Set the "capital" field of the city 'DC'
await updateDoc(washingtonRef, {
  capital: true
});

タイムスタンプ型の保存

https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja#web-version-9_2

  import { doc, setDoc, Timestamp } from "firebase/firestore";

const docData = {
    dateExample: Timestamp.fromDate(new Date("December 10, 1815")),
    //特定の日にち
    dateExample2: Timestamp.fromDate(new Date),
    //現在の時間
};
await setDoc(doc(db, "data", "one"), docData);

サブコレクションの追加

サブコレクションへのリファレンス
https://firebase.google.com/docs/firestore/data-model?hl=ja#web-version-8_3

データの追加
https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja#web-version-9_6

import { doc, setDoc, Timestamp ,collection } from "firebase/firestore";
//importする関数はカンマ区切りで必要なだけ読み込める


const ref = doc(collection(db, "users", `${user.uid}`, "notice"));
//サブコレクションへのリファレンス

setDoc(ref, {
              link: "Tutorial",
              message: "ようこそ!タップで使い方を確認",
              time: Timestamp.fromDate(new Date()),
            });
//setDocでデータを追加

collectionの中は、(db,collection,document,collection,(document))の順になっている。
公式ドキュメント「コレクションとドキュメントが交互になるよう注意してください。」

別のドキュメントを同じサブコレクションに同時に追加したいときは、リファレンスを2個作る。

const ref = doc(collection(db, "users", `${user.uid}`, "notice"));//リファレンス1
const ref2 = doc(collection(db, "users", `${user.uid}`, "notice"));//リファレンス2

setDoc(ref, {
              link: "Tutorial",
              message: "ようこそ!タップで使い方を確認",
              time: Timestamp.fromDate(new Date()),
            });
setDoc(ref2, {
              link: "Openroom",
              message: "ルームを作ろう",
              time: Timestamp.fromDate(new Date()),
            });

補足

  1. importする関数はカンマ区切りで必要なだけ読み込める
  2. 同じページで同じ関数を読み込むとエラーになる
  3. 同じモジュールから別の関数を読み込むのは問題なし
import { doc, setDoc, Timestamp ,collection } from "firebase/firestore";
//1.importする関数はカンマ区切りで必要なだけ読み込める


import { doc, setDoc, Timestamp } from "firebase/firestore";
import { doc, setDoc, collection } from "firebase/firestore";
//2.同じページで同じ関数を読み込むとエラーになる


import { doc, setDoc, Timestamp } from "firebase/firestore";
import { collection } from "firebase/firestore";
//3.同じモジュールから別の関数を読み込むのは問題なし

データの取得

データを一回取得する

https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja#get_a_document
import { doc, getDoc } from "firebase/firestore";


//1.ドキュメントに載ってるやつ
const docRef = doc(db, "cities", "SF");//リファレンスの作成
const docSnap = await getDoc(docRef);//取得をリクエスト

//docSnapに結果が入る↓
if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // doc.data() will be undefined in this case
  console.log("No such document!");
}

//2.async await が使えない場合
const docRef = doc(db, "cities", "SF");//リファレンスの作成

//取得をリクエスト
getDoc(docRef).then((docSnap)=> {
  //docSnapに結果が入っている
  docSnap.data().id //これでfieldのidが取れる
});