リアルタイムに反映される掲示板を作る最近よく耳にするFirebase。サーバーレスなモバイルアプリやWebアプリケーションを構築できるサービスのようです。最近Vue.jsに入門したので、勉強がてらFirebaseを利用したサーバーレスなVueアプリを作ってみたいと思います。Vue.jsやFirebaseを利用したことがない方に、これらのイメージをつかんでいただければ幸いです。Firebase作成するアプリこんな感じで、リアルタイムに更新される掲示板アプリを作成します。HTMLとJSだけで動的なサイトを構築することが可能になります。vue.jsのプロジェクト作成ローカルのvue.jsのプロジェクトを作成します。vue-cli使ってないです。手作業で作成しました。index.css雛形となるhtmlを作成しておきましょう。src="main.js"></script></body></html>CDNを使ってVue.jsを読み込んでいます。投稿機能の実装vue.jsを用いて投稿機能を実装していきます。勉強がてら、コンポーネントに分割した構成にします。firebaseは後ほど実装するので、この段階ではデータの永続化がなされていません。index.htmlを以下のように編集しましょう。v-on:input="doAdd"></board-form></div>index.jsを作成して、次のように編集します。VueでルートになるVueインスタンスを作成し、#boardと紐づけています。ちなみにコンポーネントは、ルートインスタンスが作成される前に定義しておく必要があるそうです。devtoolsで見た様子が以下のようになります。devtools便利すぎるので、vue.jsに入門する方は、絶対に導入しましょう。理解、開発ともに効率化されます。formから入力された値は、ルートインスタンスに渡され、つぎの形で、dataオプションに登録されているlists配列に追加されます。これを、v-forを用いて一つずつ要素を取り出しpropsを通して子コンポーネントに受け渡して繰り返し表示させています。この状態だとブラウザをリロードした段階でデータがリセットされてしまいます。そこで、firebaseを導入してデータの永続化を行なっていきましょう。後ほどスニペットを使用することになるので、保存しておきましょう。trueに変更します。実装index.htmlとindex.jsを次のように編集しましょう。取得したスニペットを貼り付けます。}})注目するべき箇所は3つほどですかね。1.firebaseへの書き込みfirebase.database()ref(‘board’).push()でpushの引数に渡されたデータをfirebaseへ書き込むことができます。{})とすることで、イベントの発生時(データベースの変更時)に、リッスンすることができます。データベースの変更を自動で検知して、onに渡した関数を実行させることができます。これまでは、フォームに入力された値は直接ルートインスタンスの持つlists配列に収められていましたが、firebaseを経由してlists配列に収めバインドされるように変更しました。3.keyの設定v-forでコンポーネントを繰り返し表示させているので、一意なkeyを与えなくてはなりません。先ほどfirbaseから取得した値は、listsに次のような形で収められています。firebaseにデータを保存した際に一意となる値が割り振られているのこの値をkeyとして用いています。これで、リアルタイムに更新される掲示板を作成することができたはずです。登録されたデータは、firebaseのワークスペース上から確認することが可能です。見た目をリッチに最後に、簡単なcssを追加して見た目を少しだけよくしておきます。auto;}これで多少は、見た目も掲示板らしくなったはずです。僕個人としては、vue.jsは割と直感的に記述できる印象を受けました。更新されるのに驚きました。いずれはVue.jsでSPA作成できるように今後も勉強を続けていこうと思います。