📝

Firestoreサブコレクションへデータ追加|Firebase v9

2022/07/06に公開

Firebaseバージョン9でサブコレクション(入れ子、多階層のコレクション)へのデータ追加についてメモしたいと思います。

v9でサブコレクションへデータ(今回はオブジェクト)を追加

結論から書きますと以下のようになります。

import { addDoc, collection, doc, getFirestore } from "firebase/firestore";
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const collectionPath = collection(db, "collection1", cid1, "collection2");
addDoc(collectionPath, addObject);

まずはaddDocを使用した書き方から解説してみます。

addDocはサブコレクションのドキュメント名を自動生成の乱英数字で生成したい場合に便利です。

4行目のコレクションもv9で書き方が変わっており前述の通りサブコレクションまでを引数に含めて指定しています。
collection1は最上階のコレクション、cid1はドキュメントに指定するIDを格納した変数、collection2は第2階層のコレクションという形です。
コレクションのパスが指定できたらaddDocの第一引数に渡してあげます。
addObjectはフィールドに追加するオブジェクトです。
つまりcollection1/cid1/collection2/makedaddDocid/addObjectのような形で
Firestoreにデータが追加されます。
makedaddDocidというのはaddDocが自動生成した乱英数字です。

ただこのmakedaddDocid部分を自分で指定したい場合というのも往々にしてあると思います。
そんな時は次のsetDocを使用します。

import { addDoc, collection, doc } from "firebase/firestore";
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const documentPath = doc(db, "collection1", cid1, "collection2", "icreatedid");
setDoc(documentPath, addObject);

sedDocに関しては第一引数にサブコレクションのドキュメントまでのパスを指定します。
これで自分でサブコレクションのドキュメントを指定することができるようになりました。
上記では文字列で静的にicreatedidという値を入れていますが
もちろんプログラムで動的に生成して変数に格納するという形でも大丈夫です。

v8での書き方から変化したポイント

参考までにcollection,doc関数の書き方がv9になって変わっています。
前述の通り引数にはサブコレクションとドキュメント名をセットで指定する形になりました。
ここではv8の書き方を見てみましょう。

const cid1Ref = db.collection('collection1').doc(cid1);
const cid2Ref = cid1Ref.collection('collection2').doc();
cid2Ref.set(addObject);

少し解説するとdoc()はmakedaddDocidを生成してくれるのでここではaddDocの役割となりますが
doc(cid1)のように指定することで自分でドキュメントIDを指定することもできます。

見ての通りJavaScriptならではのメソッドチェーンを基本とした書き方がv8まで採用されていました。
個人的な感想としては一見直感的に書けたりしますがチェーンが長くなった際は
後から見直した時に大変になることもありました。
対してv9は関数をベースとして記述することができるので
比較的コードがスッキリするのと後から見た時に読みやすさが上がっているのかなという印象があります。

参考URL

https://firebase.google.com/docs/firestore/manage-data/add-data#web-version-9_5

https://blog.ojisan.io/firestore-nest-v9/#v9-における-subcollection-の-doc-取得

https://firebase.google.com/docs/reference/js/firestore_.md#adddoc

https://firebase.google.com/docs/reference/js/firestore_.md#setdoc

https://firebase.google.com/docs/reference/js/firestore_lite.md#collection

Discussion