Vue.jsからFirestoreを使うための準備とFirestoreへのデータ書き込み手順

公開日：2018/11/27 更新日：2018/11/27

FirebaseのCloud Firestore（以降、Firestore）とVue.jsを組み合わせると、データ書き込みや読み込みが非常に簡単に実行できます。ここでは、Vue.jsで簡素なフォームを作成し、そのフォームからFirestoreにデータを書き込むところまでをメモします。

はじめに

FirebaseのCloud Firestore（以降、Firestore）は、Webアプリやモバイルアプリに対応したスケーラブルなNoSQLデータベースです。Vue.jsアプリからのデータ保存や読み込みも非常に簡単に行えるようになっています。ここでは、Vue.jsで簡素なフォームを作成し、そのフォームからFirestoreにデータを書き込むところまでをメモします。

前提と環境

説明に使用するVue.jsアプリはこちらの記事Windows10（WSL使用）でVue.jsアプリを作成するまでの手順で作成したVue.jsアプリを前提としています。Vue CLI3を使用して作成したデフォルト状態です。Vue.jsアプリのフォルダ構造は以下のようになっています。

├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        └── Home.vue

まずはじめにFirestoreを使うための準備について説明し、その後に実際にVue.jsで作成したフォームからFirestoreにデータを書き込む例を説明します。

Vue.jsアプリでFirestoreを使用するための準備

Firestore側で必要な作業

まずはFirestore側で新規のデータベースを作成しておく必要があります。Firestoreのコンソール画面から新規作成することができます。作成手順については、以下の記事にまとめているのでFirestoreにデータベースを未作成の場合は見てみてください。以降では、Firestoreのデータベースが作成済である前提で説明します。また、データベースへの書き込みと読み込み権限は制限なしの状態になっていることを前提とします。

www.virment.com

FirebaseのFirestoreにWebサイトからデータを追加してみるまでの手順

リアルタイムに同期するデータベースを使ったWebアプリやモバイルアプリを開発する上で大変強力なFirebaseの設定と実際にWebサイトからデータを追加してみるまでの手順をメモします。

Vue.jsアプリ側で必要な作業

Vue.jsアプリでFirestoreを使う為に、npmでfirebaseのパッケージをインストールします。自身のVue.jsプロジェクトのルートディレクトリで以下のコマンドを実行します。

$ npm install firebase --save

続いて、srcディレクトリ配下にfirebaseというディレクトリを作成し、firebaseディレクトリ配下にfirestore.jsというファイルを作成します。以下はVue.jsアプリのルートディレクトリにいる前提です。

$ cd src
$ mkdir firebase
$ cd firebase
$ touch firestore.js

touchコマンドは、タイムスタンプを表示するコマンドですが、存在しないファイル名を引数として与えることでそのファイル名を持つ空のファイルを作成してくれます。（参考サイト様：touchコマンドについて詳しくまとめました【Linuxコマンド集】 - エンジニアの入り口）

そしてfirestore.jsの中身を以下のように記述します。

firebase/firestore.js

import firebase from 'firebase' 

const config = {
  apiKey: "AIzaSyskwartawproSikoperaktaewew",
  authDomain: "myfirebase-cXXXX.firebaseapp.com",
  databaseURL: "https://myfirebase-cXXXX.firebaseio.com",
  projectId: "myfirebase-cXXXX",
  storageBucket: "myfirebase-cXXXX.appspot.com",
  messagingSenderId: "1012408523578"
};

const settings = { timestampsInSnapshots: true };
firebase.initializeApp(config);
firebase.firestore().settings(settings);

export default firebase

まず、importでFirebaseのパッケージを読み込んでいます。その下にあるconst configは各自のFiresotreの設定情報になります。この設定情報は、FirebaseでFirestoreの新規データベースを作成した際に表示されるものです。具体的にはこちらの画像のものです。あとはtimestampsInSnapshots: trueというオプションを用意し、initializeApp(config)で初期化しています。exportでfirebaseを指定することで、他のコンポーネントファイル等でここで初期化と設定が完了しているfirebaseを使えるようになります。　なお、timestampsInSnapshots: trueについては、こちらの記事が参考になりました。Firestore の Timestamp の仕様変更による警告と、その対処 - Qiita

この時点でVue.jsアプリのフォルダ構造は以下のようになっています。ちなみに、ここでfirebaseという名前のディレクトリ、firestore.jsという名前のファイルを作成しましたが、これらは自由に決めて大丈夫です。

├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── firebase
    │   └── firestore.js
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        ├── Home.org.vue
        └── Home.vue

次節にVue.jsアプリからFirestoreへの書き込み方を記載します。

Vue.jsアプリからFirestoreに書き込みを行う

ここでは、説明のために以下のようなフォームを使います。以下はHome.vueです。

src/Home.vue

<template>
  <div class="home" style="margin-left: 20px;">
      <p>お名前</p>
      <input v-model="name" placeholder="Name"></br></br>
      <p>メールアドレス</p>
      <input type="email" v-model="email" maxlength="30"></br></br>
      <p>お問い合わせ内容</p>
      <input v-model="message" placeholder="message"></br></br>
      <button @click="sendItem">送信する</button>
      <p v-if="showMessage" style="margin-top: 20px">
          フォームが正常に送信されました。
      </p>
  </div>
</template>
<script>
// Vue CLIで作成したアプリでは、@マークは./srcを指す
import firebase from '@/firebase/firestore'

export default {
  name: 'home',
  data() {
    return {
        name: '',
        email: '',
        message: '',
        items: [],
        showMessage: false,
    }
  },
  
  methods: {
   sendItem(){
     const colref = firebase.firestore().collection("formcontent"); // "formcontent"という名前のコレクションへの参照を作成
     
     // 保存用JSONデータを作成
     const saveData = {
        name: this.name,
        email: this.email,
        message: this.message
     };
     
     // addの引数に保存したいデータを渡す
     colref.add(saveData).then(function(docRef) {
          // 正常にデータ保存できた時の処理
          console.log("Document written with ID: ", docRef.id);
      }).catch(function(error) {
          // エラー発生時の処理
          console.error("Error adding document: ", error);
      });

      this.showMessage = true;
   },
  }
}
</script>

上記コードは以下のような見た目になります。