【Firebase】onChildChangedの使い方と注意点

子ノードの更新を検知するonChildChangedとは

全ての更新を検知する度に発火するイベントで、更新データを取得することができます。
※onChildAddedはデータが追加されたとき。Firebase含め、@kyok01_japanさんの記事をご参考にしてください。

ドキュメントの翻訳（とりあえず）

onChildChanged()
指定した場所でデータが変化したらListenします。

データベースからデータを読む1番の方法です。初期データやデータが更新されるcallbackがトリガーとなります。Invoke the returned unsubscribe callback to stop receiving updates.

onChildChangedイベントは子ノード（もしくはさらに下層）で保存されたデータが変更されたときに発火します。注意：child_changedイベントが1つでも子ノードは複数変化しているかもしれません。callbacに渡されたDataSnapshotは新しい子要素を含むことがあります。並べ替えたいとき、callbackは第二引数がわたされます。第二引数はソート順でひとつ前の子のキーを含む文字列が渡され、最初の子の場合は、nullが渡されます。

API Referenceより

使い方と注意

まずは、FirebaseのRealtimeDatabaseの初期設定。

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import {getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, child, get, onChildChanged} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
// Firebaseから引っ張ってきてください。
const firebaseConfig = {
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xxx",
      storageBucket: "xxx",
      messagingSenderId: "xxx",
      appId: "xxx",
    };
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

次に、onChildChangedを呼び出します。callbackはfunction(data){}を当てます。 onChildChangedで変化した要素がdataに入ってきます。

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import {getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, child, get, onChildChanged} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
// Firebaseから引っ張ってきてください。
const firebaseConfig = {
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xxx",
      storageBucket: "xxx",
      messagingSenderId: "xxx",
      appId: "xxx",
    };
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// ここからonChildChangedに関わるところ
// dbRefを作成します。第二引数でお好きな構造を設定します。
const dbRef = ref(db, "parent/child");
// データ構造のイメージは以下のとおり
// parent
//  └child
//   └grandchild
// 
onChildChanged(dbRef, function (data) {
 console.log(data);
 console.log(data.val());
}

最後に私がひっかかった点を。
データは以下のような構造になっています。 grandchildの階層で変更があったとします。

// parent
//  └child
//   └grandchild

const dbRef = ref(db, "parent/child");では、childの階層を指定しているため、grandchildの階層での変更が検知され、grandchildのデータがdataに返ってきます。
もし、あなたがchild階層からデータが欲しいとき（=更新されたデータと同じ階層の他のデータも欲しいとき）は、parent階層を指定する必要があります。
const dbRef = ref(db, "parent");
このようにするとparent階層から二階層下のgrandchild階層の変化を検知し、parent階層の一つ下の変化したchildを取得します。

日本語下手すぎで説明ができていないかもしれないので、追って修正するかもです...