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

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

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

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

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

次のステップ

Firebase について学ぶ: