Firebase入門 with Vue.js

FirebaseでTodoアプリを作ります。
Firebaseで使用する機能はRealtime Databaseで、タスクを保存します。

Webpackでプロジェクトを作成

vue-cliを使ってプロジェクトを作成します。

vue init webpack firebase-todo

必要であれば git init など初期化しておきます。

この時点で、 yarn dev を実行して、 http://localhost:8080 にアクセスすると作成したアプリを確認できるはずです。

Firebase追加

npmモジュールを追加します。

yarn add firebase

続いて、 https://firebase.google.com でプロジェクトを作成します。

作成時に表示される以下を、プロジェクトのmain.jsに追加して、Firebaseを初期化します。

import firebase from 'firebase'

var firebaseConfig = {
   apiKey: "XXX",
   authDomain: "XXX",
   databaseURL: "XXX",
   projectId: "XXX",
   storageBucket: "XXX",
   messagingSenderId: "XXX",
   appId: "XXX"
 };
 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);

FirebaseのメニューのサイドバーからRealtime Databaseを選択し、「データベースを作成」をします。

TODOアプリページを作成

App.vue に以下を以下で上書きします。

<template>
 <div id="app">
   <h2>TODOアプリ</h2>
   <div>
     <input type="text" v-model="newTaskName">
     <button type="submit" v-on:click="createTask()">タスク作成</button>
   </div>
   <div>
     <h3>フィルタ</h3>
     <input type="radio" name="filter-type" id="all" value="all" v-model="filterType"><label for="all">全て</label>
     <input type="radio" name="filter-type" id="active" value="active" v-model="filterType"><label for="active">未完了タスク</label>
     <input type="radio" name="filter-type" id="complete" value="complete" v-model="filterType"><label for="complete">完了タスク</label>
   </div>
   <div>
     <h3>タスクリスト</h3>
     <ul>
       <li v-for="key in filteredKeys" :key="key">
         <input class="toggle" type="checkbox" v-model="todos[key].complete" v-on:click="updateTask(key)">{{ todos[key].name }}
         <button type="submit" v-on:click="removeTask(key)">削除</button>
       </li>
     </ul>
   </div>
 </div>
</template>

<script>
import firebase from 'firebase'

export default {
 data () {
   return {
     database: null,
     todosRef: null,
     newTaskName: '',
     filterType: 'all',
     todos: null
   }
 },
 created: function() {
   this.database = firebase.database();
   this.todosRef = this.database.ref('todos');
   this.todosRef.on('value', snapshot => {
     // データに変化が起きたときに再取得する
     this.todos = snapshot.val() 
   })
 },
 computed: {
   filteredKeys: function () {
     console.log(this.todos)
     if (!this.todos) return []
     const keys = Object.keys(this.todos)
     switch (this.filterType) {
       case 'complete':
         return Object.keys(this.todos).filter( key => this.todos[key].complete == true)
       case 'active':
         return Object.keys(this.todos).filter( key => this.todos[key].complete == false)
       default: // all
         return Object.keys(this.todos)
     }
   }
 },
 methods: {
   createTask: function() {
     if (this.newTaskName) this.todosRef.push({ name: this.newTaskName, complete: false })
     this.newTaskName = ""
   },
   updateTask: function (key) {
     const todo = this.todos[key]
     todo.complete = !todo.complete
     this.database.ref().update({ [`/todo/${key}`]: todo })
   },
   removeTask: function (key) {
     this.database.ref('todos').child(key).remove()
   }
 }
}
</script>

参考

・Vue.js + FirebaseでTodoアプリを作る
・Vue.js で ToDo アプリを作る (Firebase Realtime Database 編)