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

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のデータベースが作成済である前提で説明します。また、データベースへの書き込みと読み込み権限は制限なしの状態になっていることを前提とします。
リアルタイムに同期するデータベースを使った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
の中身を以下のように記述します。
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
です。
<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>
上記コードは以下のような見た目になります。