モジュール型 Web SDK(v9)へのアップグレード
アプリが Firebase Web SDK バージョン 8 以前を使用している場合は、このガイドの手順に沿ってバージョン 9 に移行することをおすすめします。
このガイドは、読者がバージョン 8 に精通していること、webpack や Rollup などのモジュール バンドラを利用してバージョン 9 へのアップグレードと継続的な開発を行うことを前提としています。
開発環境でモジュール バンドラを使用することを強くおすすめします。モジュール バンドラを使用しない場合、バージョン 9 の主要なメリットであるアプリのサイズ削減を実現できません。SDK をインストールするには、npm または yarn が必要です。
互換ライブラリについて
Web SDK バージョン 9 で使用できるライブラリには 2 つのタイプがあります。
- モジュラー - ウェブアプリをできる限り小さくして高速化するためのツリー シェイキング(未使用のコードの削除)を可能にする新しい API サーフェス。
- Compat - バージョン 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@11.0.2
# OR
yarn add firebase@11.0.2
インポートの 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 は今後のどこかの時点で凍結されます。