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

このガイドでは、Firebase JavaScript SDK をウェブアプリで使用する手順について説明します。また、Node.js デスクトップや IoT アプリケーションなどのエンドユーザーアクセスのクライアントとして使用する場合も、この手順に従ってください。

始める前に

お好みのエディタまたは IDE をインストールします。
JavaScript プロジェクト（ウェブまたは Node.js）を開きます。
Google アカウントを使用して Firebase にログインします。

JavaScript プロジェクトを作成せずに Firebase を試してみる場合は、クイックスタートのサンプルをダウンロードしてください。

ステップ 1: Firebase プロジェクトを作成する

JavaScript アプリに Firebase を追加する前に、アプリに接続する Firebase プロジェクトを作成します。

Firebase プロジェクトの詳細やプロジェクトにアプリを追加するベストプラクティスついては、Firebase プロジェクトについて理解するをご覧ください。

Firebase プロジェクトを作成する

Firebase コンソールで [プロジェクトを追加] をクリックし、[プロジェクト名] を選択するか、新しいプロジェクト名を入力します。

既存の Google Cloud Platform（GCP）プロジェクトがある場合は、[プロジェクト名] プルダウンメニューからプロジェクトを選択できます。既存のプロジェクトがない場合は、新しいプロジェクト名を入力してください。
（省略可）プロジェクト ID を編集します。

Firebase プロジェクトには一意の ID が自動的に割り当てられます。Firebase がプロジェクト ID を使用する仕組みについては、Firebase プロジェクトについて理解するをご覧ください。

Firebase プロジェクトのリソースがプロビジョニングされた後にプロジェクト ID を変更することはできません。
特定の識別子を使用するには、この設定手順でプロジェクト ID を編集する必要があります。
Firebase コンソールで残りの設定手順を実施した後、[プロジェクトを作成]（既存の Google プロジェクトを使用する場合は [Firebase を追加]）をクリックします。

Firebase プロジェクトのリソースが自動的にプロビジョニングされます。処理が完了すると、Firebase コンソールに Firebase プロジェクトの概要ページが表示されます。

ステップ 2: アプリを登録する

Firebase プロジェクトを作成したら、プロジェクトにウェブアプリを追加できます。

Firebase プロジェクトにアプリを追加するベストプラクティスと注意事項については、Firebase プロジェクトについて理解するをご覧ください。

Firebase コンソールの [プロジェクトの概要] ページで、ウェブアイコン（code）をクリックして設定ワークフローを起動します。

すでに Firebase プロジェクトにアプリまたはゲームを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。
アプリのニックネームを入力します。

ニックネームは内部用の簡便な ID であり、Firebase コンソールでのみ表示されます。
（省略可）ウェブアプリ向けに Firebase Hosting を設定します。
- Firebase Hosting の設定は、今すぐでも後ででもセットアップできます。また、プロジェクト設定で、いつでも Firebase ウェブアプリを Hosting サイトにリンクできます。
- 今すぐ Hosting を設定する場合は、プルダウンリストからサイトを選択して Firebase ウェブアプリにリンクします。
  - このリストには、プロジェクトのデフォルトの Hosting サイトと、プロジェクトで設定した他のサイトが表示されます。
  - Firebase ウェブアプリにすでにリンクしているサイトは、追加のリンクには使用できません。各 Hosting サイトは、単一の Firebase ウェブアプリにのみリンクできます。
注: Firebase Hosting は、ウェブアプリでの Firebase サービスの使用に必須ではありません。
[アプリの登録] をクリックします。

ステップ 3: Firebase SDK を追加して Firebase を初期化する

サポートされている Firebase プロダクトをアプリに追加できます。

Firebase SDK をアプリに追加する方法は、アプリに Firebase Hosting を使用するよう選択したかどうか、アプリで使用するツール（バンドラなど）、Node.js アプリを構成するかどうかによって異なります。

Hosting URL から

Firebase Hosting を使用する場合は、Firebase JavaScript SDK ライブラリを予約済みの URL から動的に読み込むようにアプリを構成できます。詳しくは、予約済みの Hosting URL から SDK を追加するをご覧ください。

この設定オプションでは、Firebase にデプロイした後で、デプロイされた Firebase プロジェクトから Firebase 構成オブジェクトが自動的に取得されます。同じコードベースを複数の Firebase プロジェクトにデプロイできますが、firebase.initializeApp() に使用している Firebase の構成を追跡する必要はありません。

