Firebase Realtime Databaseとは
FirebaseにはFirestoreとRealtime Databaseが用意されています。
その中でもRealtime DatabaseとはJSON形式でデータを保存します。
Realtime Database は従来の Firebase JSON データベースです。シンプルなルックアップと低レイテンシの同期を必要とし、スケーラビリティに制限がある単純なデータモデルを使用するアプリケーションに適しています。
Realtime DatabaseとFirestoreの比較
Realtime database Onvalue
Firebase Realtime Databaseには二種類のデータ読み取り方法があります。
Firebase Realtime Databaseには、データの読み取り方法として主に get と onValue の2種類があります。
-
get
一度だけデータを取得します。単発でデータのスナップショットを取得したい場合に使用します -
onValue
対象データに変化があった場合に、コールバックが自動的に呼び出されるリアルタイム購読用のメソッドです。常に最新のデータを反映させたい場合に有効です
問題点
複数ページで同じデータをリアルタイムに購読する場合、各ページごとに onValue を使ってリスナーを登録すると、例えば以下のような状況になります。
- ページAで1回、ページBで1回、さらにページAに戻った際に再度1回
onValueを呼んでいると、合計で3つのリスナーが存在する - 内部的には同じキャッシュやネットワーク接続を利用している場合でも、各リスナーが独立してコールバックを処理するため、データ変更時に3回のコールバック処理が発生
- これにより、メモリ使用量やコールバック処理の負荷が増大し、パフォーマンスに悪影響
以下イメージです。
MVCモデルでの上手な適応方法
複数ページでの重複したリアルタイム購読を防ぐためには、MVCモデルやグローバルな状態管理（Nuxt 3の useState や Piniaなど）を活用して、データの購読を一元管理することが推奨されます。
具体的には、以下のような手法が考えられます。
-
グローバルストアで購読処理を集約する
アプリ全体で共有するデータは、ストアにて一度だけ購読し、そのストアの状態を各ページやコンポーネントで利用 -
リスナーの解除（オフ）を確実に行う
各コンポーネントでonValueを使用する場合、Nuxtのライフサイクルフック（onMounted/onUnmounted）を用いて、コンポーネントの破棄時にリスナーを解除することで、二重購読や不要なリソース消費を防止
以下、コンポーネント内での実装例です。
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { getDatabase, ref, onValue } from 'firebase/database';
const db = getDatabase();
let unsubscribe: () => void;
onMounted(() => {
const dataRef = ref(db, 'path/data');
// Firebase v9想定
unsubscribe = onValue(dataRef, snapshot => {
snapshot.val();
});
});
onUnmounted(() => {
if (unsubscribe) {
unsubscribe();
}
});
</script>
このように、各ページやコンポーネントで購読の登録・解除を適切に管理することで、重複購読を防ぎ、パフォーマンスの最適化が可能になります。
まとめ
- Firebase Realtime Databaseのリアルタイム購読機能は、データの変化を即座に反映できる強力な仕組み
- しかし、複数ページで同じデータを購読すると、キャッシュによってネットワーク取得は効率化されるものの、各リスナーが独自のコールバック処理を持つため、メモリ使用量や処理負荷が増加
- そのため、グローバルな状態管理を活用して購読処理を一元化し、不要なリスナーは速やかに解除することが重要
結果として、堅牢かつ効率的なリアルタイムデータ連携を実現し、ユーザー体験を向上させることができます。