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

事前準備

まず、Firebase を追加する JavaScript(ウェブまたは Node.js)アプリを用意する必要があります。アプリがまだない場合は、いずれかのクイックスタート サンプルをダウンロードしてご利用いただけます。Firebase 2.x SDK からアップグレードする場合は、ウェブ / 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.4.1/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.4.1/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.1/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.4.1/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.4.1/firebase-app.js"></script>

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

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.4.1/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 のサポートページをご覧ください。