JavaScript でのインストールと設定

Firebase Realtime Database はクラウドホスト型データベースです。データは JSON として保存され、接続されたすべてのクライアントとリアルタイムに同期されます。Android、Apple プラットフォーム、JavaScript SDK を使用してクロスプラットフォーム アプリを構築した場合、すべてのクライアントが 1 つの Realtime Database インスタンスを共有して、最新のデータによる更新を自動的に受信します。

前提条件

まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

データベースを作成する

  1. Firebase コンソールの [Realtime Database] セクションに移動します。既存の Firebase プロジェクトを選択するよう求められます。データベース作成ワークフローに従います。

  2. Firebase セキュリティ ルールの開始モードを選択します。

    テストモード

    モバイルおよびウェブ クライアント ライブラリを使用する場合に適していますが、すべてのユーザーがデータを読み取り、上書きできます。テストが終わったら、Firebase Realtime Database セキュリティ ルールを理解するを確認してください。

    Web SDK、Apple SDK、Android SDK を使用する場合は、テストモードを選択します。

    ロックモード

    モバイルおよびウェブ クライアントからのすべての読み書きを拒否します。認証されたアプリケーション サーバーは引き続きデータベースにアクセスできます。

  3. データベースのロケーションを選択します。

    データベースのロケーションに応じて、新しいデータベースの URL は次のいずれかの形式になります。

    • DATABASE_NAME.firebaseio.com（us-central1 のデータベースの場合）

    • DATABASE_NAME.REGION.firebasedatabase.app（他のすべてのロケーションのデータベースの場合）

  4. [完了] をクリックします。

Realtime Database を有効にすると、Cloud API Manager で API も有効になります。

Realtime Database セキュリティ ルールを構成する

Realtime Database には宣言型のルール言語が用意されているため、データの構造化方法、インデックスの作成方法、データの書き込みと読み取りのタイミングを定義できます。

Realtime Database JS SDK を追加して Realtime Database を初期化する

JavaScript SDK を初期化するときに、Realtime Database の URL を指定する必要があります。

Realtime Database の URL は、Firebase コンソールの [Realtime Database] セクションで確認できます。データベースのロケーションに応じて、データベースの URL は次のいずれかの形式になります。

  • https://DATABASE_NAME.firebaseio.com（us-central1 のデータベースの場合）
  • https://DATABASE_NAME.REGION.firebasedatabase.app（他のすべてのロケーションのデータベースの場合）

次のコード スニペットを使用して SDK を初期化します。

モジュール方式の Web API

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Realtime Database and get a reference to the service
const database = getDatabase(app);

ウェブ向けの名前空間 API

import firebase from "firebase/app";
import "firebase/compat/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Realtime Database and get a reference to the service
const database = firebase.database();

これで Firebase Realtime Database が使えるようになりました。

次のステップ