2024年08月07日 更新

v8以前のFirebaseコードをv9以降で使い回す方法

どうも、クラゲジュニアです。

Javascript/TypeScript向けのFirebase SDKがv8からv9にアップデートされた際に、メソッドの呼び出し方式のデフォルトが名前空間方式からモジュラー方式に変更されました。

https://firebase.google.com/docs/web/modular-upgrade?hl=ja

それに伴い下記のようなコードの書き換えが必要になりました。

• v8以前（名前空間方式）

  
  import firebase from "firebase/app";
  import "firebase/firestore";

db.collection("collectionName").doc("documentId").get()

- v9以降（モジュラー方式）
```javascript
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore';

const docRef = doc(db, "collectionName", "documentId");
getDoc(docRef)

愚直に上記のような書き換えを実施していく場合、非常に面倒な作業になります。

今回は、名前空間方式を維持しつつv9以降でも使えるようにしてみます。

方法

以下のようにfirebase/の後にcompat/を書き加えます。

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

また、CDNを使う場合には下記のように書きます。.jsの前に-compatが入ります。

  <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-firestore-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-auth-compat.js"></script>

以上です。