Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

バージョン8からモジュラーWebSDKにアップグレードします

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

現在 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 モジュラー」の手順に従うことができます。

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

アップグレード プロセスの各ステップは、アプリのソースの編集を完了し、コンパイルして、破損することなく実行できるようにスコープが設定されています。要約すると、アプリをアップグレードするために行うことは次のとおりです。

  1. バージョン 9 ライブラリと互換ライブラリをアプリに追加します。
  2. コード内の import ステートメントを v9 互換に更新します。
  3. 単一の製品 (Authentication など) のコードをモジュラー スタイルにリファクタリングします。
  4. オプション: この時点で、続行する前に、Authentication のアプリ サイズのメリットを実現するために、Authentication compat ライブラリと Authentication の compat コードを削除します。
  5. 各製品 (Cloud Firestore、FCM など) の機能をモジュラー スタイルにリファクタリングし、すべての領域が完了するまでコンパイルとテストを行います。
  6. 初期化コードをモジュラー スタイルに更新します。
  7. 残りのすべてのバージョン 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 は将来のある時点で凍結されます。