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