Firebase の Authentication と Realtime Database を使って Vue.js でチャットアプリを作りました

こんにちは！エンジニア（仮）のめるです。
今回は社内勉強会にて、表題のテーマで発表したのでブログに書きたいと思います。

Firebase とは

firebase.google.com

モバイルとウェブ開発に特化した、クラウドプラットフォームです。
Googleが2014年に買収しました。そして、機能がいっぱいあります！

今回は、Authentication と Realtime Database を使いました。

Authentication

FirebaseのAuthenticationの特徴は、ユーザーが各種アカウントで簡単にログインできることです。
対応しているログインプロバイダも、さまざま。

こちらの記事を参考に、メールアドレスとパスワードでを用いたログインを実装してみましたが、とても簡単でした。

qiita.com

以下は、Vue.js内のログイン処理の抜粋です。

import firebase from 'firebase'

export default {
  name: 'Signin',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signIn: function () {
      // ↓ ログイン処理
      firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
        user => {
          alert('Success!')
          this.$router.push('/')
        },
        err => {
          alert(err.message)
        }
      )
    }
  }
}

アカウントの作成も同様に簡単です。

import firebase from 'firebase'

export default {
  name: 'Signup',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      // ↓ アカウント追加処理
      firebase.auth().createUserWithEmailAndPassword(this.username, this.password)
        .then(user => {
          alert('Create account: ', user.email)
        })
        .catch(error => {
          alert(error.message)
        })
    }
  }
}

Realtime Database

Realtime Databaseの特徴は、

1. リアルタイム同期
2. オフラインに対応
3. クライアント端末からアクセス可能

といったものがあります。

Realtime Databaseの仕組み

Realtime Databaseは、普通のRDBMSの仕組み（データベースやテーブルやカラムなど）を使わず、JSON形式で保存しています。 JSON treeごとに、ユーザーのread/write 権限などを設定することが可能です。

ちなみに、Firebase の他のプロダクトである Cloud Firestore は、

1. Realtime Database よりも柔軟で大規模なスケーリングができる
2. Realtime Database よりも表現力の高いクエリが書ける

などの理由で Realtime Database の上位互換と言われていますが、2018年6月17日現在、まだベータ版のプロダクトのようです。

こちらの動画を参考に、簡易的なチャットアプリを実装してみました。

vueschool.io

Realtime Database の中身はこんな感じのJSONです。

{
  "messages" : {
    "-LF7khnK3EweENvx3idN" : {
      "nickname" : "meru",
      "text" : "Hi"
    },
    "-LF8-BJ9KzGWk2xvPjKm" : {
      "nickname" : "bto",
      "text" : "Hello"
    },
    "-LF85eVJ7Aqe7JU8sVDA" : {
      "nickname" : "meru",
      "text" : "How are you"
    }
  }
}

以下は、Vue.js内のメッセージ送信処理の抜粋です。

import firebase from 'firebase'

export default {
  name: 'ChatRoom',
  data () {
    return {
      messages: [],
      messageText: '',
      nickname: 'meru'
    }
  },
  methods: {
    storeMessage () {
      // ↓ メッセージを Realtime Database に登録する処理
      firebase.database().ref('messages')
        .push({text: this.messageText, nickname: this.nickname})
      this.messageText = ''
    }
  },
  created () {
    // ↓ Realtime Database にメッセージが追加されたら Vue の State にも追加する処理
    firebase.database().ref('messages')
      .on('child_added', snapshot => this.messages.push({...snapshot.val(), id: snapshot.key}))
  }
}

まとめ

Authentication も Realtime Database も難しいことは一切ありませんでした！
Firebase は他にも Hosting などの便利な機能がたくさんあるので、SPAやアプリなどのちょっとした開発に便利そうだな〜、ということは知っていたのですが、実際に動かしてみてその便利さを実感しました。
自分は、ちょっとしたお手軽開発を数多くするのが好きなので、今後も向いてそうなアプリケーションには積極的に使っていきたいな、と思います。

---

www.wantedly.com