Nuxt.js × Firebase(Realtime Database) のDBやりとり

Nuxt.jsを業務で使用しているが、自分で環境構築して設計とか考えながら1からアプリ作ってみたいな〜と思い、Nuxt.js×Firebaseでアプリを作成した。ただ、Realtime Databaseとのやり取りについて調べてみると、Web　9　versionの記事が中々なく、かなり苦戦した。
なので、同じようなポイントで苦戦している方向けにWeb版のRealtime Databaseのやり取りに焦点を当てて、記事を書いていこうと思う。

何を作ったか

はじめてFirebaseを使うので、できるだけハードルの低いものを作成しようと考え、最低限のCRUD処理を搭載したカロリー記録アプリを作った。(在宅ワーク環境で最近太り気味というのは全く関係ない)

こちらのアプリでは、食べ物の登録・編集・削除ができる。また、右上のセレクトボックスにて日付でソートできるようになっている。打倒あすけんを目指して改良していきたい。

DB構成

Firebase上のDBは2種類あるが、今回はとっつきやすそうなRealtime Datebaseを使ってアプリを作ってみた。そして具体的なRealtime Databaseの構造は以下のようになっている。

構造としては、はじめにcaloriesという大枠があり、その階層下にユニークキーをぶら下げ、そのユニークキーの階層化にデータを格納している。いわば、ユニークキーにデータの仕切り的な役割を担わせている。
実際の登録処理において、どのようにユニークキー生成するか検討がつかないかもしれないが、Firebaseにはユニークキーごとデータを作成するメソッドが用意されている。
また、仕切りの役割を担っていたユニークキーをデータの方でidとして持たせている。これは、詳細取得・削除・更新時にユニークキーが必要になってくるからである。（ベストプラクティスかどうかは分からない）

DBとのやり取り

本題であるCRUD処理にて、具体的にどのようにDBのやり取りを行なっているか各処理ごとに見ていこうと思う。

一覧データ取得

  async fetchCalories(date: string) {
    const db = getDatabase();
    const que = query(ref(db, `calories`), orderByChild("date"), equalTo(date))
    const response = await get(que)
    const result: CaloryParams[] = []

    if (response.val()) {
      Object.keys(response.val()).forEach((key) => {
        result.push(response.val()[key])
      })
    }
    return result
  }

解説していくと、まずはgetDatabaseメソッドを使用してDBを参照する。その後、queryクラスを用いて、指定した日付でデータのフィルタリングを行なう。次に、getメソッドを使用してデータを取得する。getメソッドで習得したデータはsnapshotデータとして取得しているので、response.val()と表現することで実質の値を参照することができる。最後に、取得した値が存在する場合は、foreachなどを用いて、データのみを取り出してresult配列に追加する。(この最後の部分、どうにかならないのか‥)

詳細データ取得

  async fetchCalory(id: string) {
    const dbRef = ref(getDatabase());
    const response = await get(child(dbRef, `calories/${id}`))
    return response.val()
  }

詳細データ取得については、一覧データ取得と大まかな流れについては変わらない。ただ、一覧データ取得と違う点はchildメソッドを用いて、詳細データに直接アクセスしている点である。

新規データ登録

  async createCalory(params: CaloryParams) {
    const db = getDatabase();
    const key = push(ref(db, 'calories')).key;
    params.id = key!
    const response = set((ref(db, `calories/${key}`)), { ...params })
    return response
  }

新規データ登録については、まずはgetDatabaseメソッドを使用してDBを参照する。そして、push().keyを用いることによって、ユニークキーを取得する。次に、idにユニークキーを代入することでデータとして持たせるようにする。最後に、setメソッドを用いて、データの書き込みを行う。

データ更新

  async updateCalory(params: CaloryParams) {
    const db = getDatabase();
    const updates: updateParams = {};
    updates[`/calories/${params.id}`] = params;
    const response = update(ref(db), updates)
    return response
  }

データ更新については、まずはgetDatabaseメソッドを使用してDBを参照する。そして、更新先のパスをプロパティ名、更新データを値として持たせたオブジェクトを作成する。その後updateメソッドを用いて、データの更新を行う。

データ削除

  async deleteCalory(id: string) {
    const db = getDatabase();
    const response = await remove((ref(db, `calories/${id}`)))
    return response
  }

データ削除については、まずはgetDatabaseメソッドを使用してDBを参照する。そして、removeメソッドを用いて、データの削除を行う。