読んで欲しい人
- Vue.jsでFirestoreのonSnapshotの使い方がわからない人
- FirestoreのリファレンスでonSnapshotの文法を知ろうとしたけど無理だった人
- 過去の自分
onSnapshotとは何か？
- Firebaseのデータベース（Firestore）の変更を監視して、変更があるたびにアクションを起こせるスゲー便利なメソッド
Vue.jsでの書き方
sample.vue
<script>
const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => {
console.log("Current data: ", doc.data());
});
</script>
- onSnapshot
//onSnapshotの説明
<script>
onSnapshot(監視するドキュメント or コレクション, 監視時のコールバック関数)
</script>
onSnapshotは引数を2つ取ります。
第1引数には監視するドキュメントかコレクション、第2引数には監視した時に発動する関数を入れます
- (doc) => {...}
//関数内部の説明
//下記はonSnapshotの第2引数の中身です
(doc) => { console.log("Current data: ", doc.data()); });
docは、監視中のドキュメントのデータを表します。
関数内で、ドキュメントの変更を処理しています。
※ 今回の場合であればdoc.data()は最新のデータを取得している
どんな場面で使用するのか？
- リアルタイム更新：ユーザー情報をリアルタイムに更新するとき
例：スコアの更新、チャットの更新 etc
- バックグラウンド処理：データの変更を監視しながら非同期、後ろ側で処理を実行するとき
例：ゲームアプリでのキャラクターの位置情報（思いつくのが少ない🙇）
感想
- Vue.jsとFirestore相性がとても良かった。ゲーム作りやすいんだなぁ
- 新しい技術のキャッチアップむずい
- 非同期だったり、自動で監視してくれるのはすごく良い
参考