ウェブでのデータの読み取りと書き込み

（省略可）Firebase Local Emulator Suite でプロトタイピングとテストを行う

アプリが Realtime Database との間でどのようにデータを読み取り / 書き込みするのかを説明する前に、Realtime Database の機能のプロトタイピングとテストに使用できるツールである Firebase Local Emulator Suite をご紹介します。異なるデータモデルの試行や、セキュリティルールの最適化、あるいはバックエンドとのやり取りで費用対効果の高い方法の検出を行う場合は、ライブサービスをデプロイせずにローカルで作業できるようにすると、大きなメリットが得られます。

Realtime Database エミュレータは Local Emulator Suite の一部であり、これを使用すると、アプリはエミュレートしたデータベースのコンテンツや構成とやり取りできるほか、エミュレートされたプロジェクトのリソース（関数、他のデータベース、セキュリティルール）とも任意でやり取りできます。

いくつかの手順を実施するだけで、Realtime Database エミュレータを使用できます。

アプリのテスト構成にコード行を追加して、エミュレータに接続します。
ローカルプロジェクトのディレクトリのルートから、firebase emulators:start を実行します。
通常どおり Realtime Database プラットフォーム SDK を使用して、または Realtime Database REST API を使用して、アプリのプロトタイプコードから呼び出しを行います。

詳細な Realtime Database と Cloud Functions に関するチュートリアルをご覧ください。Local Emulator Suite の概要もご覧ください。

データベース参照を取得する

データベースでデータの読み書きを行うには、firebase.database.Reference のインスタンスが必要です。

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();rtdb_get_reference.js

Web

var database = firebase.database();index.js

データを書き込む

このドキュメントでは、データの取得に関する基本と、Firebase データの並べ替えとフィルタリングの方法について説明します。

Firebase データは、非同期リスナーを firebase.database.Reference にアタッチして取得します。リスナーはデータの初期状態で 1 回トリガーされます。さらに、データが変更されると、そのたびに再トリガーされます。

基本的な書き込みオペレーション

基本的な書き込みオペレーションには、set() を使用してデータを特定の参照に保存できます。そのパスにある既存のデータが置換されます。たとえば、ソーシャルブログアプリでは、次のように set() でユーザーを追加できます。

Web

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}rtdb_write_new_user.js

Web

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}read-and-write.js

set() を使用すると、特定の場所にあるデータ（子ノードも含む）が上書きされます。

データを読み取る

value イベントのリッスン

パスにあるデータを読み取り、変更をリッスンするには、onValue() を使用してイベントを監視します。このイベントを使用して、特定のパスにあるコンテンツの静的スナップショットを、イベントの発生時に存在していたとおりに読み取ることができます。このメソッドはリスナーがアタッチされたときに 1 回トリガーされます。さらに、データ（子も含む）が変更されると、そのたびに再びトリガーされます。イベントのコールバックには、その場所にあるすべてのデータ（子のデータも含む）を含んでいるスナップショットが渡されます。データが存在しない場合、スナップショットから返されるのは、exists() を呼び出した場合は false、val() を呼び出した場合は null です。

次の例は、データベースから投稿のスターの数を取得するソーシャルブログアプリケーションを示しています。

Web

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

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});rtdb_social_listen_star_count.js

Web

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});read-and-write.js

リスナーは snapshot を受信します。これには、イベントのときにデータベース内の指定された場所にあったデータが含まれています。snapshot のデータは val() メソッドを使用して取得できます。

データの 1 回読み取り

get() を使用してデータを 1 回読み取る

SDK は、アプリがオンラインかオフラインかに関係なく、データベースサーバーとのやり取りを管理するように設計されています。

通常は、データを読み取り、バックエンドからデータの更新に関する通知を受け取るには、上記の値イベント手法を使用する必要があります。リスナーの手法は、使用量と課金を削減し、オンラインとオフラインのどちらでも最高のユーザーエクスペリエンスを実現できるよう最適化されています。

