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

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

ステップ 1: Firebase プロジェクトを作成してアプリを登録する

Firebase を JavaScript アプリに追加する前に、Firebase プロジェクトを作成し、そのプロジェクトにアプリを登録する必要があります。アプリを Firebase に登録すると、Firebase プロジェクトのリソースとアプリを接続するための Firebase 構成オブジェクトが提供されます。

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

JavaScript プロジェクトがない状態で Firebase プロダクトを試す場合は、クイックスタート サンプルをダウンロードしてください。

ステップ 2: SDK をインストールして Firebase を初期化する

このページでは、Firebase JS SDK のモジュラー API（JavaScript モジュール形式を使用する）の設定手順を説明します。

このワークフローでは npm を使用します。モジュラー API は、ツリー シェイキングで未使用コードを削除して SDK のサイズを小さくするために、モジュール バンドラと連携するように最適化されています。このため、モジュール バンドラまたは JavaScript フレームワーク ツールを使用する必要があります。

  1. npm を使用して Firebase をインストールします。

    npm install firebase

  2. アプリで 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 の詳細を確認します。