kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

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

今まで使う機会がなかった 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_addedchild_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-ifv-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 初学者にオススメ 👍