[Nuxt]Firebase Realtime Databaseを使った基本的なCRUD

先日、「ともだちびお」というサービスをリリースしました。

そこでは、Firebase Realtime Databaseを使いました。Firestoreでもよかったのですが、学習コストが高そうだったので、まずはRealtime Databaseから入ろうと思いました。

今回はRealtime Databaseを使ったCreate(投稿)・Read(読み取り)・Update(更新)・Delete(削除)をやってみたいと思います。

Firebaseの設定

FirebaseのツールをNuxtで使えるようにする設定は前回をご覧ください。

Firebase Consoleに行き、DatabaseのところをFirestoreではなくRealtime Databaseを選択してください。

Create

まずは投稿できるようにしましょう!

例として名前を登録するフォームを作ってみます。(Buefy使っているので読み替えてください)

<b-field label="名前">
  <b-input
    placeholder="名前を入力してね!"
    v-model="formData.nickname"
    required/>
</b-field>
<button @click="post()">投稿</button>

それではデータをFirebaseに保存してみます。

import firebase from '@/plugins/firebase'

export default {
  data() {
    return {
      formData: {
        nickname: ''
      }
    }
  },
  methods: {
    post: function() {
      if (this.formData.nickname.length) {
        var newPostKey = firebase.database().ref().child('posts').push().key;
        firebase
          .database()
          .ref('posts/' + this.user.uid + '/' + newPostKey)
          .set({
            nickname: this.formData.nickname
          })
      } else {
        this.$toast.open({
          message: '名前は必ず入力してね!',
          position: 'is-bottom',
          type: 'is-danger'
        })
      }
    }
  }
}

名前がないときは保存できないようにしています。

おお、簡単!!

Read

次は読み取ってみましょう。

まずはFirebaseにアクセス!

firebase.database().ref('posts/' + this.user.uid).on('value', function(snapshot) {
   this.posts = snapshot.val()
})

これでもしpostsに変更があればリアルタイムに更新してくれます。

<li v-for="(post, key) in posts" :key="key">
  <h4 class="is-4">{{ post.nickname }}</h4>
</li>

Update

これも簡単!

v-modelでフォームを更新できるようだけ!

<b-field>
  <b-input placeholder="名前を入力してね" v-model="post.nickname"/>
</b-field>

そしてボタンを押したら更新できるようにする。

var newPost = {
   nickname: post.nickname
   // 省略
}
var updates = {}
updates['/posts/' + this.user.uid + '/' + key] = newPost
firebase.database().ref().update(updates)

Delete

最後に削除機能を実装してみる。

firebase.database().ref('posts/' + this.user.uid + '/' + key).remove();

これだけでできちゃいます。

まとめ

お手軽すぎるので、ぜひFirebase使ってください!