この設定オプションは、ウェブアプリをローカルでテストする場合にも使用できます。

特定の Firebase サービス（Authentication と Cloud Firestore など）のみを含めるには、Firebase サービスを使用する前に、次のスクリプトを <body> タグの末尾に追加します。

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
</body>

個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="/__/firebase/6.2.0/firebase.js"></script>
  <body>

アプリで Firebase を初期化します。予約済みの Hosting URL を使用する場合、Firebase 構成オブジェクトを含める必要はありません。
```
<body>
  

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

CDN から

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。Firebase は、Firebase JavaScript SDK の各ライブラリをグローバル CDN（コンテンツ配信ネットワーク）に格納しています。

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
</body>

個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase.js"></script>
  </body>

アプリで Firebase を初期化します。

<body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

モジュールバンドラを使用する

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。バンドラ（Browserify や webpack など）を使用している場合は、必要に応じて import を使用して個々の Firebase プロダクトをインポートします。

Firebase JavaScript SDK をインストールします。
1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。
```
npm init
```
2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。
```
npm install --save firebase
```

特定の Firebase サービス（Authentication と Cloud Firestore など）のみを含めるには、Firebase モジュールを import でインポートします。

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

アプリで Firebase を初期化します。

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Node.js アプリ

Firebase JavaScript SDK をインストールします。
1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。
```
npm init
```
2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。
```
npm install --save firebase
```
アプリで Firebase モジュールを使用するには、次のオプションのいずれかを使用します。
- require を使用して、任意の JavaScript ファイルからモジュールを組み込む。
  
  特定の Firebase サービス（Authentication と Cloud Firestore など）のみを含める:
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
```
  個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）
  
  本番環境のウェブアプリの場合、SDK 全体の読み込みは効率的ではありません。
  この方法は開発環境でのみ使用してください。
