WebとFirebaseの詳細

Firebase を使用して Web アプリを開発していると、なじみのない概念に遭遇したり、プロジェクトの正しい決定を下すためにさらに情報が必要な領域に遭遇したりすることがあります。このページは、これらの質問に答えたり、詳細を学ぶためのリソースを紹介したりすることを目的としています.

このページに記載されていないトピックについて質問がある場合は、オンライン コミュニティにアクセスしてください。また、このページは定期的に新しいトピックで更新されますので、知りたいトピックが追加されているかどうかを確認してください。

SDK バージョン 8 および 9

Firebase には、ウェブアプリ用に 2 つの SDK バージョンが用意されています。

• バージョン 8.これは、Firebase が数年間維持してきた JavaScript インターフェースであり、既存の Firebase アプリを使用する Web デベロッパーにはなじみ深いものです。 Firebase は 1 回のメジャー リリース サイクル後にこのバージョンのサポートを終了するため、新しいアプリでは代わりにバージョン 9 を採用する必要があります。
• モジュラーバージョン 9 .この SDK は、SDK のサイズを縮小し、 webpackやRollupなどの最新の JavaScript ビルド ツールを使用して効率を高めるモジュラー アプローチを導入しています。

バージョン 9 は、アプリで使用されていないコードを取り除くビルド ツール (「ツリー シェイキング」と呼ばれるプロセス) とうまく統合されています。この SDK を使用して構築されたアプリは、サイズのフットプリントが大幅に削減されるというメリットがあります。バージョン 8 はモジュールとして入手できますが、厳密なモジュール構造ではなく、同程度のサイズ縮小は実現していません。

