iconトポロジ・ラボ(研究開発部)です。Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろうで説明しなかったコードの詳細についての解説編となります。デザインはBootstrapを使って簡単に整えていますが、その部分に関しては省略させていただきます。以下が前回作成したコードになります。list}},})})</script></body></html>解説では適宜コード内にコメントを追加して説明します。{{message.content}}</p></div>HTMLの表示部分は名前と内容の入力欄、送信ボタン、送信済みメッセージリストの3つで構成されています。入力欄ではVue.jsのv-modelを使うことで双方向データバインディングを作成しています。双方向データバインディングを使うことで入力された値をscript内のVueインスタンスのdataオブジェクトとして簡単に扱うことができ、逆にscript内でdataオブジェクトに変更した場合も簡単に表示に反映させることができます。Vue.jsのメソッドイベントハンドラになっています。クリックされたときにVueインスタンスのsendメソッドを実行しろという簡単な記述になっています。最後に送信済みメッセージのリスト表示部分です。Hostingを使う場合はコードにあるように”/__”ではじまる予約済みのURLを使用して読み込みと初期化ができます。することで、Hostingしたプロジェクトの設定に合わせて簡単に初期化することができます。Hostingを使わず、独自のサーバーを利用する場合は自分で初期化の処理を書かなければいけません。Firestoreを自然に連携できるようになるvue-firestoreを読み込んでいます。Firestoreのデータも扱えるようになります。上記のコードのように宣言方法もほとんど同じです。この部分で、簡単に追加することができます。Firestoreの読み込み方法はVueインスタンスのdataと全く同じように扱えます。ようにdataと同様に利用できます。FirestoreとVue.jsを使うことで、今までは実装が大変だった異なるデバイス間のデータの同期の仕組みや、そのための実装が簡単に行えることがわかりました。Firestoreの他にHostingも使いましたが、それ以外にもウェブアプリやスマートフォンアプリ開発のために便利なサービスが沢山あります。これを機にFirebaseやVue.jsを使って開発をしてみようと思って頂ければ幸いです。