Nuxtでfirestore触ったときの備忘録

サクッとfirebaseを触ってみたい！！

前提とこの記事の書き方

• 画面はNuxt.jsで書いているがこの記事のメインはfirebase
• firebaseのプランはSpark
• プロジェクトのセットアップ等は公式などを見てやる

まずはプラグインを作成しfirebaseへアクセスできるようにする。

• これで使う場所（action）でプラグインをimportしてfireApp.firestore()とするとfirestoreへアクセスできるようになる
• 秘匿情報が含まれているためdotenvとかで設定ファイルより参照するようにする。
• 参考：Nuxt.jsで.envファイルを扱う@nuxtjs/dotenv

plugins/firebase.ts

import * as firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
// eslint-disable-next-line
let fireApp
if (!firebase.apps.length) {
  fireApp = firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  })
} else {
  fireApp = firebase.app()
}

export default fireApp

基本的にfirebaseへのアクセスはstore/機能/action.tsにしか書かない認識

登録処理（add）

• 例）書籍情報を登録する
• collection('コレクション名').add(オブジェクト)で追加できる

action.ts

import fireApp from '~/plugins/firebase'
// ↑これでfireApp.firestore()とすることでfirestoreへアクセスが可能になる

/* 登録 */
  async add({ commit }, addFilter: AddFilter) {
    const db = fireApp.firestore()
    // 書籍を登録
    const booksRef = db.collection('books')
    await booksRef.add({
      title: addFilter.title,
      author: addFilter.author,
      isRental: addFilter.isRental,
      genre: addFilter.genre
    })
    // 登録処理なので状態管理は必要ないという思いからcommitは不要？？だと思う。
  }

• 無事に追加されると以下のようになる（IDはなんとなくマスクしている）
• 今回はフィールドにIDがないけど、なんだかんだでドキュメントにIDがあったほうが処理がラクだと思った。理由は後述する参照(show)の部分を参照。

参照処理（show）

• 一覧情報の取得などでコレクションの情報を一括で取得したいときなど
• collection('books').get()でコレクション内全ての情報を取得できる。
• forEachの部分でそれぞれの図書情報を配列に格納してstore用のデータを作成しcommitしている。ドキュメントIDとフィールド（データの中身）はレイヤーが違うのでフィールドにもIDを付与した方が処理がラクになるかなーと思った。
• フィールドはdata()メソッドで取得する

action.ts

/* 一覧表示 */
  async show({ commit }) {
    const db = fireApp.firestore()
    const books = []
    // 書籍データを取得
    const querySnapshot = await db.collection('books').get()

    // 書籍データをfetch
    querySnapshot.forEach((doc) => {
      books.push({
        id: doc.id, // ドキュメントID
        ...doc.data()
      })
    })
    // storeのデータを作成
    const booksInfo = []
    for (let i = 0; i < books.length; i++) {
      const bookInfo = books[i]
      booksInfo.push(bookInfo)
    }
    commit('describe', { defaultInfo: booksInfo })
  }

• firebaseから取れたてのデータquerySnapshotとstore用に詰め直したbooksInfoをそれぞれコンソールへ出力した結果がコチラ

• querySnapshot（フィールドまで結構深い）
  

• booksInfo（これは別に見せる必要ないけど一応）
  

1件取得処理（detail)

• ドキュメントIDを指定してcollection('books').doc(bookId).get()とすれば取得できる

action.ts

async detail({ commit }, bookId) {
    const db = fireApp.firestore()
    // クエスチョン1件にアクセス
    const book = await db
      .collection('books')
      .doc(bookId)
      .get()
    commit('book', { book })
  }

貸し出し処理（rental)：〜他のテーブルとの結合〜

• 例）登録処理（add）を応用し図書を貸りる処理をするときにusersテーブルからユーザーの情報を登録する必要がある
• その場合パラメータにユーザIDを追加してuserRefというusersコレクションへの参照を追加で登録する
• これでユーザ情報を紐付けることができる

action.ts

/* レンタル処理 */
  async rental({ commit }, rentalFilter: rentalFilter) {
    const db = fireApp.firestore()
    // 書籍情報とユーザ情報を登録
    const booksRef = db.collection('books')
    await booksRef.add({
      title: rentalFilter.title,
      author: rentalFilter.author,
      isRental: rentalFilter.isRental,
      genre: rentalFilter.genre,
      userRef: db.collection("users").doc(rentalFilter.userId)
    })
    // 状態管理は必要ないという思いからcommitは不要？？だと思う。
  }

これだけである程度の処理ができると思う。

• 複雑な結合はやっぱりRDBMSの方がいいだろうけどNoSQLは直感的でわかりやすいと思った。

随時追記していきます。