この記事は、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にcreateTodoとdeleteTodoを設定しています。
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のソース
これは、
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との接続」で指摘したように、接続の際に指定するのでそこだけは一致させるようにしてください。
デモ
デモ1
デモ2
まとめ
- リアルタイムで変化していくのをみるのは業務上ないので新鮮だった。
- 今後のアプリ作成に生かしていきたい
