Nuxt + Firebaseで開発しつつFirebase依存は避けたいという話

サービスのプロトタイプを高速で開発したいという動機があり、最近はNoCodeもだいぶ使えるようになってきたらしいとはいえ、ソフトウェアエンジニアとしてはやっぱりコード書きたいよね、ということでどんな技術スタックがいいか模索中。

昔Vue書いてたしNuxtいいって聞くし、でもってサーバサイドは軽くしたいからFirbaseかな、とNuxt + Firebaseでやってみることに。

ここで一番の問題はサーバサイド、DB、インフラが完全にFirebaseに依存すること。もちろんマーケットフィットする前の初期のプロダクトにおいてロックインを許容してスピートを優先することは必ずしも悪いことではない。とはいえ後でサーバサイド変更できるよう、Firebaseとはできるだけ疎結合しておきたいよね。ということでいろいろ調べつつ考えたのである。

と前置きが長くなったけど、具体的にはRepositoryパターンを採用してFirebase操作はそっちに押し込む、でもってRepositoryはDIして使うことで簡単に差し替え可能にしましょうという、それだけ。

/repositories/profileRepository.js

class ProfileRepository {
  constructor (firebase) {
    this.firebase = firebase
  }

  async resolve (uid) {
    ...
  }
}

export default ProfileRepository

/repositories/index.js

import ProfileRepository from './profileRepository'

class Repositories {
  constructor (provider) {
    this.profileRepository = new ProfileRepository(provider)
  }
}

export default Repositories

こんな風に、レポジトリとエントリーポイントを作っておく。

そしてpluginでinjectしてDIすればOK

/plugins/repositories.js

import firebase from './firebase'
import Repositories from '~/repositories'

const repositories = new Repositories(firebase)

export default ({ app }, inject) => {
  inject('repositories', repositories)
}

使う側ではこんな感じ

export default {
  async asyncData ({ app }) {
    const uid = ...
    const profile = app.$repositories.profileRepository.resolve(uid)
    ...
  }
}

本当はRepositoryは抽象クラス作って継承させてとかいろいろあるけど、基本線はこんな感じで、とりあえずやってみる