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を使ってインストールする

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

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

vue-cliを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

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

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

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

vue-todo/src/router.js

main.jsの編集

vue-todo/src/main.js

App.vueの編集

vue-todo/src/App.vue

確認

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