```
var firebase = require("firebase");
```
- ES2015 を使用して、import でモジュールをインポートする。
  
  特定の Firebase サービス（Authentication と Cloud Firestore など）のみを含める:
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
```
  個々の SDK ではなく、Firebase JavaScript SDK 全体を含めます（本番環境アプリには推奨されません）
  
  本番環境のウェブアプリの場合、SDK 全体の読み込みは効率的ではありません。
  この方法は開発環境でのみ使用してください。
```
import firebase from "firebase";
```
  注: Node.js で import 構文を直接使用する方法はまだ試験運用段階ですが、Babel などのコンパイラを使用すると CommonJS 形式（require 構文）に変換できます。

アプリで Firebase を初期化します。

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Firebase 構成オブジェクト

アプリで Firebase を初期化するには、アプリの Firebase プロジェクト構成を提供する必要があります。

予約済みの Hosting URL を使用する場合、Firebase の構成はプロジェクトから自動的に取得されるため、コードでオブジェクトを暗黙的に提供する必要はありません。

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

Firebase 構成オブジェクトはいつでも入手できます。

ステップ 4:（省略可）CLI をインストールし、Firebase Hosting にデプロイする

Firebase ウェブアプリを Firebase Hosting サイトにリンクしている場合、サイトのコンテンツと構成を今（ウェブアプリの設定時）、または後からいつでもデプロイできます。

Firebase にデプロイするには、コマンドラインツールである Firebase CLI を使用します。CLI の最新バージョンをインストールまたは更新します。

パソコンの任意の場所から次の npm コマンドを実行します。
```
npm install -g firebase-tools
```
注: コマンドが失敗した場合は、詳細な CLI インストール手順をご確認ください。
Google にログインします。次のコマンドを実行します。
```
firebase login
```
このコマンドにより、ローカルマシンが Firebase に接続し、Firebase プロジェクトへのアクセスが許可されます。
Firebase プロジェクトを初期化します。ローカルアプリディレクトリのルートから次のコマンドを実行します。
```
firebase init
```
この初期化コマンドは以下を行います。
- ローカルアプリディレクトリを Firebase にリンクします。
- firebase.json ファイル（Firebase Hosting に必要なファイル）を生成します。
- 公開静的ファイル（HTML、CSS、JS など）を含む公開ルートディレクトリを指定するよう求めます。
  
  Firebase が検索するディレクトリのデフォルト名は「public」です。firebase.json ファイルを直接編集することで、公開ディレクトリを設定することもできます。
コンテンツと Hosting 構成を Firebase Hosting にデプロイします。
デフォルトの Hosting サイト
デフォルトでは、Firebase プロジェクトはすべて、web.app ドメインと firebaseapp.com ドメイン（project-id.web.app および project-id.firebaseapp.com）に無料のサブドメインがあります。
1. サイトにデプロイします。アプリのルートディレクトリから次のコマンドを実行します。
```
firebase deploy
```
2. いずれかのデフォルトサイトで自身のサイトを表示します。
  - project-id.web.app
  - project-id.firebaseapp.com
デフォルト以外の Hosting サイト
Firebase プロジェクトは複数のサイトをサポートしています（これらはデフォルト以外のサイトと見なされます）。コンソールのウェブアプリの設定ワークフロー中、またはコンソールの Hosting ページから、プロジェクトにサイトを追加できます。

以下に示すクイックスタート手順は、初期開発専用です。本番環境アプリの場合、追加サイトのデプロイを設定するためのベストプラクティスに従ってください。
1. サイトを firebase.json ファイル（firebase init の実行中に作成されたもの）に追加します。
  
  この firebase.json 構成では、サイトごとに個別のリポジトリがあることを前提としていることに注意してください。
```
{
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}
```
2. サイトにデプロイします。アプリのルートディレクトリから次のコマンドを実行します。
```
firebase deploy --only hosting:site-name
```
3. 次のいずれかでサイトを表示します。
  - site-name.web.app
  - site-name.firebaseapp.com

ステップ 5: アプリで Firebase にアクセスする

Firebase JavaScript SDK は、次の Firebase プロダクトをサポートしています。各プロダクトはオプションで、firebase 名前空間からアクセスできます。

使用可能なメソッドについては、Firebase JavaScript のリファレンスドキュメントをご覧ください。

Firebase プロダクト	名前空間	ウェブ	Node.js
Authentication	`firebase.auth()`
Cloud Firestore	`firebase.firestore()`
Cloud Functions for Firebase Client SDK	`firebase.functions()`
Cloud Messaging	`firebase.messaging()`
Cloud Storage	`firebase.storage()`
Performance Monitoring (ベータ版リリース）	`firebase.performance()`
Realtime Database	`firebase.database()`

使用可能なライブラリ

利用可能な Firebase JS SDK（予約済み Hosting URL から）

Firebase プロダクト	ライブラリリファレンス（予約済み URL）
Firebase Core （必須）	<script src="/__/firebase/6.2.0/firebase-app.js"></script>
Authentication	<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK	<script src="/__/firebase/6.2.0/firebase-functions.js"></script>
Cloud Messaging	<script src="/__/firebase/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="/__/firebase/6.2.0/firebase-storage.js"></script>
Performance Monitoring （ベータ版リリース）	<script src="/__/firebase/6.2.0/firebase-performance.js"></script>
Realtime Database	<script src="/__/firebase/6.2.0/firebase-database.js"></script>
Firebase JavaScript SDK （SDK 全体）	<script src="/__/firebase/6.2.0/firebase.js"></script>

利用可能な Firebase JS SDK（CDN から）

Firebase プロダクト	ライブラリリファレンス
Firebase Core （必須）	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
Authentication	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-functions.js"></script>
Cloud Messaging	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
Performance Monitoring （ベータ版リリース）	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-performance.js"></script> Performance Monitoring スタートガイドにアクセスして、スタンドアロンの軽量 Performance Monitoring SDK オプションを追加します。
Realtime Database	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>

利用可能な Firebase JS SDK（モジュール付きバンドラを使用）

Firebase プロダクト	ライブラリリファレンス
Firebase Core（必須）	`import "firebase/app";`
Authentication	`import "firebase/auth";`
Cloud Firestore	`import "firebase/firestore";`
Cloud Functions for Firebase Client SDK	`import "firebase/functions";`
Cloud Messaging	`import "firebase/messaging";`
Cloud Storage	`import "firebase/storage";`
Performance Monitoring（ベータ版リリース）	`import "firebase/performance";`
Realtime Database	`import "firebase/database";`

利用可能な Firebase JS SDK（Node.js のモジュール）

Firebase プロダクト	ライブラリモジュール
Firebase Core（必須）	`"firebase/app"`
Authentication	`"firebase/auth"`
Cloud Firestore	`"firebase/firestore"`
Cloud Functions for Firebase Client SDK	`"firebase/functions"`
Realtime Database	`"firebase/database"`

その他の設定オプション

Firebase SDK の読み込みを遅らせる（CDN から）

ページ全体が読み込まれるまで、Firebase SDK の登録を遅らせることができます。

Firebase SDK の各 script タグに defer フラグを追加して、2 番目のスクリプトを使用して Firebase の初期化を遅らせます。

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

init-firebase.js ファイルを作成して、次のコンテンツを含めます。

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

1 つのアプリで複数の Firebase プロジェクトを使用する

ほとんどの場合、Firebase の初期化は単一のデフォルトアプリで行うだけで済みます。このアプリからは 2 つの方法で Firebase にアクセスできます（この 2 つの方法は同等です）。

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

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

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

ただし、複数の Firebase プロジェクトに同時にアクセスしなければならない場合もあります。たとえば、ある Firebase プロジェクトのデータベースからデータを読み取り、別の Firebase プロジェクトにファイルを保存することがあります。また、1 つのプロジェクトで認証を行い、もう 1 つのプロジェクトで認証を解除する場合もあります。

Firebase JavaScript SDK を使用すると、プロジェクトごとに独自の Firebase 構成情報を使用し、1 つのアプリで同時に複数の Firebase プロジェクトを初期化して使用できます。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

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

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

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

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

アプリに Firebase Hosting をすでに設定している場合は、以下の手順の一部をすでに完了させている場合があります。

Firebase CLI をインストールまたは更新します。パソコンの任意の場所から次の npm コマンドを実行します。
```
npm install -g firebase-tools
```
注: コマンドが失敗した場合は、詳細な CLI インストール手順をご確認ください。
Google にログインします。次のコマンドを実行します。
```
firebase login
```
このコマンドにより、ローカルマシンが Firebase に接続し、Firebase プロジェクトへのアクセスが許可されます。
Firebase プロジェクトを初期化します。ローカルアプリディレクトリのルートから次のコマンドを実行します。
```
firebase init
```
この初期化コマンドは以下を行います。
- ローカルアプリディレクトリを Firebase にリンクします。
- firebase.json ファイル（Firebase Hosting に必要なファイル）を生成します。
- 公開静的ファイル（HTML、CSS、JS など）を含む公開ルートディレクトリを指定するよう求めます。
  
  Firebase が検索するディレクトリのデフォルト名は「public」です。firebase.json ファイルを直接編集することで、公開ディレクトリを設定することもできます。
開発用のローカルサーバーを起動します。ローカルアプリディレクトリのルートから次のコマンドを実行します。
```
firebase serve
```

次のステップ

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

Firebase アプリのサンプルを確認する。
Firebase Web Codelab を使用して実際に体験する。
GitHub のオープンソースコードを調べる。
Firebase JavaScript SDK でサポートされる環境を確認する。
AngularFire、RxFire、ウェブ用 FirebaseUI など、Firebase のオープンソースライブラリで効率的な開発を行う。
アプリを起動する準備をする。
- 請求アラートを設定する。
- Firebase のリリースチェックリストを確認する。

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

Firebase Hosting でアプリをホストする。
Authentication でユーザー認証フローを設定する。
Cloud Firestore または Realtime Database にユーザー情報などのデータを保存する。
Cloud Storage に写真や動画などのファイルを保存する。
Performance Monitoring を使用して、アプリのパフォーマンスの問題を見抜く。
Cloud Functions を使用した安全な環境でバックエンドコードをトリガーする。
Cloud Messaging を使用して通知を送信する。

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

始める前に

ステップ 1: Firebase プロジェクトを作成する

ステップ 2: アプリを登録する

ステップ 3: Firebase SDK を追加して Firebase を初期化する

Hosting URL から

CDN から

モジュール バンドラを使用する

Node.js アプリ

Firebase 構成オブジェクト

ステップ 4:（省略可）CLI をインストールし、Firebase Hosting にデプロイする

デフォルトの Hosting サイト

デフォルト以外の Hosting サイト

ステップ 5: アプリで Firebase にアクセスする

使用可能なライブラリ

利用可能な Firebase JS SDK（予約済み Hosting URL から）

利用可能な Firebase JS SDK（CDN から）

利用可能な Firebase JS SDK（モジュール付きバンドラを使用）

利用可能な Firebase JS SDK（Node.js のモジュール）

その他の設定オプション

Firebase SDK の読み込みを遅らせる（CDN から）

1 つのアプリで複数の Firebase プロジェクトを使用する

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

次のステップ

モジュールバンドラを使用する

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