Firestoreにデータを保存(追加)、更新、削除、リアルタイムでのリッスンをする方法

記事を書く理由

firestoreを勉強するようになり、firebaseのdatabaseとドキュメントを混在することがよくあったので、自分の備忘録として残しておこうと思いました。

また、ここではFirestoreにデータを保存、更新、削除、リッスンの内容のみを書きます。そのため導入方法などは他の記事でお願いします。

Firestoreにおけるそれぞれの共通コード

ドキュメントの参照方法

firebase.firestore().collection('something')

somethingで特定のコレクション？データ群(どういう名前かわからないので、教えてください)にアクセスできます。

またcollectionで指定したものが存在しない場合は自動で作成してくれます。

Firestoreのドキュメントなどでは下のように参照できるようにしてありました。

Vue.js

 data() {
    return {
      memoRef: firebase.firestore().collection('memos')
    }
  }

データの追加 => add, doc().set

データの追加はaddメソッド、もしくはsetメソッドでできます。

####addメソッド
この２つの違いとしては、addメソッドでは作成時に一意なIDを自動作成してくれます。idにアクセスしたいときは.thenを使うといいかと、、、。

Vue.js

  this.memoRef.add({
    id: null,
    content: this.memo
  })
  .then(doc => {
    this.memoRef.doc(doc.id).update({
      id: doc.id
    })
  })
  .catch( => {
    // error handling
  })

####setメソッド
一方でsetメソッドはdocと一緒に用いることによって、ドキュメント名を指定することができます。データを一覧として取得したいときなどに便利です。

下のコードはFirestoreの公式ドキュメントより引用。https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja

db.collection("cities").doc("LA").set({
    name: "Los Angeles",
    state: "CA",
    country: "USA"
})
.then(function() {
    console.log("Document successfully written!");
})
.catch(function(error) {
    console.error("Error writing document: ", error);
});

またこの時にdoc()←このように何も指定しないときはaddメソッドと同じように一意なidを作成します。

データの更新 => update()

データの更新はupdateメソッドを使用します。引数に渡したオブジェクトで指定したプロパティについてデータを上書き(更新)します。

Vue.js

.then(doc => {
  this.memoRef.doc(doc.id).update({
    id: doc.id
  })
})

先ほどのaddメソッドの時に使ったコードの一部になりますが、doc()によって特定のドキュメントを指定し、idプロパティをドキュメント作成時のidに更新しています。

###データの削除　=> delete()
データの削除はdeleteメソッドで行います。updateの時と同様に特定のドキュメントを指定し、deleteメソッドを実行します。

下のコードはFirestoreの公式ドキュメントより引用。https://firebase.google.com/docs/firestore/manage-data/delete-data?hl=ja

db.collection("cities").doc("DC").delete().then(function() {
    console.log("Document successfully deleted!");
}).catch(function(error) {
    console.error("Error removing document: ", error);
});

###リアルタイムでデータをリッスンする => onSnapshot
firestoreまたdatabaseの醍醐味であるデータをリアルタイムでリッスンするためにはonSnapshotを使用します。

これは1度だけデータを取得するget()メソッドとは異なるので注意してください。(間違えて覚えていた人は自分しかいないはず、、、。)

Vue.js

   getMemos() {
      // listen memos
      this.memoRef
      .onSnapshot(querySnapshot => {
          this.memos = []
          querySnapshot.forEach(doc => {
              console.log(doc.data());
              this.memos.push(doc.data())
          });
      });
    }

またquerySnapshotに今回の場合はmemosデータが入っている？（ここについても間違っていたら教えてください)

そのためにforEachによってそれぞれのデータを取得し、memosにプッシュしています。

そして.whereメソッドで条件を指定した時でもonSnapshotで大丈夫です。(当たり前のことを言っていくスタイル)

下のコードはFirestoreの公式ドキュメントより引用。https://firebase.google.com/docs/firestore/query-data/listen?hl=ja

   db.collection("cities").where("state", "==", "CA")
    .onSnapshot(function(querySnapshot) {
        var cities = [];
        querySnapshot.forEach(function(doc) {
            cities.push(doc.data().name);
        });
        console.log("Current cities in CA: ", cities.join(", "));
    });

##まとめ
Firebaseのコードは簡単にデータを保存できますが、やっぱり取り掛かりは難しいですね。ほぼドキュメントのコピペに頼っている人生です。