Check out what’s new from Firebase at Google I/O 2022. Learn more

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

現在FirebaseWeb SDKバージョン8以前を使用しているアプリは、このガイドの手順を使用してバージョン9への移行を検討する必要があります。

このガイドは、バージョン8に精通しており、バージョン9のアップグレードと進行中の開発にwebpackやRollupなどのモジュールバンドラーを利用することを前提としています。

開発環境でモジュールバンドラーを使用することを強くお勧めします。使用しない場合、アプリのサイズを小さくすることでバージョン9の主な利点を活用できなくなります。 SDKをインストールするには、 npmまたはyarnが必要です。

このガイドのアップグレード手順は、AuthenticationおよびCloud FirestoreSDKを使用する架空のWebアプリに基づいています。例を実行することで、サポートされているすべてのFirebase WebSDKをアップグレードするために必要な概念と実践的な手順を習得できます。

compatライブラリについて

Firebase WebSDKバージョン9で利用できるライブラリには次の2種類があります。

  • モジュラー-ツリーシェイク（未使用のコードの削除）を容易にして、Webアプリを可能な限り小さく高速にするように設計された新しいAPIサーフェス。
  • Compat-バージョン8SDKと完全に互換性のあるおなじみのAPIサーフェスであり、すべてのFirebaseコードを一度に変更することなくバージョン9にアップグレードできます。 Compatライブラリには、バージョン8のライブラリに比べてサイズやパフォーマンスの利点がほとんどまたはまったくありません。

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

Firebase Web SDKへのアクセスが非常に少ないアプリ（たとえば、認証APIを呼び出すだけのアプリ）の場合、バージョン9の互換ライブラリを使用せずにバージョン8のコードをリファクタリングすることが実用的です。このようなアプリをアップグレードする場合は、互換性のあるライブラリを使用せずに、このガイドの「バージョン9モジュラー」の手順に従うことができます。

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

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

  1. バージョン9ライブラリとcompatライブラリをアプリに追加します。
  2. コード内のインポートステートメントをv9compatに更新します。
  3. 単一の製品（認証など）のコードをモジュラースタイルにリファクタリングします。
  4. オプション：この時点で、認証のアプリサイズの利点を実現するために、認証用の認証互換ライブラリと互換コードを削除してから続行します。
  5. 各製品（Cloud Firestore、FCMなど）の機能をモジュラースタイルにリファクタリングし、すべての領域が完了するまでコンパイルとテストを行います。
  6. 初期化コードをモジュラースタイルに更新します。
  7. 残りのすべてのバージョン9のcompatステートメントとcompatコードをアプリから削除します。

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

開始するには、npmを使用してバージョン9ライブラリとcompatライブラリを入手します。

npm i firebase@9.8.1

# OR

yarn add firebase@9.8.1

インポートを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では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りを実行します。認証APIとCloudFirestore APIへの呼び出しをリファクタリングする2つの例で、これがどのように機能するかを調べてみましょう。

例1：認証関数のリファクタリング

以前：バージョン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
});

例2：CloudFirestore関数のリファクタリング

以前：バージョン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関数は、最初のパラメーターとしてfirebaseAppを取ります。これは、前の例でinitializeAppから返されました。バージョン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());
});

DocumentSnapshot.existsへの参照を更新します

バージョン9では、プロパティfirestore.DocumentSnapshot.existsがメソッドに変更された重大な変更が導入されています。機能は基本的に同じです（ドキュメントが存在するかどうかをテストします）が、次のようにv9メソッドを使用するようにコードをリファクタリングする必要があります。

以前：バージョン9互換

if (snapshot.exists) {
  console.log("the document exists");
}

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

if (snapshot.exists()) {
  console.log("the document exists");
}

例3：バージョン8とバージョン9のコードスタイルを組み合わせる

アップグレード中にcompatライブラリを使用すると、バージョン9用にリファクタリングされたコードと一緒にバージョン8コードを引き続き使用できます。つまり、認証またはその他のFirebase SDKコードをバージョン9スタイルにリファクタリングしている間、CloudFirestoreの既存のバージョン8コードを保持できます。両方のコードスタイルでアプリを正常にコンパイルします。 CloudFirestoreなどの製品内のバージョン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()が互換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.*グローバル名前空間またはバージョン8SDKスタイルの他のコードへの参照が増えました。

ウィンドウからのcompatライブラリの使用

バージョン9SDKは、ブラウザーのwindowオブジェクトではなくモジュールで動作するように最適化されています。以前のバージョンのライブラリでは、 window.firebase名前空間を使用してFirebaseを読み込んで管理できました。これは、未使用のコードを削除できないため、今後はお勧めしません。ただし、JavaScript SDKの互換バージョンは、モジュラーアップグレードパスをすぐに開始したくない開発者向けのwindowで機能します。

<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

互換性ライブラリは、内部でモジュラーバージョン9コードを使用し、バージョン8SDKと同じAPIを提供します。つまり、詳細については、バージョン8のAPIリファレンスとバージョン8のコードスニペットを参照できます。この方法は、長期間の使用にはお勧めしませんが、完全にモジュール化されたバージョン9ライブラリへのアップグレードの開始としてお勧めします。

バージョン9の利点と制限

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

  • バージョン9では、アプリのサイズを大幅に削減できます。最新のJavaScriptモジュール形式を採用しているため、アプリに必要なアーティファクトのみをインポートする「ツリーシェイク」プラクティスが可能です。アプリによっては、バージョン9でツリーをシェイクすると、バージョン8を使用して構築された同等のアプリよりもキロバイトが80％少なくなる可能性があります。
  • バージョン9は継続的な機能開発の恩恵を受け続けますが、バージョン8は将来のある時点で凍結されます。