【解説編】Cloud Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろう

トポロジ・ラボ(研究開発部)です。

今回はCloud Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろうで説明しなかったコードの詳細についての解説編となります。デザインはBootstrapを使って簡単に整えていますが、その部分に関しては省略させていただきます。

以下が前回作成したコードになります。

解説では適宜コード内にコメントを追加して説明します。

 

HTMLの表示部分

HTMLの表示部分は名前と内容の入力欄、送信ボタン、送信済みメッセージリストの3つで構成されています。

入力欄ではVue.jsのv-modelを使うことで双方向データバインディングを作成しています。双方向データバインディングを使うことで入力された値をscript内のVueインスタンスのdataオブジェクトとして簡単に扱うことができ、逆にscript内でdataオブジェクトに変更した場合も簡単に表示に反映させることができます。

送信ボタンの @click="send" はVue.jsのメソッドイベントハンドラになっています。クリックされたときにVueインスタンスのsendメソッドを実行しろという簡単な記述になっています。

最後に送信済みメッセージのリスト表示部分です。

 

ライブラリ読み込み部分

Cloud Firebaseのライブラリ読み込み時に、Firebase Hostingを使う場合はコードにあるように”/__”ではじまる予約済みのURLを使用して読み込みと初期化ができます。こうすることで、Hostingしたプロジェクトの設定に合わせて簡単に初期化することができます。(Firebase Hostingを使わず、独自のサーバーを利用する場合は自分で初期化の処理を書かなければいけません。)

また、Vue.jsの基本的なライブラリと次に説明するVue.jsとCloud Firestoreを自然に連携できるようになるvue-firestoreを読み込んでいます。

 

Vueインスタンス部分

vue-firestoreを使うことで、Vueインスタンスのdataオブジェクトのように、Cloud Firestoreのデータも扱えるようになります。上記のコードのように宣言方法もほとんど同じです。

Cloud Firestoreへのデータ追加方法は送信ボタンのメソッド内にある this.$firestore.messages.add(message) この部分で、簡単に追加することができます。Cloud Firestoreの読み込み方法はVueインスタンスのdataと全く同じように扱えます。実際に送信済みメッセージを時刻順に並べ替えている部分 const list = this.messages.slice() のようにdataと同様に利用できます。

 

まとめ

Cloud FirestoreとVue.jsを使うことで、今までは実装が大変だった異なるデバイス間のデータの同期の仕組みや、そのための実装が簡単に行えることがわかりました。今回はFirebaseのサービスの内、Cloud Firestoreの他にHostingも使いましたが、それ以外にもウェブアプリやスマートフォンアプリ開発のために便利なサービスが沢山あります。これを機にFirebaseやVue.jsを使って開発をしてみようと思って頂ければ幸いです。