はじめに
自分のアプリで使用しているFirebase Javascript SDKをv7からv9へ移行しました。
前のバージョンのコードとの互換性問題により、変更箇所が多かったので備忘録としてまとめます。
内容はFirebaseの初期化処理とFirestoreがメインになります。
まずは小さく移行 （v8）
v9のFirebaseではCompatというライブラリのおかげで、一度にFirebaseのコードのすべてを変更することなく、互換性を保ったままバージョン9にアップグレードすることができます。
公式も段階的な移行をオススメしているので、まずはv8に移行しました。
https://firebase.google.com/docs/web/modular-upgrade
コードとしてはimport時のpathにcompatを加えるだけでOK
// v7
import firebase from 'firebase'
// v9(v8)
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
これだけでv9のfirebaseをインストールした状態でv7からv8への移行は完了です。
ただし、Compatではv9が提供するModularの恩恵を受けることができません。
Modular:
不要なコードを取り除いてくれる firebase v9のライブラリ。JavaScriptのコードのバンドルサイズを最大80%も削減してくれるらしい！？
初期化処理
ここからは完全にv9(modular方式)に移行していきます。
まずは初期化処理におけるv7とv9のコードの比較です。
// v7
import firebase from 'firebase'
const config = {
apiKey: process.env.FIREBASE_PROJECT_API_KEY,
projectId: process.env.FIREBASE_PROJECT_ID
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
// v9
import { getApps, getApp, initializeApp } from 'firebase/app'
const firebaseConfig = {
apiKey: process.env.FIREBASE_PROJECT_API_KEY,
projectId: process.env.FIREBASE_PROJECT_ID
}
const firebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp()
export default firebaseApp
initializeの書き方が若干変わっています。以前はfirebase.initializeApp()と書いていたところをinitializeApp自体をimportしてそのまま実行しています。
必要なものだけimportしているのもv9の特徴ですね。
データの読み取り
// v9
import { getFirestore, collection, query, orderBy, onSnapshot} from 'firebase/firestore'
import firebaseApp from '../plugins/firebase'
const db = getFirestore(firebaseApp)
const q = query(collection(db, 'info'), orderBy('createdAt', 'desc'))
onSnapshot(q, (snapshot) => {
snapshot.forEach((doc) => {
console.log(doc.data());
})
})
以前は下記のように、firebaseをまるまるimportした上でFirestoreのインスタンスを取得していました。
// v8
import firebase from 'firebase'
const db = firebase.firestore()
v9では特定のモジュールのみをimportすることで、ファイルサイズの削減や高速化に繋がるそうです。
ファイルサイズの削減はv9への移行が落ち着いたら確認してみます。
import { getFirestore, collection, query, orderBy, onSnapshot} from 'firebase/firestore'
データの追加
ユーザーが開発者に要望を送信できるフィードバック機能のコードを例に紹介します。（Vue.jsを使用しています）
// v9
import { getFirestore, collection, addDoc, serverTimestamp } from 'firebase/firestore'
import firebaseApp from '../plugins/firebase'
addFeedback() {
const db = getFirestore(firebaseApp)
addDoc(collection(db, 'feedback'), {
feedback: this.feedback,
created: serverTimestamp()
})
}
やはりgetFirestore()だけで既存のFirestoreインスタンスにアクセスできるのは良いですね。
あと個人的にはserverTimestampがアツいです。
以前の下記のようなコードがv9では短く書けるようになりました。
// v8
created: firebase.firestore.FieldValue.serverTimestamp()
おわりに
まだFirebase v9に少し触れた程度なので、型定義の導入やファイルサイズの削減に取り組んだりしてFirebaseをもっと楽しみたいと思います！
アプリ宣伝
最後にアプリの宣伝だけさせてください！
スマホアプリ「Fate/Grand Order」で使える計算アプリです。
今回はこのアプリで使用しているFirebaseのバージョンアップ対応を行いました。
FGOユーザーの方でしたら是非一度使ってみて欲しいです！
参考記事
v9への移行にあたってお世話になった記事です。
https://zenn.dev/hiro__dev/articles/605161cd5a7875
https://zenn.dev/mktu/articles/3905b13500ffb6#firestore
https://qiita.com/qrusadorz/items/166aa1948dca8bd046a0
https://ascii.jp/elem/000/004/075/4075900/