Firebase RealtimeDatabaseを触ってみた

f:id:yoshitaku_jp:20181128144942p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の14日目の記事です。

tl;dr

  • Firebase RealtimeDatabaseを触ってみた
  • データの挿入と削除をやってみた

準備

  • ディレクトリの構成
  • Todo.vueのソース
  • router/index.jsのソース

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Todo.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

yoshitaku$ tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

Todo.vueのソースコード

<template>
    <div class="todo">
        <h1>タスクの一覧</h1>
        <div>
            <input type="text" v-model="newTodoName">
            <button type="submit" v-on:click="createTodo()">タスクの作成</button>
        </div>
        <ul v-for="(todo, key) in todos" :key="todo.id" >
            <li>
              <input class="toggle" type="checkbox" v-model="todo.isComplete">{{ todo.name }}
              <button type="submit" v-on:click="deleteTodo(key)">タスクの削除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Todo',
  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },
  data () {
    return {
      database: null,
      todoRef: null,
      newTodoName: '',
      showTodoType: 'all',
      todos: []
    }
  },
  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }
}

</script>

<style scoped>
ul {
  list-style: none;
}
</style>

Firebase RealtimeDatabaseとの接続

個別に見ていきます。createdでインスタンスを作成したときに、データベースへ接続し保存されているデータを取得してきます。 this.todoRef = this.database.ref('todos')にFirebase Consoleで定義した名前を設定します。(Firebase RealtimeDatabaseの設定の項で再度説明)

  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },

Todoの作成と削除

methodsにcreateTododeleteTodoを設定しています。 createTodoは画面上のテキストボックスnewTodoNameに入力された値を引数に、todoRefにpushしています。終わったら、テキストボックスnewTodoNameを空欄でクリアしています。deleteTodoはkeyを引数にremoveしています。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

router/index.jsのソース

これは、Todo.vueとURLを紐づけています

import Vue from 'vue'
import Router from 'vue-router'
import Todo from '@/components/Todo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
})

Firebase RealtimeDatabaseの設定

データベースのルールタブを開きます。画像内のtodos".read": "true"".write": "true"と追加します。

todosの名前は好きな名称で大丈夫ですが「Firebase RealtimeDatabaseとの接続」で指摘したように、接続の際に指定するのでそこだけは一致させるようにしてください。

f:id:yoshitaku_jp:20181213150811p:plain

デモ

デモ1

f:id:yoshitaku_jp:20181213173434g:plain

デモ2

f:id:yoshitaku_jp:20181213173928g:plain

まとめ

  • リアルタイムで変化していくのをみるのは業務上ないので新鮮だった。
  • 今後のアプリ作成に生かしていきたい

他のFirebase系

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com