Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

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

このガイドに従って、Web アプリで 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 を使用し、モジュール バンドラーまたは JavaScript フレームワーク ツールが必要です。これは、v9 SDK がモジュール バンドラーと連携して未使用のコードを排除し (ツリー シェイキング)、SDK サイズを縮小するように最適化されているためです。

  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 CLINext.jsVue CLICreate React Appなどのツールは、npm を介してインストールされ、コードベースにインポートされたライブラリのモジュール バンドルを自動的に処理します。

詳細については、Firebase でモジュール バンドラーを使用するガイドをご覧ください。

ウェブで利用可能な Firebase サービス

Firebase を使用するためのセットアップが完了したので、次の利用可能な Firebase サービスのいずれかを Web アプリに追加して使用することができます。

次のコマンドは、 npmを使用してローカルにインストールされた Firebase ライブラリをインポートする方法を示しています。別のインポート オプションについては、利用可能なライブラリのドキュメントを参照してください。

次のステップ

Firebase について学ぶ: