Firebase ver9をNuxt.jsで設定する方法

ホーム
フロントエンド
Firebase ver9をNuxt.jsで設定する方法

フロントエンド

2022.01.15

Firebase ver9をNuxt.jsで設定する方法

ウェブの業界は本当に変化が早いもので、

数ヶ月前は普通に使えたコードが、
バージョンアップしたら非推奨に変わったなんて事がよくあって。

久しぶりに『Firebase』を使ってみると
バージョンの違いでコードの書き方が代わり、
以前のコードが非推奨になっていたので、
備忘録がてら書き残しておくことにします。

アオキ

ちょっと目を離したらあっという間に変わっとりますね。。

記事執筆時のバージョン
– firebase ・・9.6.2
– Nuxt.js ・・ 2.15.7

Firebaseとは

『Firebase』は2011年にFirebase社が開発した、

『BaaS』や『mBaaS』と呼ばれるサービスの名称です。

BaaS・・Backend as a Service

サーバー側で必要な仕組みが予め用意されていて、

開発者としてはサーバー側のインフラ周りを気にしないで開発ができるという代物で、

『サーバーレス』なんて呼ばれたりもします。

2014年にGoogleが買収し、いろんな機能を拡張し、今日に至ります。

Firebaseの開発キット(SDK)

『Firebase』はウェブ向け、iPhone向け、Android向け、Unity向けと
それぞれ開発キット(SDK)を用意しています。

SDK・・Software development kit(ソフトウェア開発キット)

それぞれバージョンがあって、定期的にアップデートされていると。

今回ウェブ版を設定しようとした所、

2021年9月にリリースされたver9と、それ以前のver8で推奨コードの書き方が変わっていました。

今回は『Vue.js』のフレームワークである『Nuxt.js』で設定したので
その方法を簡単にまとめておきます。

Firebase ver9 インストール

インストール方法は簡単です。
バージョン指定しなければ最新版、”9.*”と指定すればver9の最新版がインストールされます。

npm install firebase@"9.*"

@nuxtjs/firebaseはしばらく使えなそう

『Nuxt.js』で『Firebase』を設定するための専用ライブラリとして、

『@nuxtjs/firebase』というものがあるのですが、

『@nuxtjs/firebase』の最新版( 8.2) をインストールしてみても、
『Firebase ver9』との依存関係でエラーがでてしまったので、

しばらくは『@nuxtjs/firebase』ではなく、素直に『Nuxt.js』の機能を使ってインストールする事にします。

Nuxt.jsにfirebase ver9をインストールする方法

『Nuxt.js』で設定するには『plugins』で取り込む方法が一般的なので、

pluginsフォルダを作成し、その中にfirebase.jsというファイルを作って、
その中に『firebase』を初期化(インスタンス化)するコードを書いておきます。

// plugins/firebase.js

import { initializeApp } from "firebase/app"

const firebaseConfig = {
  apiKey: "firebaseの管理画面よりコピペ",
  authDomain: "firebaseの管理画面よりコピペ",
  projectId: "firebaseの管理画面よりコピペ",
  storageBucket: "firebaseの管理画面よりコピペ",
  messagingSenderId: "firebaseの管理画面よりコピペ",
  appId: "firebaseの管理画面よりコピペ",
};

const firebaseApp = initializeApp(firebaseConfig);
export default (context, inject) => {
  inject('firebase', firebaseApp)
}

ver9ではimportで必要な機能(関数)だけをインポートする仕組みになっていて、
このコードではinitializeAppだけを使うということでインポートしています。

必要な機能だけをインポートすることで、軽量化、高速化を図っているようです。

『firebase』管理画面に記載されているコンフィグを書いて、
initializeApp()の引数にあてています。

『plugins』で設定した内容は『inject』を使うと
『pages』など他のファイルでも使うことができるようになります。

このコードだと、this.$firebase でインスタンス化された『firebase』を取得することができます。

『plugins/firebase.js』を作成後、

『Nuxt.js』の設定ファイルにあたる『nuxt.config.js』に追記します。

// nuxt.config.js

export default {
 // 略
 plugins : [ '@/plugins/firebase.js' ]
}

これでOKです。

『NoSQL』データベースである『Cloud Firestore』などを使う場合も、

『plugins』フォルダ内に書いてあげるか、

getFirestore()の引数に this.$firebase を渡してあげれば使えるようになります。

// pages/test.vue
<script>
import { getFirestore } from 'firebase/firestore' // Firestoreで使う機能をインポート


const db = getFirestore(this.$firebase) // pluginで設定した値を引数に設定する
// 略
</script>