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

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

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

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

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

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

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

このページでは、JavaScript モジュール形式の Firebase JS SDK バージョン 9 を設定する手順について説明します。

このワークフローでは npm を使用します。v9 SDK は、ツリー シェイキングで未使用コードを削除して 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 サービスを追加して使用できるようになります。

ステップ 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 の詳細を確認します。