このガイドでは、Firebase JavaScript SDK をウェブアプリで使用する手順について説明します。また、Node.js デスクトップや IoT アプリケーションなどのエンドユーザー アクセスのクライアントとして使用する場合も、この手順に沿ってください。
前提条件
お好みのエディタまたは IDE をインストールします。
Google アカウントを使用して Firebase にログインします。
JavaScript プロジェクトがまだない方で Firebase プロダクトを試す場合は、クイックスタート サンプルをダウンロードしてください。
ステップ 1: Firebase プロジェクトを作成する
JavaScript アプリに Firebase を追加する前に、アプリに接続する Firebase プロジェクトを作成します。
Firebase プロジェクトの詳細や、プロジェクトにアプリを追加する際のベスト プラクティスについては、Firebase プロジェクトについて理解するをご覧ください。
ステップ 2: アプリを Firebase に登録する
Firebase プロジェクトを作成したら、プロジェクトにウェブアプリを追加できます。
Firebase プロジェクトにアプリを追加する際のベスト プラクティスと考慮事項については、Firebase プロジェクトについて理解するをご覧ください。
Firebase コンソールの [プロジェクトの概要] ページの中央にあるウェブアイコン( )をクリックして設定ワークフローを起動します。
すでに Firebase プロジェクトにアプリを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。
アプリのニックネームを入力します。
このニックネームは内部用の簡便な ID であり、Firebase コンソールでのみ表示されます。(省略可)ウェブアプリ向けに Firebase Hosting を設定します。
Firebase Hosting の設定は、今すぐでも後ででもセットアップできます。また、プロジェクト設定で、いつでも Firebase ウェブアプリを Hosting サイトにリンクできます。
今すぐ Hosting を設定する場合は、プルダウン リストからサイトを選択して Firebase ウェブアプリにリンクします。
このリストには、プロジェクトのデフォルトの Hosting サイトと、プロジェクトで設定した他のサイトが表示されます。
Firebase ウェブアプリにすでにリンクしているサイトは、追加のリンクには使用できません。各 Hosting サイトは、単一の Firebase ウェブアプリにのみリンクできます。
[アプリを登録] をクリックします。
ステップ 3: Firebase SDK を追加して Firebase を初期化する
Firebase には、Remote Config や FCM など、ほとんどの Firebase プロダクトの JavaScript ライブラリが用意されています。使用可能なライブラリをアプリに追加できます。
Firebase SDK をウェブアプリに追加する方法は、アプリに Firebase Hosting を使用するよう選択したかどうか、どのツールをアプリで使用しているか(例: モジュール バンドラなど)、Node.js アプリを構成しているかどうかによって異なります。どの SDK を選択すべきかについて詳しくは、ウェブ SDK をアプリに追加する方法をご覧ください。
モジュール バンドラを使用する
Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。バンドラ(Browserify や webpack など)を使用している場合は、必要に応じて import
を使用して個々の Firebase プロダクトをインポートします。
Firebase JavaScript SDK をインストールします。
package.json
ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。npm init
次のコマンドを実行して
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 firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // 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 // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
CDN から
Firebase JavaScript SDK の部分的なインポートを構成し、必要な Firebase プロダクトのみを読み込むことができます。Firebase は、Firebase JavaScript SDK の各ライブラリをグローバル CDN(コンテンツ配信ネットワーク)に格納しています。
特定の 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="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-firestore.js"></script> </body>
アプリで Firebase を初期化します。
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
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/8.2.7/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.2.7/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.2.7/firebase-auth.js"></script> <script src="/__/firebase/8.2.7/firebase-firestore.js"></script> </body>
アプリで Firebase を初期化します。予約済みの Hosting URL を使用する場合、Firebase 構成オブジェクトを含める必要はありません。
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Node.js アプリ
Firebase JavaScript SDK をインストールします。
package.json
ファイルがない場合は、JavaScript プロジェクトのルートから次のコマンドを実行して作成します。npm init
次のコマンドを実行して
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");
ES2015 を使用して、
import
でモジュールをインポートする。特定の Firebase プロダクト(Authentication や Cloud Firestore など)のみを含めるには:
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore";
アプリで Firebase を初期化します。
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Firebase 構成オブジェクトの詳細
アプリで Firebase を初期化するには、アプリの Firebase プロジェクト構成を提供する必要があります。Firebase 構成オブジェクトはいつでも入手できます。
予約済みの Hosting URL を使用する場合、Firebase の構成は Firebase プロジェクトから自動的に取得されるため、コードで構成オブジェクトを明示的に指定する必要はありません。
構成オブジェクト(特に、必須の Firebase オプション
apiKey
、projectId
、appID
)を手動で編集しないことをおすすめします。これらの必須の「Firebase オプション」のいずれかで無効な値が指定されているか、値が欠落している状態でアプリを初期化すると、ユーザーに深刻な問題が発生することがあります。Firebase プロジェクトで Google アナリティクスを有効にすると、構成オブジェクトに
measurementId
フィールドが含まれます。このフィールドの詳細については、Google アナリティクスのスタートガイドをご覧ください。
すべてのサービスが有効になっている構成オブジェクトの形式は次のとおりです(これらの値は自動的に入力されます)。
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field 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", measurementId: "G-MEASUREMENT_ID", };
値の例を含む構成オブジェクトを次に示します。
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" };
ステップ 4:(省略可)CLI をインストールし、Firebase Hosting にデプロイする
Firebase ウェブアプリを Firebase Hosting サイトにリンクしている場合、サイトのコンテンツと構成を今(ウェブアプリの設定時)、または後からいつでもデプロイできます。
Firebase にデプロイするには、コマンドライン ツールである Firebase CLI を使用します。
CLI をインストールする方法または最新バージョンに更新する方法については、Firebase CLI のドキュメントをご覧ください。
Firebase プロジェクトを初期化します。ローカルアプリ ディレクトリのルートから次のコマンドを実行します。
firebase init
コンテンツとホスティング構成を Firebase Hosting にデプロイします。
デフォルトの Hosting サイト
デフォルトでは、すべての Firebase プロジェクトに
web.app
ドメインとfirebaseapp.com
ドメインの無料サブドメイン( とproject-id.web.app
)があります。project-id.firebaseapp.com
サイトにデプロイします。アプリのルート ディレクトリから次のコマンドを実行します。
firebase deploy
いずれかのデフォルト サイトで自身のサイトを表示します。
project-id.web.app
project-id.firebaseapp.com
デフォルト以外の Hosting サイト
Firebase プロジェクトは複数のサイトをサポートします(これらはデフォルト以外のサイトとみなされます)。コンソールのウェブアプリの設定ワークフロー中、またはコンソールの Hosting ページから、プロジェクトにサイトを追加できます。
サイトを
firebase.json
ファイル(firebase init
の実行中に作成されたもの)に追加します。この
firebase.json
構成では、サイトごとに個別のリポジトリがあることを前提としていることに注意してください。{ "hosting": { "site": "site-name>", "public": "public", // ... } }
サイトにデプロイします。アプリのルート ディレクトリから次のコマンドを実行します。
firebase deploy --only hosting:site-name
次のいずれかでサイトを表示します。
site-name.web.app
site-name.firebaseapp.com
ステップ 5: アプリで Firebase にアクセスする
Firebase JavaScript SDK は、次の Firebase プロダクトをサポートしています。各プロダクトはオプションで、firebase
名前空間からアクセスできます。
使用可能なメソッドについては、Firebase JavaScript のリファレンス ドキュメントをご覧ください。
Firebase プロダクト | 名前空間 | ウェブ | Node.js |
---|---|---|---|
アナリティクス | firebase.analytics() |
||
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() |
||
Remote Config (ベータ版リリース) | firebase.remoteConfig() |
使用可能なライブラリ
次のステップ
以下で Firebase の詳細を確認します。
Firebase アプリのサンプルを確認する。
Firebase Web Codelab を使用して実際に体験する。
GitHub のオープンソース コードを調べる。
Firebase JavaScript SDK でサポートされる環境を確認する。
AngularFire、RxFire、ウェブ用 FirebaseUI など、Firebase のオープンソース ライブラリで効率的な開発を行う。
アプリを起動する準備をする。
- Google Cloud Console でプロジェクトの予算アラートを設定する。
- Firebase コンソールで使用量と請求額ダッシュボードをモニタリングする。
- Firebase リリース チェックリストを確認する。
Firebase サービスをアプリに追加します。
Firebase Hosting でアプリをホストする。
Authentication でユーザー認証フローを設定する。
Cloud Firestore または Realtime Database にユーザー情報などのデータを保存する。
Cloud Storage に写真や動画などのファイルを保存する。
Performance Monitoring を使用して、アプリのパフォーマンスの問題を見抜く。
Cloud Functions を使用した安全な環境でバックエンド コードをトリガーする。
Cloud Messaging を使用して通知を送信する。