【Firebase+Firestore】コレクションの変更を監視する

「ドキュメントが更新されたら画面の表示を変更する」はもうずっと使っているんですが、ドキュメントが複雑になってきたので、ドキュメント配下にコレクションを作って、そのコレクションを監視するように変更していきたいと思います。

結論

'use strict'; // 動作を安定させるおまじない
function loadMessages() {
var query = firebase.firestore()
                 .collection('テストコレクション')
                 .doc('test')
                 .collection('tester');
query.onSnapshot((querySnapshot) => {
     var documents = [];
     querySnapshot.forEach(doc => {
         documents.push(doc.data())
     });
     console.log(documents);
     // 後続の処理を呼ぶ場合はココでよぶ
 });
}

loadMessages();

これでコレクションをまるっと監視できる。コレクション内のドキュメントが一つでも更新されれば感知される。

アロー関数が入れ子になってるのでむむむ……ってなるけど、どっちもアロー関数じゃないとどうにも都合が悪いので頑張って構造を理解する……

アロー関数の仕組みはこの記事で。

ドキュメントを監視（リッスン）する場合との違い

ドキュメントを監視する時は、

function loadMessages() {
var query = firebase.firestore()
                 .collection('テストコレクション')
                 .doc('test')

  query.onSnapshot({
     includeMetadataChanges: true
   },
   function(change) {
     if (change.type === 'removed') {
       // windows.alert("removed");
     } else {
       var message = change.data();
       displayMessage(message);
     }
   });
}

こう。

主な違いは、ドキュメントなら

var massage = change.data();

でぱぱっとドキュメントの内容が取れるけど、コレクションを監視する時は結果がドキュメントのリストで来るので、forEach使って

     var documents = [];
     querySnapshot.forEach(doc => {
         documents.push(doc.data())
     });
     console.log(documents);

こうやって展開する必要がある。

でも違いはそれくらい。

アロー関数使っているところの構造だけちゃんと分かれば大丈夫。​