現在 Firebase Web SDK バージョン 8 以前を使用しているアプリは、このガイドの手順に従ってバージョン 9 に移行することを検討する必要があります。
このガイドは、読者がバージョン 8 に精通しており、 webpackやRollupなどのモジュール バンドラーをアップグレードおよび進行中のバージョン 9 開発に利用することを前提としています。
開発環境でモジュール バンドラーを使用することを強くお勧めします。これを使用しないと、アプリ サイズの縮小というバージョン 9 の主なメリットを利用できなくなります。 SDK をインストールするには、 npmまたはyarnが必要です。
このガイドのアップグレード手順は、Authentication および Cloud Firestore SDK を使用する架空のウェブアプリに基づいています。例に取り組むことで、サポートされているすべての Firebase Web SDK をアップグレードするために必要な概念と実践的な手順を習得できます。
互換ライブラリについて
Firebase Web SDK バージョン 9 で使用できるライブラリには、次の 2 種類があります。
- モジュラー- ツリー シェイキング (使用されていないコードの削除) を容易にして Web アプリを可能な限り小さく高速にするように設計された新しい API サーフェス。
- Compat - バージョン 8 SDK と完全に互換性のある使い慣れた API サーフェスで、一度にすべての Firebase コードを変更することなくバージョン 9 にアップグレードできます。 Compat ライブラリには、バージョン 8 の対応するライブラリよりもサイズやパフォーマンスの利点がほとんどまたはまったくありません。
このガイドでは、アップグレードを容易にするためにバージョン 9 互換ライブラリを利用することを前提としています。これらのライブラリを使用すると、バージョン 9 用にリファクタリングされたコードと一緒にバージョン 8 のコードを引き続き使用できます。つまり、アップグレード プロセスを進めながら、アプリをより簡単にコンパイルおよびデバッグできます。
Firebase Web SDK への露出が非常に少ないアプリ (たとえば、Authentication API への単純な呼び出しのみを行うアプリ) の場合、バージョン 9 の互換ライブラリを使用せずにバージョン 8 のコードをリファクタリングすることが実用的な場合があります。このようなアプリをアップグレードする場合は、compat ライブラリを使用せずに、このガイドの「バージョン 9 モジュラー」の手順に従うことができます。
アップグレードプロセスについて
アップグレード プロセスの各ステップは、アプリのソースの編集を完了し、コンパイルして、破損することなく実行できるようにスコープが設定されています。要約すると、アプリをアップグレードするために行うことは次のとおりです。
- バージョン 9 ライブラリと互換ライブラリをアプリに追加します。
- コード内の import ステートメントを v9 互換に更新します。
- 単一の製品 (Authentication など) のコードをモジュラー スタイルにリファクタリングします。
- オプション: この時点で、続行する前に、Authentication のアプリ サイズのメリットを実現するために、Authentication compat ライブラリと Authentication の compat コードを削除します。
- 各製品 (Cloud Firestore、FCM など) の機能をモジュラー スタイルにリファクタリングし、すべての領域が完了するまでコンパイルとテストを行います。
- 初期化コードをモジュラー スタイルに更新します。
- 残りのすべてのバージョン 9 互換ステートメントと互換コードをアプリから削除します。
バージョン 9 SDK を入手する
開始するには、npm を使用してバージョン 9 ライブラリと互換ライブラリを取得します。
npm i firebase@9.15.0 # OR yarn add firebase@9.15.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 では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りの処理を行います。 Authentication API と Cloud Firestore API への呼び出しをリファクタリングする 2 つの例で、これがどのように機能するかを見てみましょう。
例 1: Authentication 関数のリファクタリング
前: バージョン 9 互換
バージョン 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
});
Auth メソッドgetRedirectResult
の扱いを更新
バージョン 9 では、 getRedirectResult
に重大な変更が導入されています。リダイレクト操作が呼び出されない場合、バージョン 8 はnull
ユーザーでUserCredential
を返しましたが、バージョン 9 はnull
を返します。
前: バージョン 9 互換
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
変更後: バージョン 9 モジュラー
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
例 2: Cloud Firestore 関数のリファクタリング
前: バージョン 9 互換
import "firebase/compat/firestore"
const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
変更後: バージョン 9 モジュラー
getFirestore
関数は、前の例でinitializeApp
から返された最初のパラメーターとしてfirebaseApp
を取ります。バージョン 9 では、クエリを作成するコードが大きく異なることに注意してください。連鎖はなく、 query
やwhere
などのメソッドはフリー関数として公開されるようになりました。
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
const db = getFirestore(firebaseApp);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
Firestore DocumentSnapshot.exists
への参照を更新します
バージョン 9 では、プロパティfirestore.DocumentSnapshot.exists
がmethodに変更された重大な変更が導入されています。機能は基本的に同じです (ドキュメントが存在するかどうかをテストします) が、次のように v9 メソッドを使用するようにコードをリファクタリングする必要があります。
前: バージョン 9 互換
if (snapshot.exists) {
console.log("the document exists");
}
変更後: バージョン 9 モジュラー
if (snapshot.exists()) {
console.log("the document exists");
}
例 3: バージョン 8 とバージョン 9 のコード スタイルを組み合わせる
アップグレード中に互換ライブラリを使用すると、バージョン 9 用にリファクタリングされたコードと一緒にバージョン 8 コードを引き続き使用できます。つまり、Authentication や他の Firebase SDK コードをバージョン 9 スタイルにリファクタリングしながら、Cloud Firestore の既存のバージョン 8 コードを維持できます。両方のコード スタイルでアプリを正常にコンパイルします。同じことが、Cloud Firestore などの製品内のバージョン 8 およびバージョン 9 コードにも当てはまります。 compat パッケージをインポートする限り、新旧のコード スタイルを共存させることができます。
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
アプリはコンパイルされますが、compat ステートメントとコードをアプリから完全に削除するまで、モジュラー コードによるアプリ サイズのメリットは得られないことに注意してください。
初期化コードを更新する
アプリの初期化コードを更新して、新しいモジュラー バージョン 9 構文を使用します。アプリ内のすべてのコードのリファクタリングが完了したら、このコードを更新することが重要です。これは、 firebase.initializeApp()
が compat 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 SDK は、ブラウザーのwindow
オブジェクトではなく、モジュールで動作するように最適化されています。以前のバージョンのライブラリでは、 window.firebase
名前空間を使用して Firebase の読み込みと管理ができました。これは、未使用のコードを削除できないため、今後はお勧めしません。ただし、JavaScript SDK の互換バージョンは、モジュラー アップグレード パスをすぐに開始したくない開発者向けのwindow
で機能します。
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
互換性ライブラリは内部でモジュラー バージョン 9 コードを使用し、バージョン 8 SDK と同じ API を提供します。これは、バージョン 8 の API リファレンスとバージョン 8 のコード スニペットで詳細を参照できることを意味します。この方法は、長期間の使用にはお勧めできませんが、完全にモジュール化されたバージョン 9 ライブラリへのアップグレードの開始としてはお勧めできません。
バージョン 9 の利点と制限事項
完全にモジュール化されたバージョン 9 には、以前のバージョンに比べて次の利点があります。
- バージョン 9 では、アプリのサイズを大幅に縮小できます。最新の JavaScript モジュール形式を採用しているため、アプリに必要なアーティファクトのみをインポートする「ツリー シェーキング」プラクティスが可能です。アプリによっては、バージョン 9 でツリー シェイキングを行うと、バージョン 8 を使用して構築された同等のアプリよりも 80% 少ないキロバイトになる可能性があります。
- バージョン 9 は継続的な機能開発の恩恵を受け続けますが、バージョン 8 は将来のある時点で凍結されます。