Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

前提条件

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

データベースを作成する

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

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

    テストモード

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

    ウェブ、Apple、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 JavaScript SDK を初期化する

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 version 9 

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

// TODO: Replace with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

const app = initializeApp(firebaseConfig);

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

Web version 8 

// TODO: Replace with your app's Firebase project configuration
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

firebase.initializeApp(firebaseConfig);

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

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

次のステップ