t8.dev

🇺🇸

Firebase Firestore(v9)とVueでデータを操作する

公開日:2021/10/03
更新日:2021/10/05

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

FirebaseのSDKのバージョンが9に変わって実装方法が変わったので記事を書くことにしました。

構成

  • Firebase Authentication(v9)
  • Vue
  • Vuetify

Vuetifyを使ってない人でもscriptの部分を見てもらえればわかると思います。

Cloud Firestoreとは?

Cloud Firestoreは、一言で言うと「NoSQLのDBを簡単に作ることが出来るクラウドサービス」です。

Cloud FirestoreはFirebaseというクラウドサービス群の一つです。そして、Firebaseは現在Googleによって運営されています。

できる事

Firebaseのプロジェクト上にDBを作って管理していくことができます。

料金

  • 書き込み 20,000件/日
  • 読み込み 50,000件/日

まで無料で使うことができます。

料金プラン | Firebase

Vue.jsとは?

Vue.jsは一言で言うと、「フロントエンド(ブラウザ)で動く、javascriptのフレームワーク」です。

データ追加

<template>
  <div>
    <v-btn @click="addTask">
      add
    </v-btn>
  </div>
</template>

<script>
import { getFirestore, collection, addDoc } from 'firebase/firestore'

export default {
  data () {
    return {
      id: '001',
      name: 'test'
    }
  },
  methods: {
    addTask () {
      const db = getFirestore()
      const docRef = addDoc(collection(db, 'tasks'), {
        id: this.id,
        name: this.name
      })
      console.log('Document written with ID: ', docRef.id)
    }
  }
}
</script>

データ参照

<template>
  <div>
    <div
      v-for="(task, index) in tasks"
      :key="index"
    >
      {{ task.title }}
    </div>
  </div>
</template>

<script>
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import { getFirestore, collection, query, where, onSnapshot } from 'firebase/firestore'

export default {
  data () {
    return {
      tasks: [
        {
          id: null,
          title: null
        }
      ]
    }
  },
  mounted () {
    const auth = getAuth()

    // login状態が変更されたら
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const db = getFirestore()
        // loginしてたら
        const q = query(collection(db, 'tasks'), where('uid', '==', `${user.uid}`))
        onSnapshot(q, (snapshot) => {
          snapshot.docChanges().forEach((change) => {
            if (change.type === 'added') {
              console.log('added: ', change.doc.data())
              this.tasks.push({
                id: change.doc.id,
                title: change.doc.data().name
              })
            }
          })
        })

        this.tasks.splice(0, 1)
      }
    })
  }
}
</script>

VueでFirebase Authentication(v9)を使って認証機能を作るにはこちら。

関連記事

firebaseに入門して一年後の使い方
【Firebase】カスタムクレーム(Custom Claims)で管理者ユーザーを作る
Firebase Authentication(v9)とNextで認証機能を実装する
Firebase Authentication(v9)とNuxtで認証機能を実装する
Firebase Authentication(v9)とReactで認証機能を実装する
Firebase Authentication(v9)とVueで認証機能を実装する
Firestore Liteとは?
【hooks対応版】Firebase Firestore(v9)とNextでデータを操作する
Firebase Firestore(v9)とNuxtでデータを操作する
【hooks対応版】Firebase Firestore(v9)とReactでデータを操作する

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】