このガイドでは、Firebase JavaScript SDK をウェブアプリで使用する手順について説明します。また、Node.js デスクトップや IoT アプリケーションなどのエンドユーザー アクセスのクライアントとして使用する場合も、この手順に沿ってください。
ステップ 1: Firebase プロジェクトを作成してアプリを登録する
Firebase を JavaScript アプリに追加する前に、Firebase プロジェクトを作成し、そのプロジェクトにアプリを登録する必要があります。アプリを Firebase に登録すると、Firebase プロジェクトのリソースとアプリを接続するための Firebase 構成オブジェクトが提供されます。
Firebase プロジェクトの詳細や、プロジェクトにアプリを追加する際のベスト プラクティスについては、Firebase プロジェクトについて理解するをご覧ください。
Firebase プロジェクトを作成する
-
Firebase コンソールで [プロジェクトを追加] をクリックします。
-
Firebase リソースを既存の Google Cloud プロジェクトに追加するには、そのプロジェクト名を入力するか、プルダウン メニューから選択します。
-
新しいプロジェクトを作成するには、任意のプロジェクト名を入力します。必要に応じて、プロジェクト名の下に表示されるプロジェクト ID を編集することもできます。
-
-
Firebase の利用規約が表示されたら、内容を読み、同意します。
-
[続行] をクリックします。
-
(省略可)プロジェクトに対し Google Analyticsを設定します。これにより、次の Firebase プロダクトを使用する際のエクスペリエンスを最適化できます。
既存の Google Analytics アカウントを選択するか、新しいアカウントを作成します。
新しいアカウントを作成する場合は、Analytics レポートのロケーションを選択し、プロジェクトのデータ共有設定と Google Analyticsの規約に同意します。
-
[プロジェクトを作成](既存の Google Cloud プロジェクトを使用する場合は [Firebase を追加])をクリックします。
Firebase プロジェクトのリソースが自動的にプロビジョニングされます。処理が完了すると、Firebase コンソールに Firebase プロジェクトの概要ページが表示されます。
アプリを登録する
Firebase プロジェクトを作成したら、そのプロジェクトにウェブアプリを登録できます。
-
Firebase コンソールの [プロジェクトの概要] ページの中央にあるウェブアイコン( )をクリックして設定ワークフローを起動します。
すでに Firebase プロジェクトにアプリを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。
-
アプリのニックネームを入力します。
このニックネームは内部用の簡易 ID であり、Firebase コンソールでのみ表示されます。 -
[アプリを登録] をクリックします。
-
画面上の手順に沿って、アプリに Firebase SDK を追加して初期化します。
スタートガイドの以降のステップでは、Firebase SDK の追加、初期化、使用方法について詳しく説明します。
JavaScript プロジェクトがない状態で Firebase プロダクトを試す場合は、クイックスタート サンプルをダウンロードしてください。
ステップ 2: SDK をインストールして Firebase を初期化する
このページでは、Firebase JS SDK のモジュラー API(JavaScript モジュール形式を使用する)の設定手順を説明します。
このワークフローでは npm を使用します。モジュラー API は、ツリー シェイキングで未使用コードを削除して SDK のサイズを小さくするために、モジュール バンドラと連携するように最適化されています。このため、モジュール バンドラまたは JavaScript フレームワーク ツールを使用する必要があります。
npm を使用して Firebase をインストールします。
npm install firebase
アプリで Firebase を初期化して、Firebase アプリ オブジェクトを作成します。
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Firebase アプリはコンテナに似たオブジェクトで、一般的な構成を保存し、Firebase サービス全体で認証を共有します。コードで Firebase アプリ オブジェクトを初期化すると、Firebase サービスを追加して使用できるようになります。
アプリにサーバーサイド レンダリング(SSR)に基づく動的な機能が含まれている場合は、サーバー レンダリング パスとクライアント レンダリング パスで構成が保持されるように、いくつかの追加手順を行う必要があります。サーバー ロジックで
FirebaseServerApp
インターフェースを実装して、アプリが行う Service Worker によるセッション管理を最適化します。
ステップ 3: アプリで Firebase にアクセスする
Firebase サービス(Cloud Firestore、Authentication、Realtime Database、Remote Config など)は、個々のサブパッケージにインポートできます。
次の例では、Cloud Firestore Lite SDK を使用してデータのリストを取得しています。
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
ステップ 4: モジュール バンドラ(webpack や Rollup)を使用してサイズを小さくする
Firebase Web SDK は、モジュール バンドラと連携して、ツリー シェイキングで未使用コードを削除するように設計されています。本番環境用のアプリには、この方法を使用することを強くおすすめします。Angular CLI、Next.js、Vue CLI、Create React App などのツールは、npm によってインストールされ、コードベースにインポートされたライブラリのモジュール バンドルを自動的に処理します。
詳細については、Firebase でのモジュール バンドラの使用をご覧ください。
ウェブで利用できる Firebase サービス
これで Firebase を使用するための設定が完了しました。次の使用可能な Firebase サービスをウェブアプリに追加して使用できます。
次のコマンドを実行すると、npm
を使用してローカルにインストールされた Firebase ライブラリをインポートする方法が示されます。その他のインポート オプションについては、利用可能なライブラリのドキュメントをご覧ください。
次のステップ
以下で Firebase の詳細を確認します。
Firebase アプリのサンプルを確認する。
Firebase Web Codelab を使用して実際に体験する。
GitHub のオープンソース コードを調べる。
Firebase JavaScript SDK でサポートされる環境を確認する。
AngularFire、RxFire、ウェブ用 FirebaseUI など、Firebase のオープンソース ライブラリで効率的な開発を行う。
アプリを起動する準備をする。
- Google Cloud コンソールでプロジェクトの予算アラートを設定する。
- Firebase コンソールの [使用量と請求額] ダッシュボードをモニタリングして、複数の Firebase サービスを通じたプロジェクトの全体的な使用状況を確認する。
- Firebase リリース チェックリストを確認する。