こんにちは、エンジニアの高崎です。
Nuxt.jsとFirebaseを使って簡単なWebサービスを作る特集、１回目はセットアップの方法、２回目はログイン認証の実装をしましたが、３回目はFirebaseのRealtime Databaseと連携して、データを入力、保存してみたいと思います。

Firebase Realtime Databaseの特徴

通常、Webサービスはリレーショナルデータベースと呼ばれる、エクセルのセルを分けるような形で、データを複数の保管場所に分ける形でデータを保存しますが、このReal Time DatabaseはNoSQLと呼ばれる構成で、一つの大きな保管場所にデータを保存します。
利点はとにかく高速でスケールしやすいことで、短所は複雑なデータを扱いにくいことです。

データベースにデータを保存する

前回からの続きです。
今回は、Google認証した状態でテキストを新規追加する機能を作ります。

１．Firebase側で、データベースを使う準備をします。Firebaseコンソールにログインしてログイン、プロジェクト選択後、Realtime Databaseの箇所、「使ってみる」をクリックします。

2.「ルール」をクリックし、データベースのセキュリティに関するルールを設定します。ここでは、notesという名前でデータを保管し、ログインしたユーザーのみが読み書きできるよう、以下のルールを設定します。


３．Nuxtのプロジェクトに戻ります。今回はログイン後の画面でテキストを追加して保存できるようにするため、/components/Mypage.vueを開きます。
まず、４行目、こんにちは, {{ user.displayName }}さんの下の行に、テキストエリアと、保存することができます。

4.scriptの内部、props: ['user']の下にテキストエリアのデータの受け皿となる変数を準備します。

この変数note_contentとtextreaに設定した、v-model="note_content"が紐づけされ、テキストエリアに入力した内容がnote_contentに格納されます。
5.続いて、ボタンに紐づく関数、saveContentを22行目の下、logout関数の下に追加します。

6.完成したMypage.vueは以下のようになります。

7.ターミナルでプロジェクトフォルダを展開して以下のコマンドを打ち込み、

npm run dev

ログイン後の画面が以下のようになり、テキストエリアになにかを打ち込んで保存を押すと、Firebaseのデータベースにデータが保管されます。

データベースに保管されている情報は、Firebaseのコンソールから確認できます。

これで、データベースへの書き込みは完了です。続いてデータベースに書き込んだ情報を読み込んでみたいと思います。

データベースからデータを読み込む

１．17行目、変数を定義しておく箇所に、notesというFirebaseのデータから読みこんだデータを保存する変数を作ります。

2.19行目に、ページの読み込み時に、Firebaseからデータを読み込み、notesという変数に格納する関数を追加します。

３.noteｓに保管されたデータをforループで値を取り出し表示するためのコードを、５行目に追加します。v-forでVueテンプレート上でforループを回せます。

4.完成したMypage.vueは以下のようになります。

5.ブラウザで確認した様子は以下のようになり、入力した情報が表示されているのがわかります。

6.ターミナルに戻り、Nuxt.jsのプロジェクトをビルドします。

npm run build

7.ターミナルに戻り、Firebaseに本番公開するコマンドを入力します。

firebase deploy

これで、Firebase上に本番公開ができました！

またここまでのコードを弊社のGitHubにアップしましたので、ご不明な点がある方はこちらもご参照下さい。
ここまでNuxt.jsとFirebaseを使ってWebサービスを作る上での基本である、環境構築、ログイン認証、データの作成と読み込みを全３回に渡りお送りしてきました！
Webサービスを作ろうとしている方のお力になれたなら幸いです！お読みいただき、ありがとうございました。