Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

このガイドでは、バージョン8に精通していると、次のようなモジュールバンドラを利用することを前提としていることのWebPACKまたはロールアップのアップグレードや継続的なバージョン9の開発のために。

開発環境でモジュールバンドラーを使用することを強くお勧めします。使用しない場合、アプリのサイズを縮小するというバージョン9の主なメリットを活用できません。あなたは必要がありますNPMや糸をSDKをインストールします。

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

compatライブラリについて

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

  • モジュラ-ツリー揺れ（未使用コードの除去）を促進するために設計された新しいAPIの表面には、小型で高速な可能な限りあなたのWebアプリを作るために。
  • COMPAT -あなたが一度にあなたのFirebaseコードのすべてを変更することなく、バージョン9にアップグレードすることができ、バージョン8 SDKと完全な互換性がありおなじみのAPI表面。 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の互換性ステートメントと互換性コードをアプリから削除します。

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

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

npm i firebase@9.1.3

# OR

yarn add firebase@9.1.3

インポートを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では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りを実行します。 AuthenticationAPIと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関数から連鎖されていないauthがバージョン8であろうようにインスタンス。その代わり、それはとりフリー機能です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());
});

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

アップグレード中にcompatライブラリを使用すると、バージョン9用にリファクタリングされたコードと一緒にバージョン8コードを引き続き使用できます。つまり、認証またはその他のFirebase SDKコードをバージョン9スタイルにリファクタリングしている間、CloudFirestoreの既存のバージョン8コードを保持できます。両方のコードスタイルでアプリを正常にコンパイルします。同じことが、クラウド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の両方のためのグローバル状態を初期化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スタイルで他のコード。

ウィンドウからcompatライブラリを使用する

バージョン9 SDKは、モジュールとの仕事ではなく、ブラウザのに最適化されたwindowオブジェクト。ライブラリの以前のバージョンでは、使用してFirebaseのロードと管理を許可window.firebase名前空間を。これは、未使用のコードを削除できないため、今後はお勧めしません。しかし、JavaScriptのSDKのcompatのバージョンでは、との仕事をしてwindowのすぐモジュラーアップグレードパスを開始しないことを好む開発者のため。

<script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.3/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.3/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は将来のある時点で凍結されます。