このガイドに従って、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 サイズを縮小するように最適化されているためです。
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 サービスを追加して使用を開始できます。
ステップ 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 について学ぶ:
サンプルの Firebase アプリを調べる。
Firebase Web Codelabで実践的な体験をしてください。
Firebase JavaScript SDK でサポートされている環境を確認してください。
AngularFire 、 RxFire 、 FirebaseUI for webなど、追加の Firebase が管理するオープン ソース ライブラリを使用して開発をスピードアップします。
アプリを起動する準備をします。
- Google Cloud Console でプロジェクトの予算アラートを設定します。
- Firebase コンソールで使用状況と請求のダッシュボードを監視して、複数の Firebase サービスにわたるプロジェクトの使用状況の全体像を把握します。
- Firebase の起動チェックリストを確認します。