Firebase を JavaScript プロジェクトに追加する

事前準備

まず、Firebase を追加する JavaScript(ウェブまたは Node.js)アプリを用意する必要があります。アプリがまだない場合は、クイックスタート サンプルをダウンロードしてご利用いただけます。

Node.js デスクトップ、IoT デバイスなどのエンドユーザー アクセス用のクライアントではなく、サーバーや、Cloud Functions のようなサーバーレス バックエンドなどの特権環境で Node.js の使用を検討している場合は、このドキュメントではなく、Admin SDK の設定に関する手順をご覧ください。

アプリに Firebase を追加する

アプリに Firebase を追加するには、Firebase プロジェクトと、プロジェクトに関する詳細が設定された短い初期化コード スニペットが必要です。

  1. Firebase コンソールで Firebase プロジェクトを作成します。

    • 既存の Firebase プロジェクトがない場合は、[プロジェクトを追加] をクリックし、既存の Google Cloud Platform プロジェクト名または新しいプロジェクト名を入力します。
    • 既存の Firebase プロジェクトを使用する場合は、そのプロジェクトをコンソールから選択します。
  2. Firebase コンソールのプロジェクト概要ページで、[ウェブアプリに Firebase を追加] をクリックします。プロジェクトにアプリがある場合は、プロジェクトの概要ページで [アプリを追加] を選択します。

  3. プロジェクトでカスタマイズしたコード スニペットをコピーし、ページの <head> タグに貼り付けます(他のスクリプトタグの前に貼り付けます)。

    以下に、初期化コード スニペットの例を示します。

ウェブ

[コピー] をクリックし、コード スニペットをアプリケーション HTML に貼り付けます。コード スニペットは次のようになります。

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

このスニペットには、AuthenticationCloud StorageRealtime DatabaseCloud Firestore を使用するように Firebase JavaScript SDK を構成するための初期化情報が含まれます。必要な機能のみを含めることで、アプリで使用するコードの量を減らすことができます。個別にインストール可能なコンポーネントを次に示します。

  • firebase-app - コア firebase クライアント(必須)
  • firebase-auth - Firebase Authentication(オプション)
  • firebase-database - Firebase Realtime Database(オプション)
  • firebase-firestore - Cloud Firestore(オプション)
  • firebase-storage - Cloud Storage(オプション)
  • firebase-messaging - Firebase Cloud Messaging(オプション)
  • firebase-functions - Cloud Functions for Firebase(オプション)

CDN から、必要な個々のコンポーネントをインクルードします(firebase-app を最初にインクルードします)。

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Browserify や webpack などのバンドラを使用している場合は、使用するコンポーネントを require() の対象にします。

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

Firebase SDK は npm でも使用できます。package.json ファイルがまだない場合は、npm init を介して作成します。次に、firebase npm パッケージをインストールして package.json に保存します。

$ npm install firebase --save

アプリケーションでモジュールを使用するには、任意の JavaScript ファイルから次のようにモジュールを require します。

var firebase = require("firebase");

また、ES2015 を使用している場合は、次のようにモジュールを import できます。

import firebase from "firebase";

次に、前述のコード スニペットを使用して Firebase SDK を初期化すると、次のようになります。

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Firebase サービスを使用する

Firebase App では、複数の Firebase サービスを使用できます。各サービスには firebase 名前空間からアクセスできます。

それぞれのサービスについて詳しくは、各サービスのドキュメントをご覧ください。

開発用ローカル ウェブサーバーを実行する

ウェブアプリを作成する場合、Firebase JavaScript SDK の一部では、ウェブアプリがローカル ファイルシステムからではなく、サーバーから提供されている必要があります。ローカル サーバーを実行するには、次のように Firebase CLI を使用します。

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Firebase Hosting を使用してウェブアプリをホストする

ウェブアプリを作成する際、ウェブアプリのコンテンツが全体的に静的である場合は、Firebase Hosting を使用してデプロイできます。

Firebase Hosting は、デベロッパーの使いやすさを第一に考えた、最先端のフロントエンド ウェブ アプリケーション向けの静的ウェブ ホスティングです。Firebase Hosting を使用すると、コマンド 1 つでグローバル コンテンツ配信ネットワーク(CDN)上の独自ドメインに SSL 対応ウェブアプリをデプロイできます。

SDK のインポートと暗黙の初期化

Firebase Hosting を使用してホストするウェブアプリは、プロジェクト構成が単純であるという利点があります。Firebase SDK をインポートし、アプリをホストするためのプロジェクト用に自動構成するには、次のコード スニペットをコピーして、アプリケーション html に貼り付けます。

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.8.4/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.8.4/firebase-auth.js"></script>
    <script src="/__/firebase/5.8.4/firebase-database.js"></script>
    <script src="/__/firebase/5.8.4/firebase-messaging.js"></script>
    <script src="/__/firebase/5.8.4/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.8.4/firebase-storage.js"></script> -->

    <script src="/__/firebase/init.js"></script>

複数のアプリを初期化する

ほとんどの場合、単一の(デフォルトの)アプリを初期化するだけで済みます。そのアプリからは 2 つの方法でサービスにアクセスできます(この 2 つの方法は同等です)。

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

console.log(defaultApp.name);  // "[DEFAULT]"

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

ユースケースによっては、複数のアプリを同時に作成することが必要になる場合があります。たとえば、ある Firebase プロジェクトの Realtime Database からデータを読み取り、別のプロジェクトにファイルを保存することがあります。認証するアプリもあれば、認証を解除するアプリもあります。Firebase SDK を使用すると、複数のアプリを同時に作成し、それぞれに独自の構成情報を指定できます。

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherApp.name);        // "other"

// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

次のステップ

以下で Firebase の詳細を確認します。

Firebase サービスをアプリに追加します。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。