kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Vue School の無料コース「Vue.js + Firebase Realtime Database」を受講してチャットアプリケーションを実装した

Firebase Vue.js

今まで使う機会がなかった Firebase Realtime Database を学びたかったので（今後は Cloud Firestore 中心になりそうだけど），Vue School が公開している無料コース「Vue.js + Firebase Realtime Database」を受講して，Vue.js と Firebase Realtime Database を使ったチャットアプリケーションを実装してみた．動画を見ながら写経するとしても，2時間あれば終わるので，ちょっとしたスキマ時間に学ぶこともできる．Vue.js 初学者と Firebase Realtime Database 初学者にオススメのコースだった．

vueschool.io

Vue.js + Firebase Realtime Database

コースは計8個の動画で構成されている．どの動画もトピックごとに短くまとまっているので，振り返りながら進むことができた．

  • Firebase Introduction
    • What is Firebase and Why is it so Great? ⏲ 2:06
    • Meet Firebase Realtime Database ⏲ 3:06
  • Firebase Actions
    • Read Data from Firebase with Vue.js ⏲ 6:40
    • Write Data to Firebase with Vue.js ⏲ 5:37
    • Delete Data from Firebase with Vue.js ⏲ 4:02
    • Update Data from Firebase with Vue.js ⏲ 7:30
  • Extras
    • Update Multiple References at Once ⏲ 1:23
    • Display Notifications when Things Happen ⏲ 3:36

なお，以下のように英語字幕が出るので，英語が苦手な人でも，問題なく受講できると思う．

f:id:kakku22:20180509135534p:plain

（受講画面例）

実装したチャットアプリケーション

以下のチャットアプリケーションを実装した．

  • メッセージを「送信／編集／削除」することができる
  • 画面をリロードせず，リアルタイムにデータの変更を反映することができる
  • データの変更時にトースト UI で通知することができる

f:id:kakku22:20180509135545p:plain

（実装したチャットアプリケーションの画面）

What is Firebase and Why is it so Great?

  • Firebase Realtime Database のことを Firebase と呼ぶ人もいるけど，他にも多くの機能がある
  • Firebase Realtime Database は NoSQL データベースで，リアルタイムにデータを同期することができる
  • 無料枠で使える

Meet Firebase Realtime Database

Firebase プロジェクト「Vue School Chat Room」を新規作成し，Firebase Realtime Database を作成した．コンソール上で自由にデータを変更することができて，さらにデータは JSON として「インポート／エクスポート」することもできる．今回インポートするサンプル JSON は GitHub に公開されているので，先に git clone をしておくと良いと思う．

github.com

f:id:kakku22:20180509135607p:plain

（プロジェクト新規作成）

f:id:kakku22:20180509135615p:plain

（Firebase Realtime Database コンソール）

なお，今回は検証のため，Firebase Realtime Database のフル権限を許可する流れになっていた．ただし，プロダクション環境で使う場合は Firebase Authentication と連携する必要がある．

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Read Data from Firebase with Vue.js

まず，Firebase ウェブアプリを新規作成した．次に GitHub に公開されている index.html を取得する．ただし，master ブランチだと完成形の index.html になっているので，写経しながら進める場合は，コミット履歴から1番最初に戻す．

$ git checkout eff91892b1143e2d8e65fba5017f9e7bce24c032 index.html

以下のように，簡単に Firebase Realtime Database に接続できる．

const database = firebase.database()

以下の実装では messages に対して value イベントを取得して console.log に出力をしている．function をアロー関数を使って書き直しているところも良かった．なお，常にデータを同期しているので，コンソール上でデータを変更すると，すぐに console.log に出力される．

database.ref('messages').on('value', snapshot => console.log(snapshot.val()))

他にも child_added や child_changed など，Firebase Realtime Database のイベントがある．

database.ref('messages').on('child_added', snapshot => console.log(snapshot.val()))

Write Data to Firebase with Vue.js

以下のように .push を使うと，キーを追加することができる．

methods: {
  storeMessage () {
    messagesRef.push({text: this.messageText, nickname: this.nickname})
    this.messageText = ''
  }
},

また，キーは以下のように変数にしておくと DRY に実装できるので，途中にリファクタリングが含まれていた．

const messagesRef = database.ref('messages')

他にも .set を使うと，新規キーを追加することができる．直接 / 区切りで書くこともできるし，階層ごとに .child を使って書くこともできる．

database.ref('who/am/I').set('alex')
database.ref('who').child('am').child('i').set('not alex')

f:id:kakku22:20180509135703p:plain

（新規キーを追加した画面）

Delete Data from Firebase with Vue.js

キーは id を指定して .remove で削除することができる．そして，メッセージごとに id を識別するため，created で id に snapshot.key を指定しておく．

created () {
  messagesRef.on('child_added', snapshot => this.messages.push({...snapshot.val(), id: snapshot.key}))
}

すると，以下のように削除メソッドを実装することができる．

deleteMessage (message) {
  messagesRef.child(message.id).remove()
}

Update Data from Firebase with Vue.js

以下のようにキーを更新する．.update は特定のキーの値を更新し，.set は特定のキーを全て書き換える．なお，現在はフル権限を与えているので，Chrome DevTools からキーを更新することもできる．

database.ref('messages').child('-L8HkVXx_jUWUXDIVDlR').update({text: 'updated message!'})
database.ref('messages').child('-L8HkVXx_jUWUXDIVDlR').set({text: 'updated message!'})
database.ref('messages').child('-L8HkVXx_jUWUXDIVDlR').child('text').set('updated message!')

また，メッセージの編集中は UI を変更するため，影響のある箇所に v-if と v-else を追加した．編集中は以下のような画面になる．

f:id:kakku22:20180509141155p:plain

（編集中の画面）

Update Multiple References at Once

Firebase Realtime Database で，複数キーをバルクで（トランザクションを有効にして）追加することができる．今回のアプリケーションでは使っていないけど，参考情報として学んだ．

const payload = {}

payload['users/-XXX/nickname'] = 'xxx'
payload['users/-YYY/nickname'] = 'yyy'
payload['users/-ZZZ/nickname'] = 'zzz'

database.ref().update(payload)

f:id:kakku22:20180509135737p:plain

（複数キーを追加した結果）

Display Notifications when Things Happen

最後はトースト UI を実装し，データの変更時に通知できるようにした．ライブラリは以下の native-toast を使った．

nativeToast({
    message: `New message by ${snapshot.val().nickname}`,
    type: 'success'
})

github.com

まとめ

  • Vue School が公開している無料コース「Vue.js + Firebase Realtime Database」 を受講した
  • 1,2時間で Firebase Realtime Database をデータストアとしたチャットアプリケーションを実装することができた
  • Vue.js 初学者と Firebase Realtime Database 初学者にオススメ 👍