【Firebase】v8とv9の書き方の違い

どうも。みずかず(@mizukazu_1)です。

少し前に新規でFirebaseプロジェクトを作成したらJavaScriptSDKのバージョンが8から9に変わっていて
それに伴って書き方も変わったので困惑するということがありました。

今はFirebaseを使っておらず今後ももうしばらく触る予定が無いので忘れないようにざっくりまとめておこうと思います。

v8での書き方

認証機能を実装できるFirebase Authを例にしてみます。

v8では以下のような書き方でした。

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseApp = firebase.initializeApp({});
const auth = firebaseApp.auth();
auth.onAuthStateChanged(user => {});

Authの部分を丸々importしています。
これだと使わないものまでimportすることになるので若干無駄です。

v9での書き方

v9では以下のような書き方をします。

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const firebaseApp = initializeApp({});
const auth = getAuth();
onAuthStateChanged(auth, user => {});

firebase/authからimportするのはv8と一緒なのですが、v9では使いたいものだけをimportします。
ここでいうとinitializeApp 、getAuth、onAuthStateChanged の3つですね。

この書き方はauthだけでなくfirestoreやstorage等の他のサービスでも同じです。
get<サービス名>になるだけなので覚えやすいかと思います。

2つバージョンの違いを簡単にまとめる

上で書いたことと少し被りますが、v8は全部まとめてimportをします。
逆にv9では使いたいメソッド等を個別にimportします。

効率の面でいってもv9の方式の方がなんとなく良さそうだなと思いますよね。

実際にファイルサイズで言ってもv8よりv9の方が断然小さいみたいです。

注意点

厄介な点がありましてv8とv9には互換性がありません。

なので元々v8で開発していたものをv9にバージョンアップするとあちこちでエラーが発生します。

くれぐれもいきなりv8からv9へのアップデートはやめておいた方が良いです、、、

また、npm installするとデフォルトでインストールされるのはv9のようです。

Compatライブラリについて

一応救済措置としてcompatという公式が出している互換用ライブラリがあります。

これを使用する事でv9でv8の書き方が出来ます。

例を以下に書いておきます。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import { onAuthStateChanged } from 'firebase/auth';

const firebaseApp = firebase.initializeApp({});
const auth = firebaseApp.auth();
onAuthStateChanged(auth, user => {});

この部分に注目です。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

firebaseとapp、authの間にcompatを入れます。

こうすることでv8の書き方が使えるようになります。

最後に

やっぱり破壊的なアップデートは少し戸惑いますね、、、

事前に情報を集めていて知っていた場合ならいいんですがいきなりだとびっくりします。

今回はとりあえずざーっと走り書きしてしまったので説明が足りない点等があると思うので
今後少しずつ追記していこうと思います。

参考にしたサイト

これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース
React+Typescript+Firebase v9