バージョン 9 SDK の大部分はバージョン 8 と同じパターンに従いますが、コードの編成は異なります。一般に、バージョン 8 は名前空間とサービス パターンを対象としており、バージョン 9 は個別の機能を対象としています。たとえば、firebaseApp.auth( firebaseApp.auth()などのバージョン 8 のドットチェーンは、バージョン 9 では、 firebaseAppを受け取り、Authentication インスタンスを返す単一のgetAuth()関数に置き換えられています。

つまり、バージョン 8 以前で作成された Web アプリは、バージョン 9 のモジュラー アプローチを利用するためにリファクタリングが必要です。 Firebase は、その移行を容易にする互換ライブラリを提供します。詳細については、アップグレード ガイドを参照してください。

何がサポートされていますか?

バージョン 8 とバージョン 9 のコード スタイルは異なりますが、Firebase の機能とオプションのサポートは非​​常に似ています。このガイドで詳しく説明するように、SDK の両方のバージョンは、SDK を追加/インストールするためのいくつかのオプションと共に、JavaScript と Node.js バリアントをサポートします。

詳細については、このページで後述する「Web SDK をアプリに追加する方法」と「 Firebase Web SDK バリアント」を参照してください。

新しいアプリのバージョン 9

Firebase との新しい統合を開始する場合は、SDK を追加して初期化するときに、バージョン 9 SDK を選択できます。

アプリを開発するときは、コードが主に関数を中心に編成されることに注意してください。バージョン 9 では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りの処理を行います。例えば：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

その他の例と詳細については、各製品分野のガイドとバージョン 9 のリファレンス ドキュメントを参照してください。

Web SDK をアプリに追加する方法

Firebase は、Remote Config、FCM など、ほとんどの Firebase プロダクト用の JavaScript ライブラリを提供します。 Firebase SDK を Web アプリに追加する方法は、アプリで使用しているツール (モジュール バンドラーなど) や、アプリが Node.js などの非ブラウザー環境で実行されているかどうかによって異なります。

サポートされている方法のいずれかを使用して、利用可能なライブラリをアプリに追加できます。

• npm (モジュール バンドラーおよび Node.js 用)
• CDN（コンテンツ配信ネットワーク）

詳細な設定手順については、 Firebase を JavaScript アプリに追加する を参照してください。このセクションの残りの部分には、利用可能なオプションから選択するのに役立つ情報が含まれています。

npm

Firebase npm パッケージ (ブラウザー バンドルと Node.js バンドルの両方を含む) をダウンロードすると、Firebase SDK のローカル コピーが提供されます。これは、Node.js アプリ、React Native、Electron などの非ブラウザー アプリケーションに必要になる場合があります。ダウンロードには、一部のパッケージのオプションとして Node.js および React Native バンドルが含まれています。 Node.js バンドルは、SSR フレームワークのサーバー側レンダリング (SSR) ステップに必要です。

webpackやRollupなどのモジュール バンドラーで npm を使用すると、最適化オプションが提供され、未使用のコードを「ツリー シェイク」し、対象となるポリフィルを適用できるため、アプリのサイズ フットプリントを大幅に削減できます。これらの機能を実装すると、構成とビルド チェーンがいくらか複雑になる可能性がありますが、さまざまな主流の CLI ツールがそれを軽減するのに役立ちます。これらのツールには、 Angular 、 React 、 Vue 、 Nextなどが含まれます。

要約すれば：

• 貴重なアプリ サイズの最適化を提供します
• モジュールを管理するための堅牢なツールが利用可能
• Node.js を使用した SSR に必要

CDN（コンテンツ配信ネットワーク）

Firebase の CDN に保存されているライブラリを追加することは、多くの開発者になじみのある簡単な SDK 設定方法です。 CDN を使用して SDK を追加すると、ビルド ツールが不要になり、モジュール バンドラーと比較して、ビルド チェーンがよりシンプルで操作しやすくなる傾向があります。アプリのインストール サイズを特に気にせず、TypeScript からのトランスパイルなどの特別な要件がない場合は、CDN が適切な選択になる可能性があります。

要約すれば：

• なじみのあるシンプルな
• アプリのサイズが重要でない場合に適しています
• Web サイトでビルド ツールを使用しない場合に適しています。

Firebase Web SDK バリアント

現在、Firebase は 2 つの Web SDK バリアントを提供しています。

• ブラウザで使用するすべての Firebase 機能をサポートする JavaScript バンドル。
• すべてではありませんが多くの Firebase 機能をサポートするクライアント側の Node.js バンドル。サポートされている環境のリストを参照してください。

これらの SDK バリアントはどちらも、Node.js デスクトップや IoT アプリケーションなどで、エンドユーザー アクセス用の Web アプリまたはクライアント アプリを構築できるように設計されています。特権環境 (サーバーなど) からの管理アクセスを設定することが目標の場合は、代わりにFirebase Admin SDKを使用してください。

バンドラーとフレームワークによる環境検出

npm を使用して Firebase Web SDK をインストールすると、JavaScript と Node.js の両方のバージョンがインストールされます。このパッケージは、アプリケーションに適したバンドルを有効にするための詳細な環境検出を提供します。

コードで Node.js のrequireステートメントを使用している場合、SDK は Node 固有のバンドルを見つけます。それ以外の場合は、 package.jsonファイル内の正しいエントリ ポイント フィールド (たとえば、 main 、 browser 、またはmodule ) を検出するために、バンドラーの設定を正しく計算する必要があります。 SDK で実行時エラーが発生した場合は、環境に適したタイプのバンドルを優先するようにバンドラーが構成されていることを確認してください。

Firebase 構成オブジェクトについて学習する

アプリで Firebase を初期化するには、アプリの Firebase プロジェクト構成を提供する必要があります。 Firebase 構成オブジェクトはいつでも取得できます。

• 構成オブジェクト、特に次の必須の「Firebase オプション」を手動で編集することはお勧めしません: apiKey 、 projectId 、およびappID 。これらの必須の「Firebase オプション」の値が無効または欠落している状態でアプリを初期化すると、アプリのユーザーに深刻な問題が発生する可能性があります。

• Firebase プロジェクトで Google アナリティクスを有効にした場合、構成オブジェクトにはフィールドmeasurementIdが含まれます。このフィールドの詳細については、 Analytics の開始ページをご覧ください。

• Firebase Web アプリを作成した後に Google アナリティクスまたは Realtime Database を有効にする場合は、アプリで使用する Firebase 構成オブジェクトが関連する構成値 (それぞれmeasurementIdとdatabaseURL ) で更新されていることを確認してください。 Firebase 構成オブジェクトはいつでも取得できます。

以下は、すべてのサービスが有効になっている構成オブジェクトの形式です (これらの値は自動的に入力されます)。

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

利用可能なライブラリ

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-analytics.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app-check.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-installations.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase-app.js"></script>

<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>

<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>

<script src="/__/firebase/8.10.1/firebase-auth.js"></script>

<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>

<script src="/__/firebase/8.10.1/firebase-functions.js"></script>

<script src="/__/firebase/8.10.1/firebase-installations.js"></script>

<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

<script src="/__/firebase/8.10.1/firebase-storage.js"></script>

<script src="/__/firebase/8.10.1/firebase-performance.js"></script>

<script src="/__/firebase/8.10.1/firebase-database.js"></script>

<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase.js"></script>

追加のセットアップ オプション

Firebase SDK の読み込みを遅らせる（CDN から）

ページ全体が読み込まれるまで、Firebase SDK の組み込みを遅らせることができます。 <script type="module">でバージョン 9 の CDN スクリプトを使用している場合、これがデフォルトの動作です。バージョン 8 の CDN スクリプトをモジュールとして使用している場合は、次の手順を実行して読み込みを延期します。

1. Firebase SDK の各scriptタグにdeferフラグを追加してから、2 番目のスクリプトを使用して Firebase の初期化を延期します。次に例を示します。

   <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
   
   <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
   <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
   
   // ...
   
   <script defer src="./init-firebase.js"></script>
   

2. init-firebase.jsファイルを作成し、ファイルに以下を含めます。

   // TODO: Replace the following with your app's Firebase project configuration
   var firebaseConfig = {
     // ...
   };
   
   // Initialize Firebase
   firebase.initializeApp(firebaseConfig);
   

1 つのアプリで複数の Firebase プロジェクトを使用する

ほとんどの場合、単一のデフォルト アプリで Firebase を初期化するだけで済みます。そのアプリから 2 つの同等の方法で Firebase にアクセスできます。

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

ただし、複数の Firebase プロジェクトに同時にアクセスする必要がある場合もあります。たとえば、ある Firebase プロジェクトのデータベースからデータを読み取り、ファイルを別の Firebase プロジェクトに保存したい場合があります。または、1 つのプロジェクトを認証し、2 つ目のプロジェクトを認証しないままにしておくこともできます。

Firebase JavaScript SDK を使用すると、1 つのアプリで複数の Firebase プロジェクトを同時に初期化して使用できます。各プロジェクトは独自の Firebase 構成情報を使用します。

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

開発用のローカル Web サーバーを実行する

ウェブアプリを構築している場合、Firebase JavaScript SDK の一部では、ウェブアプリをローカル ファイル システムからではなく、サーバーから提供する必要があります。 Firebase CLIを使用して、ローカル サーバーを実行できます。

アプリの Firebase Hosting を既にセットアップしている場合は、以下の手順のいくつかを既に完了している可能性があります。

ウェブアプリを提供するには、コマンドライン ツールである Firebase CLI を使用します。

1. CLIのインストール方法または最新バージョンへの更新方法については、Firebase CLI のドキュメントを参照してください。

2. Firebase プロジェクトを初期化します。ローカル アプリ ディレクトリのルートから次のコマンドを実行します。

   firebase init

   この初期化コマンドは何をしますか?

   • ローカルのアプリ ディレクトリを Firebase にリンクします

   • firebase.jsonファイルを生成します (Firebase Hosting に必要なファイル)

   • パブリック静的ファイル (HTML、CSS、JS など) を含むパブリック ルート ディレクトリを指定するように求められます。

     Firebase が検索するディレクトリのデフォルト名は「public」です。 firebase.jsonファイルを直接変更して、後でpublic ディレクトリを設定することもできます。

3. 開発用のローカル サーバーを起動します。ローカル アプリ ディレクトリのルートから次のコマンドを実行します。

   firebase serve

Firebase JavaScript SDK のオープンソース リソース

Firebase はオープンソース開発をサポートしており、コミュニティへの貢献とフィードバックを奨励しています。

Firebase JavaScript SDK

ほとんどの Firebase JavaScript SDK は、公開されているFirebase GitHub リポジトリでオープン ソース ライブラリとして開発されています。

クイックスタート サンプル

Firebase では、Web 上のほとんどの Firebase API のクイックスタート サンプルのコレクションを保持しています。これらのクイックスタートは、公開されているFirebase GitHub クイックスタート リポジトリで見つけてください。これらのクイックスタートは、Firebase SDK を使用するためのサンプル コードとして使用できます。