データが 1 回だけ必要な場合は、get() を使用してデータベースからデータのスナップショットを取得します。なんらかの理由で get() がサーバー値を返せない場合は、クライアントがローカルストレージキャッシュを調べ、それでも値が見つからなければエラーを返します。

get() を必要以上に使用すると、帯域幅の使用が増加し、パフォーマンスの低下を招くおそれがあります。ただし、上記のリアルタイムリスナーを使用することで、これを回避できます。

Web

import { getDatabase, ref, child, get } from "firebase/database";

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});rtdb_read_once_get.js

Web

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});read-and-write.js

オブザーバーを使用してデータを 1 回読み取る

更新された値をサーバーで確認するのではなく、値をローカルキャッシュから直ちに返したい場合があります。そのような場合は、once() を使用してローカルディスクキャッシュから直ちにデータを取得できます。

これは 1 回読み込む必要があるだけで頻繁な変更やアクティブなリッスンを行うことは想定していないデータに対して有用です。たとえば、前の例にあるブログアプリでは、このメソッドを使用して、ユーザーが新しい投稿を作成し始めたときにユーザーのプロフィールを読み込んでいます。

Web

import { getDatabase, ref, onValue } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});rtdb_social_single_value_read.js

Web

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});read-and-write.js

データの更新または削除

特定のフィールドを更新する

他の子ノードを上書きすることなく、ノードの特定の複数の子に同時に書き込むには、update() メソッドを使用します。

update() の呼び出し時に、キーのパスを指定して下位レベルの子の値を更新できます。スケーラビリティを向上させるためにデータが複数の場所に保存されている場合、データのファンアウトを使用してそのデータのすべてのインスタンスを更新できます。

たとえば、次のようなコードを使用して、ソーシャルブログアプリで、投稿を作成し、その投稿で最近のアクティビティのフィードと投稿ユーザーのアクティビティのフィードを同時に更新するとします。

Web

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}rtdb_social_write_fan_out.js

Web

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}read-and-write.js

この例では、push() を使用して、/posts/$postid にある全ユーザーの投稿が格納されているノード内に投稿を作成すると同時に、キーを取得しています。その後、このキーを使用して、/user-posts/$userid/$postid にあるユーザーの投稿に別のエントリを作成できます。

これらのパスを使用すると、上記の例で両方の場所に新しい投稿を作成したように、update() を 1 回呼び出すだけで JSON ツリー内の複数の場所に対して更新を同時に実行できます。この方法による同時更新はアトミック（不可分）です。つまり、すべての更新が成功するか、すべての更新が失敗するかのどちらかです。

完了コールバックの追加

データがいつ commit（確定）されたのかを把握したい場合は、完了コールバックを追加できます。set() と update() はどちらも、完了コールバックをオプションとして取ります。このコールバックは、書き込みがデータベースに commit されたときに呼び出されます。呼び出しが失敗した場合は、失敗した理由を示すエラーオブジェクトがコールバックに渡されます。

Web

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});rtdb_social_completion_callback.js

Web

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});read-and-write.js

データの削除

データを削除する最も簡単な方法は、そのデータの場所への参照の remove() を呼び出すことです。

また、他の書き込みオペレーション（set() や update() など）の値として null を指定する方法でも削除できます。この方法と update() を併用すると、API を 1 回呼び出すだけで複数の子を削除できます。

`Promise` の受信

Firebase Realtime Database サーバーにデータが commit された時点を把握するには、Promise を使用します。set() と update() のどちらも、書き込みがデータベースに commit されたタイミングの把握に使用できる Promise を返すことができます。

リスナーのデタッチ

コールバックを削除するには、Firebase データベース参照で off() メソッドを呼び出します。

単一のリスナーは、パラメータとしてリスナーを off() に渡すと削除できます。off() を引数なしで呼び出すと、その場所にあるすべてのリスナーが削除されます。

親リスナーの off() を呼び出しても、その子ノードに登録されているリスナーが自動的に削除されるわけではありません。また、コールバックを削除するために子リスナーの off() も呼び出す必要があります。

