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

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

前提条件

  1. Firebase JavaScript クライアント SDK をアプリに追加して構成します。

データベースを作成する

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

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

    テストモード

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

    ウェブ、iOS、Android SDK を使用する場合は、テストモードを選択します。

    ロックモード

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

  3. データベースのリージョンを選択します。選択したリージョンに応じて、データベースの名前空間は <databaseName>.firebaseio.com または <databaseName>.<region>.firebasedatabase.app という形式になります。詳しくは、プロジェクトのロケーションを選択するをご覧ください。

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

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

Realtime Database のルールを構成する

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

Realtime Database JavaScript SDK を初期化する

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

Realtime Database の URL は、Firebase コンソールの [Realtime Database] セクションで確認できます。形式は、https://<databaseName>.firebaseio.com（us-central1 のデータベースの場合）、または https://<databaseName>.<region>.firebasedatabase.app（他のすべてのロケーションのデータベースの場合）のようになります。

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

ウェブ バージョン 9 


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

// Set the configuration for your app
// TODO: Replace with your project's config object
const firebaseConfig = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  // For databases not in the us-central1 location, databaseURL will be of the
  // form https://[databaseName].[region].firebasedatabase.app.
  // For example, https://your-database-123.europe-west1.firebasedatabase.app
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com"
};

const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const database = getDatabase(app);

ウェブ バージョン 8 

// Set the configuration for your app
// TODO: Replace with your project's config object
var config = {
apiKey: "apiKey",
authDomain: "projectId.firebaseapp.com",
// For databases not in the us-central1 location, databaseURL will be of the
// form https://[databaseName].[region].firebasedatabase.app.
// For example, https://your-database-123.europe-west1.firebasedatabase.app
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com"
};
firebase.initializeApp(config);

// Get a reference to the database service
var database = firebase.database();

Firebase Realtime Database を使用して開始する準備ができました。

次のステップ