ブロックチェーン・AI・システム開発の株式会社INDETAIL

FirebaseをVue.jsで扱ったのでクリスマス風に備忘録。

2018.12.06
ishi-sho

※本記事は、INDETAIL Advent Calendar 2018の一環として投稿しています。


INDETAIL Advent Calendar 2018 6日目を担当いたします、ishi-shoです。

何について書こうか迷いましたが、最近Vue.jsとFirebaseを扱う機会があったので、それについて書いてみようと思います。

Firebaseとは

Firebaseとは簡単に言いますと、Googleが提供しているプラットフォームで、主にモバイルアプリ開発に役立つ機能が数多く用意されています。

なお、FirebaseはWebアプリでも使えます。(今回の記事でもWebアプリに使っています)

その時やったことはFirebaseの機能のひとつ、「Realtime Database」を用いることで、Webアプリ上から登録・確認・編集・削除ができるといったものの実装でした。

何をしようか...

今回の記事はその実装の備忘録ですが、せっかくなのでAdvent Calendarの記事である意味も含めまして、クリスマス風にアレンジして新規作成しました。

クリスマス、データを受け取る・・・と考えた時に浮かんだのが、記事冒頭の画像にもいらっしゃるあの人物です。
ということで、この方にお願い事をするページをVue.jsで、データ管理をFirebaseを用いて作成してみました。

作ったもの

環境

認証

Firebaseは認証を組み込む機能も持っています。今回はGoogleアカウントでの認証を使用しました。

Googleアカウントの他には

  • メールアドレス/パスワード
  • Twitterアカウント
  • facebookアカウント

などでも認証を組み込むことができます。

登録

認証を成功させると入力フォームが現れます。

適当に内容を入力して、送信します。

registrationテーブルの下に認証したuserIDをキーにしてレコードを作成します。

Firebaseコンソール(いわゆるサンタ側)

登録したものが即座に反映されています。ちなみに、認証が完了していない場合はデータベースに書き込めないように制御できるので、コンソール側ではその設定も施してあります。

反映が確認できたので、先ほど登録したページに戻りますが、登録後は認証画面に戻っているので再度認証します。

登録したものが表示され、編集と削除ができるようになってます。

編集

では、登録した内容を編集してみます。
今回は欲しいものをWindowsPCからMacPCに変更して編集ボタンを押します。

先ほど編集するために再認証しているので、認証しているuserIDと同じキーを持つレコードを探し出して、そこにデータ内容を再登録する形で実装しました。

コンソールで見ると欲しいものが更新されています。

削除

登録した内容を削除します。

削除の仕組みとしては、userIDをキーとして持っている自分のデータに空データを登録する形です。

それでは先ほどの登録済みの画面上で削除ボタンを押してみます。

コンソールからデータが消えました。

簡単ではありますが、これで登録・編集・削除について一通り実装できました。どの機能についても即座に反映されるのでその早さに驚きです。

まとめ

今回はvuexを使用しなかったので、コードが一挙にまとまった形になってしまいました。分散して管理しやすいように導入した場合も考慮してみたいです。また、FirebaseにはRealtime Database以外にも機能がたくさんあるのでそちらも触れてみたいと思います。

使用したデータは自身で登録した1件のみでしたが、もしも実用されたらサンタは無数のデータを受け取るんですね...。お疲れ様です。

ishi-sho

主にフロントエンドを担当しています。ゲームと邦楽ロックが好き

「いいね」ボタンを押すと、最新情報をすぐに確認できます。