コンソールへ移動

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

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

始める前に

  • お好みのエディタまたは IDE をインストールします。

  • JavaScript プロジェクト(ウェブまたは Node.js)を開きます。

  • Google アカウントを使用して Firebase にログインします。

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

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

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

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

ステップ 2: Firebase 構成オブジェクトを入手する

このガイドの構成手順では、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",
};

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

ステップ 3: Firebase を使用するようにアプリを構成する

Firebase を使用するようにウェブアプリまたは Node.js アプリを構成できます。

ウェブ Node.js

ウェブアプリを構成する

Firebase を使用するように JavaScript ウェブアプリを構成するには、次のいずれかの方法を使用します。

オプション 1: CDN から特定の Firebase SDK を暗黙的に追加する

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。

Firebase は、Firebase JavaScript SDK の各ライブラリをグローバル CDN(コンテンツ配信ネットワーク)に格納しています。

たとえば、Authentication と Realtime Database のみを使用する場合は、アプリの body タグ内で次の script タグを使用します。

<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/5.10.1/firebase-app.js"></script>

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

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


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

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

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

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.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);
JavaScript アプリ用に入手可能な Firebase SDK(CDN から暗黙的に取得)
Firebase プロダクト ライブラリ リファレンス
Firebase Core
(必須)

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

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

オプション 2: 特定の SDK をバンドルまたは動的に読み込む

Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。

Browserify や WebPack などのバンドラを使用している場合は、必要なときに import を使用して Firebase プロダクトをインポートして使用できます。

  1. Firebase JavaScript SDK をインストールします。

    1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。

      npm init
    2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。

      npm install --save firebase
  2. アプリで Firebase モジュールを使用します。たとえば、Authentication と Realtime Database のみを読み込む場合は、次の 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/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
JavaScript アプリ用に入手可能な Firebase SDK(import モジュール)
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";
Realtime Database import "firebase/database";

オプション 3: Firebase JavaScript SDK 全体を追加する

Firebase JavaScript SDK 全体を読み込むには、アプリの body タグ内で次の script タグを使用します。

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

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

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

Node.js アプリを構成する

  1. Firebase JavaScript SDK をインストールします。

    1. package.json ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。

      npm init
    2. 次のコマンドを実行して firebase npm パッケージをインストールし、package.json ファイルに保存します。

      npm install --save firebase
  2. アプリで Firebase モジュールを使用します。以下のいずれかの方法を選択します。

    • require を使用して、任意の JavaScript ファイルからモジュールを組み込む。

      • 使用する Firebase プロダクト(Authentication や Realtime Database など)のみを組み込むには:

        // 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/database");
        
      • Firebase JavaScript SDK 全体を組み込むには:

        var firebase = require("firebase");
    • ES2015 を使用して、import でモジュールをインポートする。

      • 使用する Firebase プロダクト(Authentication や Realtime Database など)のみを組み込むには:

        // 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/database";
        
      • Firebase JavaScript SDK 全体を組み込むには:

        import firebase from "firebase";
  3. アプリで Firebase を初期化します。

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
JavaScript アプリ用に入手可能な Firebase 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"

ステップ 4: アプリで 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()
Realtime Database firebase.database()

その他の設定オプション

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 defaultDatabase = defaultProject.database();

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

ただし、複数の 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 defaultDatabase = firebase.database();

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

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

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

  1. Firebase CLI をインストールします。

    パソコンの任意の場所から次のコマンドを実行します。

    npm install -g firebase-tools
  2. ローカルアプリ ディレクトリと Firebase を直接リンクし、firebase.json ファイルを生成しますFirebase Hosting で必要)。

    ローカルアプリ ディレクトリのルートから次のコマンドを実行します。

    firebase init

    初期化中に、公開静的ファイルを含むディレクトリ(公開ルート ディレクトリ)を指定するように求められます。Firebase が検索するディレクトリのデフォルト名は「public」です。あとで firebase.json ファイルを直接変更して、公開ディレクトリを設定することもできます。

  3. 開発用のローカル サーバーを起動します。

    ローカルアプリ ディレクトリのルートから次のコマンドを実行します。

    firebase serve

予約済み URL から SDK を読み込む

Firebase Hosting でウェブアプリをホストする場合は、Firebase JavaScript SDK ライブラリを予約済みの URL から動的に読み込むようにアプリを構成できます。

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

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

たとえば、Authentication と Realtime Database のみを使用する場合は、アプリの body タグ内で次の script タグを使用します。

<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/5.10.1/firebase-app.js"></script>

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

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
JavaScript アプリ用に入手可能な Firebase SDK(予約済み URL)
Firebase プロダクト ライブラリ リファレンス(予約済み URL)
Firebase Core
(必須)

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
Authentication

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
Firebase JavaScript SDK
(SDK 全体)

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

この設定オプションの詳細については、Hosting のドキュメントをご覧ください。

次のステップ

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

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