Firebaseデータベースのデータの更新イベントの検出

Firebase のデータベースの「onSnapshot」を使えば解決！

Firebase のデータベース（Cloud Firestore）には、特定のデータベースのデータが更新されたのを検出して処理する機能が予め用意されています。それが、前回も紹介した「onSnapshot」と言う機能です。

例えば、ある商品のデータを「products」と言うコレクションに、入れている場合には、以下のような記述で処理できます。

firebase
  .firestore()
  .collection("products")
  .doc("ABCD")
  .onSnapshot((doc) => {
    update_display(doc.data());
  });

のように書くと、コレクションの中の「ABCD」と言うドキュメント ID のデータが変わったら、表示を更新すると言うような処理ができます。「update_display((doc.data())」は、商品の表時データを更新する関数です。ここに必要な処理を書いておけば、指定したドキュメントのデータの中身が更新されると、この関数が呼ばれるという事です。

React などの場合は、ここで読み込んだデータ（例では、「doc.data()」）を変数に入れて、ステートで管理しておけば、値が変化すると、React のフレームワークが表示の更新をしてくれます。

この例では、特定の「ドキュメント」の更新を監視するような処理ですあ、コレクション全体の変化も監視して処理する事ができます。

class Sample extends React.Component {
    constructor() {
        super();
        this.init();
        this.state = {
            samples:[]
        }
    }
    init() {
        firebase.firestore().collection("products").onSnapshot((querySnapshot) => {
            const samples = []
            for (let i = 0 ; i < querySnapshot.size ; i++)
                const doc = querySnapshot.docs[i]
                samples.push(doc.data())
            })
            this.setState({
                samples: samples
            })
        })
    }
    render() {
        return(
            <table>
                <thead>
                    <tr>
                        <th>商品名</th>
                        <th>価格</th>
                        <th>在庫数</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.samples.map((sample) => (
                        <tr key={sample.id}>
                            <td>{sample.name}</td>
                            <td>{sample.price}</td>
                            <td>{sample.stock}</td>
                        </tr>
                    ))}
                </tbody>
            </table>

        )
    }
}

React コンポーネントをクラス形式で書いた例ですが、このようにすると、「samples」のコレクションのデータが変化すると、「onSnapshot」の処理が呼び出されて、ステートで管理している変数の「samples」を更新するので、React のフレームワークがテーブルのデータを更新してくれます。

これは、利用者が閲覧中でも、Firebase のデータベースが更新されると自動的に表示データを更新できるようになります。