Contents
firebase 勉強会
この記事ではvue.jsとfirebaseを使って認証機能の実装とrealtime databaseを使ったtodoアプリの実装方法を解説します。
firebase
firebaseはBaaSと呼ばているサービスでフロントエンドコードのホスティングやDBなど
本来であれば自前で構築が必要なサーバサイドの機能を簡単に利用するためのサービスです。
webアプリケーションに限らずスマートフォンアプリでも利用することができます。
主なサービスは以下のようになっています。
- リアルタイムデータベースリアルタイムで同期可能なデータストア
- Firebaseクラウドメッセージングpush通知
- FirebaseAuth ログイン機能。メールアドレスとパスワードを利用する基本的なものからFacebook, GitHub, Twitter, Googleといったサービスのソーシャルログイン機能をかんたんに利用できます。
- Firebaseストレージ オンラインストレージ。アプリ内から利用する画像や動画などを保存しておくことができます。
- ホスティング 静的Webのホスティング。CDNとHTTPSが含まれる。SPAを作る場合ならFirebaseだけで完結する。
- AdWords ターゲティング広告。
- AdMob アプリ内広告。
などなど
vueプロジェクトの作成
vue-cliのインストール
> 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
http://localhost:8000
にアクセス
プロジェクトを作成したいディレクトリを選択して
「ここに新しいプロジェクトを作成する」
をクリックし次にすすむ

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

ここでは「デフォルトプリセット」を選択し、「プロジェクトを作成する」をクリックしてプロジェクトを作成する。
依存パッケージのインストール
今回は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


