2018.10.07 webデザイン

Vue.js + FirebaseでToDoアプリを構築

firebase 勉強会

この記事ではvue.jsとfirebaseを使って認証機能の実装とrealtime databaseを使ったtodoアプリの実装方法を解説します。

firebase

firebaseはBaaSと呼ばているサービスでフロントエンドコードのホスティングやDBなど
本来であれば自前で構築が必要なサーバサイドの機能を簡単に利用するためのサービスです。
webアプリケーションに限らずスマートフォンアプリでも利用することができます。
主なサービスは以下のようになっています。

  1. リアルタイムデータベースリアルタイムで同期可能なデータストア
  2. Firebaseクラウドメッセージングpush通知
  3. FirebaseAuth ログイン機能。メールアドレスとパスワードを利用する基本的なものからFacebook, GitHub, Twitter, Googleといったサービスのソーシャルログイン機能をかんたんに利用できます。
  4. Firebaseストレージ オンラインストレージ。アプリ内から利用する画像や動画などを保存しておくことができます。
  5. ホスティング 静的Webのホスティング。CDNとHTTPSが含まれる。SPAを作る場合ならFirebaseだけで完結する。
  6. AdWords ターゲティング広告。
  7. AdMob アプリ内広告。
    などなど

vueプロジェクトの作成

vue-cliのインストール

vue-cliでvueのプロジェクトを簡単に行えるようになります。
npmかyarnを使ってインストールする

> npm install -g @vue/cli
# OR
> yarn global add @vue/cli

3.X系がインストールされていることを確認する

> vue --version
3.0.1

vue-cli uiモードでプロジェクトを作成

vue-cliをuiモードで立ち上げる

> vue ui
uiモードを使うことでブラウザ上でGUIを使ってvueプロジェクトの作成や開発用サーバの立ち上げ、ビルドなどを行えます。

http://localhost:8000
にアクセス

プロジェクトを作成したいディレクトリを選択して
「ここに新しいプロジェクトを作成する」
をクリックし次にすすむ

プロジェクトフォルダの名前を入力して次に進む

ここでは「デフォルトプリセット」を選択し、「プロジェクトを作成する」をクリックしてプロジェクトを作成する。

依存パッケージのインストール

vue-cliのuiモードを使うと依存パッケージのインストールもブラウザ上のguiインタフェースで行うことができます。

今回はvue上でページ遷移を行うための「Vue Routor」とfirebaseの機能を使うために「firebase」パッケージのインストールを行います。

依存 > 依存をインストールを選択

Vue Routerを追加

firebaseをインストールする

ブラウザでの確認

開発途中のアプリケーションをブラウザで確認するには
タスク > serve > タスクの実行をクリックします。

http://localhost:8080にアクセスするとvueのアプリケーションが表示されます。

vue-routerによるページ遷移

アプリのメインとなるページを作成(新規作成)
vue-todo/src/components/Task.vue

<template>
  <div id="task">
      タスクページ
  </div>
</template>

<style>
</style>

サインイン用ページを作成(新規作成)
vue-todo/src/componets/Signin.vue

<template>
  <div id="signin">
    サインイン
  </div>
</template>

<style>
</style>

サインアップ用ページを作成(新規作成)
vue-todo/src/componets/Signup.vue

<template>
  <div id="Singup">
    サインアップ
  </div>
</template>

<style>
</style>

vue-routerの設定を行うrouter.jsを新規に作成する

vue-todo/src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Task from '@/components/Task.vue'
import Signup from '@/components/Signup'
import Signin from '@/components/Signin'

Vue.use(Router)

let router =  new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'task',
      component: Task,
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup,
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})


export default router

main.jsの編集

vue-todo/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vueの編集

vue-todo/src/App.vue

<template>
  <div id="app">
    <h1>タスク管理アプリ</h1>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

確認

以下のURLにアクセスしてpathによって表示が切り替われば成功です。
http://localhost:8080/
http://localhost:8080/signin
http://localhost:8080/signup

RECOMMENDこちらの記事も人気です。