トランザクションとしてのデータの保存

増分カウンタなど、同時変更によって破損する可能性があるデータを操作する場合は、トランザクションオペレーションを使用します。このオペレーションには、update 関数とオプションの完了コールバックを与えることができます。update 関数はデータの現在の状態を引数として取り、書き込みたい新しい状態を返します。新しい値が正常に書き込まれる前に別のクライアントがその場所に書き込んだ場合、update 関数が現在の新しい値で再度呼び出されて、書き込みが再試行されます。

たとえば、このソーシャルブログアプリの例では、次のようにして、投稿にスターを付ける操作と投稿のスターを取り消す操作をユーザーに許可し、投稿で得られたスターの数を追跡できます。

Web

import { getDatabase, ref, runTransaction } from "firebase/database";

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}rtdb_social_star_transaction.js

Web

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}read-and-write.js

トランザクションを使用することで、複数のユーザーが同じ投稿にスターを同時に付けた場合や、クライアントのデータが古くなった場合でも、スターの数が不正確になることを防ぎます。トランザクションが拒否された場合、サーバーは現在の値をクライアントに返します。クライアントは更新された値でトランザクションを再度実行します。トランザクションが受け入れられるか、トランザクションを中止するまでこの処理が繰り返されます。

サーバーサイドのアトミックなインクリメント

上のユースケースでは 2 つの値をデータベースに書き込みます。投稿にスターを付ける / スターを外すユーザーの ID と、インクリメントされたスターの数です。ユーザーが投稿にスターを付けていることがわかっている場合は、トランザクションではなくアトミックなインクリメントオペレーションを使用できます。

Web

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}rtdb_social_star_increment.js

Web

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}read-and-write.js

このコードはトランザクションオペレーションを使用しないため、競合する更新があっても、自動的に再実行されることはありません。ただし、インクリメントオペレーションはデータベースサーバー上で直接発生するため、競合は発生しません。

ユーザーが以前にスターを付けた投稿に再度スターを付けるなど、アプリケーション固有の競合を検出して拒否するには、そのユースケースのためのカスタムのセキュリティルールを作成する必要があります。

オフラインでのデータ操作

クライアントでネットワーク接続が切断された場合でも、アプリは引き続き適切に機能します。

Firebase データベースに接続しているクライアントはそれぞれ、アクティブデータの内部バージョンを独自に保持しています。データが書き込まれると、まず、このローカルバージョンに書き込まれます。次に Firebase クライアントは、「ベストエフォート」ベースでそのデータをリモートデータベースサーバーや他のクライアントと同期します。

その結果、データベースへの書き込みが発生すると、実際にサーバーへデータが書き込まれるよりも早く、ローカルイベントが直ちにトリガーされます。つまり、ネットワークのレイテンシや接続に関係なく、アプリは応答性の高い状態を維持します。

接続が再確立されると、アプリは適切な一連のイベントを受け取り、クライアントが現在のサーバー状態と同期されます。この処理のためにカスタムコードを記述する必要はありません。

オフラインの動作については、オンライン機能とオフラインの機能の詳細で説明します。

ウェブでのデータの読み取りと書き込み

（省略可）Firebase Local Emulator Suite でプロトタイピングとテストを行う

データベース参照を取得する

Web

Web

データを書き込む

基本的な書き込みオペレーション

Web

Web

データを読み取る

value イベントのリッスン

Web

Web

データの 1 回読み取り

get() を使用してデータを 1 回読み取る

Web

Web

オブザーバーを使用してデータを 1 回読み取る

Web

Web

データの更新または削除

特定のフィールドを更新する

Web

Web

完了コールバックの追加

Web

Web

データの削除

Promise の受信

リスナーのデタッチ

トランザクションとしてのデータの保存

Web

Web

サーバーサイドのアトミックなインクリメント

Web

Web

オフラインでのデータ操作

次のステップ

`Promise` の受信