Firebase Version8とversion9のコードの違い

#対象者
・これからFirebaseを始めるすべての人
・2021年8月25日（firebase v9.0.0リリース）より前に作られた参考書等を使っている人
※この記事は2021年11月22日に書いたものです

#この記事を書いた経緯
さっそく余談ですが、この記事を書いた経緯を簡単に紹介します。

先月、プログラミング初心者としてVueを学習するにあたり、出来るだけ新しく出版された参考書がいいと思い、2020年12月出版の参考書を購入しました。

しかし、Firebaseの章において手順通りインストール等しても、コードが全く異なっていました。
調べてもほとんど情報が無かったのですが、結果的にはドキュメントを読めば即解決。業界的に技術のサイクルが早いのはわかっていましたが、ここまでとは驚きました（笑）

ということで、私のような初心者の方が、余計な学習時間を使わなくて済むよう今回記事にしました。

#Version8とVersion9の違い

今回のバージョンアップによる新旧の違いは、超ざっくり言うと以下です。
v8⇒Firebaseの機能をまとめて使用可能にする
v9⇒Firebaseの機能を必要な部分だけインポートして使う

つまりメリットはコードが最小限になることで**”読み込みが速くなる”**ということ

#互換性について
機能やオプションは非常に似ています完全な互換性はありません。そのためバージョンアップにはコードの修正が必要になります。

しかし、v8とv9のコードを共存させることは可能です。
※今回はコードの共存については触れてないため、これについては公式ドキュメント等ご参照ください。

#コードの違い
記事の最後に公式ドキュメントのリンクを記載しますが、v8とv9のコードは、引用すると以下のような違いになっています。

まずは、v8です。

//v8
var config = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
 storageBucket: "bucket.appspot.com"
  };
firebase.initializeApp(config);
var database = firebase.database();

続いてv9です。

//v9
import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com"
};

const app = initializeApp(firebaseConfig);

const database = getDatabase(app);

データの読み書きする場合のコード例は以下です。

まずは、v8です。

//v8
function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

続いてv9です。

//v9
import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

コードの違いについては以上です。

#参考したサイトなど
Firebase Documentation-スタートガイド
Firebase Documentation-データの読み取りと書き込み
これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース