Firebase v9で書き方が変わった！
久々に Firebase の話題です。Firebase の最新バージョンは少し前から v9.x になっています。実は v9 から大きな変更が入っています。v8 までは、Name space をベースにしたインターフェースでしたが、v9 からはモジュールベースに変更されています。以前のコードは基本的に、そのままでは、v9 では使えません。この記事では Firebase の v9 の概要について紹介します。
v ９以前の Firebase の問題点
Firebase は、Web アプリや Web サービスで必要になる事の多い、バックエンドのサービスを提供する仕組みの一つです。Firebase を利用すると、自分でバックエンドのサービスを開発しなくても、データベースやオンラインストレージなどの利用が可能になるので手軽に本格的なアプリを開発できるという点で便利な物でした。
従来の Firebase のパッケージは、サイズが大きく読み込みに時間がかかるという欠点がありました。と言っても、殆どの場合は、問題という程顕著な問題ではありませんでした。ただ、一部でそうした欠点を指摘されていたこともあって、v9 からはモジュール形式の実装に変更されています。
変わった点は、モジュール形式に変更された点で、必要なモジュールを必要な場所で読み込む方法に変わりました。これによって、読み込みに必要な時間が短縮され、読み込むサイズも最適化されました。ようは必要でないパッケージは読み込まなくても良くなりました。
以前のスタイルで開発したコードは？
基本的に、Firebase の v9 ベースのコードと、v8 ベースのコードの互換性はありません。 したがって、v8 で開発したコードを、v9 の実行環境で利用するには基本的にはコードの変更が必要です。 あるいは、パッケージ管理アプリの npm などを利用している場合には、バージョンを指定して、v8 の実行環境に固定する必要があります。
しかし、Google は v8 から v ９への移行がスムーズに行えるように「compat」ライブラリが用意されています。 これを利用すれば、当面は従来のコードも v9 の環境で利用できますし、段階的な移行も可能になります。 ただし、このライブラリは短期的な措置で、Firebase のドキュメントを見ると、将来的（v10 や v11 などがリリースするようなタイミング）でサポートが打ち切られる可能性が書かれています。
v9 の利用するには？
新規に、プロジェクトを作成して Firebase のモジュールをインストールする場合には、自動的に最新版の v9.x.x がインストールされます。しかし、既存のプロジェクトの場合は、基本的に「package.json」に書かれているバージョンがインストールされます。意図的に v9.x.x をインストールしたい場合には、バージョンを指定してインストールします。
$ npm install firebase＠9.4.0
の様に指定します。
その上で、Firebase のモジュールのインポートの部分を変更します。
// Version 8.x or earlier
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// Version 9 compat
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
のようにすれば、従来の v8.x 向けに開発したコードがそのまま使えます。
上記の変更方法も、Google のFirebase のドキュメントに詳しく解説されています。
コード自体を v9.x 対応に書き換える場合も同じように解説されています。
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, (user) => {
// ユーザーの状態を確認
});
// 従来コード（v8以前）
// import firebase from 'firebase/compat/app';
// import 'firebase/compat/auth';
// firebase.auth().onAuthStateChanged(user => {
// ユーザーの状態を確認
//});
従来は、firebase.auth().onAuthStateChanged()の様にネームスペースで指定されていた記述が、シンプルな関数で呼び出すように変わっています。
Firebase の初期化の方法もモジュール化されています
Firebase の初期化に利用する関数（initalizeApp）も、必要なモジュール（関数）をインポートして行うように変更されています。
// Version 9.x
import { initializeApp } from "firebase/app";
export const firebaseApp = initailizeApp({
/* configuration */
apiKey: "XXXSyCOGVDxxxxKGSJ1TDvxxxx-xxxx-xxxx",
authDomain: "test-xxxxx.firebaseapp.com",
databaseURL: " h t t p s://test-xxxxx.firebaseio.com",
projectId: "test-xxxxx",
storageBucket: "test-xxxxx.appspot.com",
messagingSenderId: "xxxx050xxxxx",
appId: "1:xxxx0508xxxx:web:xxxx677c60c5484d00xxxx",
measurementId: "G-XXXXXX",
});
// Version 8.x or before
/*
import firebase from 'firebase/compat/app';
firebase.initailizeApp({
// configuration
apiKey: "XXXSyCOGVDxxxxKGSJ1TDvxxxx-xxxx-xxxx",
authDomain: "test-xxxxx.firebaseapp.com",
databaseURL: "h t t p s://test-xxxxx.firebaseio.com",
projectId: "test-xxxxx",
storageBucket: "test-xxxxx.appspot.com",
messagingSenderId: "xxxx050xxxxx",
appId: "1:xxxx0508xxxx:web:xxxx677c60c5484d00xxxx",
measurementId: "G-XXXXXX"
});
export firebase;
*/
コードを見ればお分かりかと思いますが、従来の記述方法では、「firebase」の中の全てのモジュールをインポートする必要がありましたが、新しい方法では、必要なモジュール、上の例では、「initializeApp」のみをインポートすれば良いので、インポートするサイズとインポートに必要な時間が短縮されます。
従来方式では、「firebase」を実際に Firebase の機能を使うモジュールと共有するために、初期化したモジュールからエキスポートしていましたが、新しい方法の場合には、初期化した Firebase App のオブジェクト（firebaseApp）をエキスポートして共有します。
まとめ
Firebase は v8.x から v9.x で大きな仕様の変更がありました。 v9.x からはモジュールベースに変更されて、Firebase で利用する機能のみをインポートすれば良くなったので使いやすくなりました。 当面は、「compat」ライブラリを利用すれば従来の記述のコードもサポートできましたが、長期的には新しい書き方に移行した方が、性能面やメモリの使用容量などの点で有利です。
v9.x は 2021 年の夏にリリースされて、機能も十分に安定しています。 新規の開発だけではなく、従来開発したコードも計画的に移行することをお勧めします！
