Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@sukezane

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

More than 1 year has passed since last update.

サクッと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)の部分を参照。 スクリーンショット 2020-02-01 13.51.02.jpg

参照処理(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(フィールドまで結構深い)
    スクリーンショット 2020-02-01 14.36.27.jpg

  • booksInfo(これは別に見せる必要ないけど一応)
    スクリーンショット 2020-02-01 14.38.27.jpg

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は直感的でわかりやすいと思った。

随時追記していきます。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sukezane
2019年より開始。 業界4年目。都内フリーランス1年生。Nuxt TypeScript golang twitter:https://twitter.com/yosuke_takeuchi

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?