1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Firebaseを使ったデータベースにリアルタイムで変更

Posted at

今回はFirebaseのonSnapshotを使ったリアルタイムでの変更について記事にしたいと思います。
onSnapshotは、Firestoreデータベースにリアルタイムで変更を反映するための便利なメソッドです。リアルタイムでデータが更新されるため、チャットアプリや掲示板などのアプリで非常に役立ちます。

Firebase Firestore の onSnapshot メソッドとは?

onSnapshot メソッドは、Firestoreデータベースでのデータの変更をリアルタイムで監視できるメソッドです。このメソッドを使うと、データの追加・更新・削除などの変更があるたびに通知を受け取り、アプリのUIに即座に反映させることができます。

例えば、チャットアプリで新しいメッセージが投稿されたときや、掲示板に新しいコメントが追加されたときに、ページをリロードせずに即座に表示することが可能です。

onSnapshot の基本的な使い方
Firestoreからのデータをリアルタイムで取得するためには、onSnapshotを使います。主にコレクションやドキュメントに対して利用されます。

コレクションの監視
以下の例では、messagesコレクションを監視し、新しいメッセージが追加されるたびにコンソールに出力します。

import { db } from './firebase'; // Firebaseの初期化済みインスタンス
import { collection, onSnapshot } from 'firebase/firestore';

const messagesRef = collection(db, 'messages');

onSnapshot(messagesRef, (snapshot) => {
  snapshot.docs.forEach((doc) => {
    console.log(doc.data());
  });
});

ドキュメントの監視
特定のドキュメントのみを監視する場合は、以下のように記述します。ここでは、usersコレクションのuserIDドキュメントをリアルタイムで監視しています。

import { doc, onSnapshot } from 'firebase/firestore';

const userRef = doc(db, 'users', 'userID');

onSnapshot(userRef, (doc) => {
  console.log("Current data: ", doc.data());
});

onSnapshot でのデータ変更の検知
onSnapshotを使用すると、次の3つの変更タイプを検知できます。

added:新しいドキュメントが追加されたとき
modified :既存のドキュメントが変更されたとき
removed:ドキュメントが削除されたとき
これらの変更タイプを利用して、効率的にUIを更新できます。たとえば、新しいメッセージが追加されたときだけUIに反映させたり、削除されたメッセージを画面から消したりすることが可能です。

onSnapshot(messagesRef, (snapshot) => {
  snapshot.docChanges().forEach((change) => {
    if (change.type === 'added') {
      console.log('New message: ', change.doc.data());
    }
    if (change.type === 'modified') {
      console.log('Modified message: ', change.doc.data());
    }
    if (change.type === 'removed') {
      console.log('Removed message: ', change.doc.data());
    }
  });
});

リアルタイム監視のメリットとデメリット

メリット
リアルタイムでのデータ反映:アプリ内でデータが即座に更新されるため、最新の情報をユーザーに提供できます。
ユーザー体験の向上:リロード不要でデータが反映されるため、スムーズな体験が可能です。

デメリット
リソース消費:リアルタイムのデータ取得はリソースを消費するため、トラフィックが多い場合はパフォーマンスが影響を受ける可能性があります。
コスト増加:Firebaseの無料プランでは、データの読み取り数が制限されているため、大量の読み取りが発生する場合は追加のコストがかかります。
onSnapshot を使用する際の注意点
メモリリーク防止:リアルタイムリスナーは不要になったら解除する必要があります。ReactのuseEffectフックやVueのbeforeDestroyライフサイクルフックでunsubscribe()を呼び出して、リスナーを削除しましょう。

const unsubscribe = onSnapshot(messagesRef, (snapshot) => {
  // ...データ処理
});

// リスナーの解除
unsubscribe();

エラーハンドリング:onSnapshotはエラーハンドリングも行えます。ネットワークの接続エラーやパーミッションの問題が発生した場合、エラーハンドラーを設定しておくと便利です。

onSnapshot(messagesRef, (snapshot) => {
  // データの変更処理
}, (error) => {
  console.error("Error fetching snapshot: ", error);
});

まとめ
onSnapshotは、Firestoreのリアルタイム機能を活用するための強力なメソッドです。リアルタイムのデータ更新が必要なアプリケーションにとって、ユーザー体験を向上させるための重要な要素です。しかし、データ取得回数やリソース消費を考慮し、必要に応じて使い分けることが重要です。

チャットアプリやタスク管理アプリなど、リアルタイムで更新されるデータを扱うアプリケーションで活用してみましょう!

最後までよんでいただきありがとうございます。
@y-t0910をフォロー,いいねしていただけると嬉しいです!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?