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

事前準備

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

アプリに Firebase を追加する

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

  1. Firebase プロジェクトをまだ用意していない場合は、Firebase console で Firebase プロジェクトを作成します。
    • アプリと関連付けられた既存の Google プロジェクトがある場合は、[Google プロジェクトをインポート] をクリックします。それ以外の場合は、[新規プロジェクトを作成] をクリックします。
    • Firebase プロジェクトがすでに存在する場合は、プロジェクトの概要ページで [アプリを追加] をクリックします。
  2. [ウェブアプリに Firebase を追加] をクリックします。
  3. この後で使用するため、初期化コード スニペットを書き留めます。

ウェブ

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

<script src="https://www.gstatic.com/firebasejs/3.8.0/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",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

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

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

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

<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-messaging.js"></script>

<!-- Leave out Storage -->
<!-- <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-storage.js"></script> -->

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

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

var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");

// Leave out Storage
//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 * as 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 対応ウェブアプリをデプロイできます。

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

ほとんどの場合、単一の(デフォルトの)アプリを初期化するだけで済みます。そのアプリからは 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 機能をアプリに追加します。

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