#やりたかった事
webサイトの入力フォームから入力された「名前」と「所在地」を、Firebase CloudFirestoreに保存する。
今回はVue.jsで実装

#環境
・Firebase CloudFirestore
・Visual Studio Code
・Vue.js

#準備
##Firebase CloudFirestoreで格納データを作成
Firebase CloudFirestoreで格納するデータ型を作成する方法は以下を参考にして下さい。
必要な情報は
・SDN情報
・コレクション名
・格納データ名
Firebase CloudFirestoreの使い方を初心者が解説してみた

##Visual Studio Code
新しいjsファイルを作成
npm初期化

npm i

#作り方
##作成したjsファイルに以下を入力
今回、名前、所在地を格納するデータベースを作成しました。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WEBサイトから取得したデータをFirebase CloudFirestoreに保存</title>
</head>

<body>
  <div id="app">
    <ul v-for="data in allData" :key="data.id" class="menu-list">
      <li>
        {{data.name}} / {{data.age}}
      </li>
    </ul>
    
    <p>
      名前：<input v-model="name" placeholder="名前">
      所在地：<input v-model="age" placeholder="年齢">
      <button v-on:click='post'>送信</button>
    </p>
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
  <script>
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const db = firebase.firestore();

    const app = new Vue({
      el: '#app',
      data: {
        allData: [],
        name: '',
        age: 0
      },
      mounted: async function () {
        db.collection('memos').onSnapshot(snapshot => {
          // データベースに変更があった場合実行される
          console.log('on snapshot!');
          // 更新されたデータだけでなく、全て取得される
          this.allData = [];
          snapshot.forEach(doc => {
            // console.log(doc);
            this.allData.push(doc.data());
          });
        });
      },
      methods: {
        //データ追加
        post: async function () {
          await db.collection("user").add({
            name: this.name,
            age: this.age
          });
        }
      }
    })
  </script>

</body>

</html>

自分の環境に変更しないといけない箇所
Firebase CloudFirestoreで発行されたSDK情報に書き換えます。

 // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
    };

「await db.collection("user").add({」のuserの箇所は、Firebase CloudFirestoreで作成したコレクション名に変えます。

      methods: {
        //データ追加
        post: async function () {
          await db.collection("user").add({
            name: this.name,
            age: this.age
          });
        }

#完成
これで、webサイトから入力した名前、所在地の値がFirebase CloudFirestoreへ保存されます。
お問い合わせフォームの入力内容等、保存しておくことが可能になります。