Firebase Auth & Realtime Database Apps · レッスン

リアルタイム変更のリッスン

Realtime Databaseのイベントを購読し、値や子ノードの変更に発生時点で反応し、メモリリークを防ぐためにリスナーをクリーンアップして、アプリを本当の意味でリアルタイムにします。

「リアルタイム変更のリッスン」はCoddyKit上の無料Firebase Auth & Realtime Database Appsレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFirebase Auth & Realtime Database Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Firebase Auth & Realtime Database Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

From Fetch to Stream

Reading data once gives you a snapshot. The power of Realtime Database is live updates: your app reacts the instant data changes on the server, with no polling.

This is done by attaching listeners to a location in the database.

The Value Event

The most common listener is value. It fires once immediately with current data, then again every time anything under that location changes.

import { getDatabase, ref, onValue } from 'firebase/database';

const db = getDatabase();
onValue(ref(db, 'scores/global'), (snapshot) => {
  console.log('New value:', snapshot.val());
});

Reading the Snapshot

The callback receives a DataSnapshot. Use .val() for the data, .exists() to check presence, and .key for the node name.

onValue(ref(db, 'user/42'), (snap) => {
  if (snap.exists()) {
    console.log(snap.key, snap.val());
  }
});

Child Events

For lists, value events resend the whole node on every change. Child events are more efficient, firing per item:

onChildAdded
onChildChanged
onChildRemoved

Using onChildAdded

onChildAdded fires once for each existing child, then for every new one. It is perfect for chat messages or feeds.

import { onChildAdded } from 'firebase/database';

onChildAdded(ref(db, 'messages'), (snap) => {
  appendMessage(snap.key, snap.val());
});

Reacting to Changes and Removals

Pair additions with change and removal handlers to keep your UI in sync without re-rendering everything.

import { onChildChanged, onChildRemoved } from 'firebase/database';

onChildChanged(ref(db, 'messages'), s => updateMessage(s.key, s.val()));
onChildRemoved(ref(db, 'messages'), s => removeMessage(s.key));

Reading Once

Sometimes you want current data without an ongoing subscription. Use get for a one-time read instead of a listener.

import { get } from 'firebase/database';

const snap = await get(ref(db, 'config'));
console.log(snap.val());

Detaching Listeners

Listeners stay active until removed, consuming bandwidth and memory. Always detach them when a screen unmounts, using the unsubscribe function returned by onValue.

const unsubscribe = onValue(ref(db, 'scores'), cb);
// later, when leaving the screen:
unsubscribe();

Handling Errors

Listeners can fail, often due to Security Rules denying read access. Provide an error callback so failures are visible, not silent.

onValue(ref(db, 'private'), (snap) => render(snap), (error) => {
  console.error('Read failed:', error.message);
});

Performance Tips

Keep listeners efficient:

Listen at the smallest path that has the data you need
Prefer child events for large lists
Never attach a value listener to the database root

A Live Counter Example

Putting it together: attach a value listener to a counter node, update the DOM in the callback, and unsubscribe on cleanup. The number changes for every connected client in real time.

const unsub = onValue(ref(db, 'visitors/count'), (snap) => {
  document.getElementById('count').textContent = snap.val() ?? 0;
});

Quick Check

Test your understanding of realtime listeners.

Recap

Your app can now respond to data the moment it changes.

Use onValue for single nodes
Use child events for efficient lists
Read once with get when no subscription is needed
Always detach listeners and handle errors
Listen at the narrowest useful path

よくある質問

「リアルタイム変更のリッスン」レッスンは無料ですか？

はい。「リアルタイム変更のリッスン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Firebase Auth & Realtime Database Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Firebase Auth & Realtime Database Appsコースには全4レッスンが含まれています。

「リアルタイム変更のリッスン」で何を学びますか？

Realtime Databaseのイベントを購読し、値や子ノードの変更に発生時点で反応し、メモリリークを防ぐためにリスナーをクリーンアップして、アプリを本当の意味でリアルタイムにします。ブラウザで直接実行するハンズオンコードでFirebase Auth & Realtime Database Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Firebase Auth & Realtime Database Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFirebase Auth & Realtime Database Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「リアルタイム変更のリッスン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFirebase Auth & Realtime Database Appsレッスンでコードを書いて実行できますか？

はい。すべてのFirebase Auth & Realtime Database Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Firebase Auth & Realtime Database Appsに戻る