firebase realtime databaseの.on('value')と.on('child_added')の使い分け

.on('value')と.on('child_added')の使い分け

Firebase realtime databaseの公式ドキュにはガッツリ書かれていますが、備忘を兼ねて記事に。

全くWeb周り詳しくないので記事レベルはあしからず。

firebase.google.com

realtime databaseのデータ取得のときに.on('value')で取得するべきか、.on('child_added')で取得するべきか、悩むときがありますね。

そんなときにどう使い分けるかの記事です。

.on('value')で取得するサンプルコードはこんな感じ。

const sampleRef = firebase.database().ref('sample')

sampleRef.on('value', function(snapshot){
	console.log('value', snapshot.val())
})

.on('child_added')で取得するサンプルコードはこんな感じ。

sampleRef.on('child_added', function(snapshot){
	console.log('child_added', snapshot.val())
})

公式に全部書いてあるので、正直、この記事の存在価値は皆無ですが、あくまでも備忘なので!!

大別すると...

• value

• child_added

この2つになります。childはchangedとかありますが、根本的にvalueとchild_addedは取得方法が異なります。

value

valueは、指定されたノード全体のキャプチャを取得します。

以下のノードがあれば、これをまるっと取得してきます。

const sampleRef = firebase.database().ref('sample')

sampleRef.on('value', function(snapshot){
	console.log('value', snapshot.val())
})

そのため、valueの返り値は指定したノード全体、ということになります。

child_added

child_addedは、指定されたノードの子ノードを取得してきます。

以下のノードは、子ノードを5つ持っており、これらを取得します。

sampleRef.on('child_added', function(snapshot){
	console.log('child_added', snapshot.val())
})

{test: 0.9033302588248819}が返り値になっている理由は子ノードを取得しているからです。

そして、子ノードを取得してくるため、子ノードが5つあれば5回実行されることになります。

この挙動でよくミスるのが、以下のコードを書いたときです。

.onではなく、once()で書いています。

sampleRef.once('child_added', function(snapshot){
	console.log('child_added', snapshot.val())
})

.onceは1回しか実行されないので、1つ子ノードを取得して、終了です。

ノード全体を取得したいときは、このコードじゃ動きません。

まぁ、子ノードの追加をリッスンしたいのがchild_addedなので、.onceを使うなら用途に反してますよってことです。

.on()と.once()の違いは、この記事。

www.stockdog.work

子ノードに変更があった場合の.on('value')と.on('child_added')の違い

• .on('value')は、ノード全体を取得してきます。

• .on('child_added')は変更分だけ取得してきます。

返り値で見ると、以下になります。

1回目は、ノード全体をvalueもchild_addedも取得します。

データの変更があった2回目は取得内容に差があります。

※warningは気にしないでね、サンプルコードのたびにindex加えてられるかい

まとめ

.onで変更を監視したいときは、child_addedじゃないとデータ取得の容量が増えてしまいます。

基本は.on('child_added')でいいんじゃないですかね(適当)

以上、終わり！