モジュール型 Web SDK（v9）へのアップグレード

アプリが Firebase Web SDK バージョン 8 以前を使用している場合は、このガイドの手順に沿ってバージョン 9 に移行することをおすすめします。

このガイドは、読者がバージョン 8 に精通していること、webpack や Rollup などのモジュールバンドラを利用してバージョン 9 へのアップグレードと継続的な開発を行うことを前提としています。

開発環境でモジュールバンドラを使用することを強くおすすめします。モジュールバンドラを使用しない場合、バージョン 9 の主要なメリットであるアプリのサイズ削減を実現できません。SDK をインストールするには、npm または yarn が必要です。

互換ライブラリについて

Web SDK バージョン 9 で使用できるライブラリには 2 つのタイプがあります。

モジュラー - ウェブアプリをできる限り小さくして高速化するためのツリーシェイキング（未使用のコードの削除）を可能にする新しい API サーフェス。
互換 - バージョン 8 と完全な互換性を持つ、使い慣れた API サーフェス。すべての SDK コードを一度に変更することなく、バージョン 9 にアップグレードできます。バージョン 8 と比較して、互換ライブラリにはサイズやパフォーマンス上のメリットはほとんどありません。

このガイドでは、アップグレードを容易にするためにバージョン 9 互換ライブラリを利用することを前提としています。これらのライブラリでは、バージョン 9 用にリファクタリングされたコードとともに、バージョン 8 のコードを引き続き使用できます。つまり、アップグレードプロセスを進める際に、アプリのコンパイルとデバッグをより簡単に行うことができます。

Web SDK をほとんど使用していないアプリでは、バージョン 9 の互換ライブラリを使用せずに、バージョン 8 のコードをリファクタリングするほうが現実的です。このようなアプリをアップグレードする場合は、互換ライブラリを使用せずに、このガイドの「バージョン 9 モジュラー」の手順に沿ってください。

アップグレードプロセスについて

アップグレードプロセスの各ステップは、アプリのソースの編集を完了してから、エラーなしでコンパイルして実行できるように、スコープが設定されています。アプリのアップグレードの大まかな流れは次のとおりです。

バージョン 9 のライブラリと互換ライブラリをアプリに追加します。
コードのインポートステートメントを v9 互換に更新します。
コードをモジュールスタイルにリファクタリングします。
アプリサイズに関するメリットを実現するために、Authentication 互換ライブラリと Authentication 用の互換コードを削除します。
初期化コードをモジュラースタイルに更新します。
残っているバージョン 9 互換ステートメントと互換コードをアプリからすべて削除します。

バージョン 9 SDK を入手する

まず、npm（最新バージョン https://www.npmjs.com/package/firebase）を使用して、バージョン 9 のライブラリと互換ライブラリを取得します。

npm i firebase@10.11.0

# OR

yarn add firebase@10.11.0

インポートの v9 互換への更新

依存関係を v8 から v9 に更新した後もコードが引き続き動作するためには、インポートステートメントを変更して、各インポートの「互換」バージョンを使用します。次に例を示します。

変更前: バージョン 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

変更後: バージョン 9 互換

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

モジュラースタイルへのリファクタリング

バージョン 8 の API はドットチェーンの名前空間とサービスパターンに基づいていますが、バージョン 9 のモジュラーアプローチでは、原則的に関数を中心にコードを記述します。バージョン 9 では、Firebase/app パッケージやその他のパッケージは、パッケージのすべてのメソッドを含む包括的なエクスポートを返しません。代わりに、パッケージの個々の関数がエクスポートされます。

バージョン 9 では、最初の引数としてサービスが渡され、関数はサービスの詳細を使用して残りの処理を行います。

例: シンプルな認証関数のリファクタリング

変更前: バージョン 9 互換

バージョン 9 互換コードはバージョン 8 コードと同じですが、インポートは変更されています。アップグレード時に互換ライブラリを使用すると、バージョン 9 用にリファクタリングされたコードとともにバージョン 8 コードを引き続き使用できます。

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => {
  // Check for user status
});

変更後: バージョン 9 モジュラー

getAuth 関数は最初のパラメータとして firebaseApp を受け取ります。onAuthStateChanged 関数は、バージョン 8 とは異なり、Auth インスタンスからチェーンされません。これは独立した関数であり、最初のパラメータとして auth を受け取ります。

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

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

初期化コードの更新

新しいモジュラー形式のバージョン 9 構文を使用するようにアプリの初期化コードを更新します。アプリ内のすべてのコードのリファクタリングを完了した後に、このコード更新を行うことが重要です。これは、firebase.initializeApp() は互換 API とモジュラー API の両方のグローバル状態を初期化するのに対して、モジュラー形式の initializeApp() 関数はモジュラーの状態のみを初期化するためです。

変更前: バージョン 9 互換

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

変更後: バージョン 9 モジュラー

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

互換コードの削除

バージョン 9 のモジュラー SDK のサイズの利点を実現するには、最終的にすべての呼び出しを上記のモジュラースタイルに変換し、すべての import "firebase/compat/* ステートメントをコードから削除する必要があります。これを行うと、firebase.* グローバル名前空間への参照と、バージョン 8 SDK スタイルのすべてのコードがなくなります。

バージョン 9 のメリットと制限事項

完全にモジュール化されたバージョン 9 には、以前のバージョンと比べて次のようなメリットがあります。

バージョン 9 では、アプリのサイズを劇的に小さくすることができます。最新の JavaScript モジュール形式を採用することで「ツリーシェイキング」の手法が可能になり、アプリで必要なアーティファクトのみをインポートできます。アプリによっては、バージョン 9 でツリーシェイキングを行うと、バージョン 8 を使用してビルドした同等のアプリよりも 80% も小さくなることがあります。
バージョン 9 は現行の機能開発のメリットを享受し続けます。一方で、バージョン 8 は今後のどこかの時点で凍結されます。