こんにちは!エンジニア(仮)のめるです。
今回は社内勉強会にて、表題のテーマで発表したのでブログに書きたいと思います。
Firebase とは
モバイルとウェブ開発に特化した、クラウドプラットフォームです。
Googleが2014年に買収しました。そして、機能がいっぱいあります!
今回は、Authentication と Realtime Database を使いました。
Authentication
FirebaseのAuthenticationの特徴は、ユーザーが各種アカウントで簡単にログインできることです。
対応しているログインプロバイダも、さまざま。
こちらの記事を参考に、メールアドレスとパスワードでを用いたログインを実装してみましたが、とても簡単でした。
以下は、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の特徴は、
- リアルタイム同期
- オフラインに対応
- クライアント端末からアクセス可能
といったものがあります。
Realtime Databaseの仕組み
Realtime Databaseは、普通のRDBMSの仕組み(データベースやテーブルやカラムなど)を使わず、JSON形式で保存しています。 JSON treeごとに、ユーザーのread/write 権限などを設定することが可能です。
ちなみに、Firebase の他のプロダクトである Cloud Firestore は、
- Realtime Database よりも柔軟で大規模なスケーリングができる
- Realtime Database よりも表現力の高いクエリが書ける
などの理由で Realtime Database の上位互換と言われていますが、2018年6月17日現在、まだベータ版のプロダクトのようです。
こちらの動画を参考に、簡易的なチャットアプリを実装してみました。
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やアプリなどのちょっとした開発に便利そうだな〜、ということは知っていたのですが、実際に動かしてみてその便利さを実感しました。
自分は、ちょっとしたお手軽開発を数多くするのが好きなので、今後も向いてそうなアプリケーションには積極的に使っていきたいな、と思います。