katsube/firestore_crud1.html

## firestore_crud1.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello FireStore</title>
  <style type="text/css">
    button{width:100px; height:30px; margin:5px;}
    #msg{ display:none; border:1px solid gray; margin:10px; padding:10px; width:600px;}
  </style>
</head>
<body>
  <h1>Hello FireStore</h1>
  <form>
    <button id="addData" type="button">追加</button><br>
    <button id="readData" type="button">参照</button><br>
    <button id="updateData" type="button">更新</button><br>
    <button id="removeData" type="button">削除</button><br>
  </form>
  <div id="msg"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-firestore.js"></script>
  <script src="/js/config.js"></script>
  <script>
    // Firestoreのインスタンス作成
    var db = firebase.firestore();
    var LIST = [];  //ID保管用

    /**
     * データの追加
     **/
    document.querySelector("#addData").addEventListener("click", ()=>{
      db.collection("users").add({
        name: "マイメロ",
        age: 27
      })
      .then((doc) => {
        LIST.push(doc.id);
        showMessage(`追加に成功しました (${doc.id})`);
      })
      .catch((error) => {
        showMessage(`追加に失敗しました (${error})`);
      });
    });

    /**
     * データの参照
     **/
     document.querySelector("#readData").addEventListener("click", ()=>{
      db.collection("users").get().then((querySnapshot) => {
        var buff = [];
        var html = "<ul>";
        querySnapshot.forEach((doc) => {
          var data = doc.data();
          html += `<li>${doc.id} => ${data.name}, ${data.age}</li>`;
          buff.push(doc.id);
        });
        html += "</ul>";
        LIST = buff;
        showMessage(html);
      })
      .catch((error)=>{
        showMessage(`データの取得に失敗しました (${error})`);
      });
    });

    /**
     * データの更新
     **/
     document.querySelector("#updateData").addEventListener("click", ()=>{
      db.collection("users").doc(LIST.slice(0,1)[0]).set({
        name: "ポムポムプリン",
        age: 32
      })
      .then(()=>{
        showMessage(`更新に成功しました`);
      })
      .catch((error)=>{
        showMessage(`更新に失敗しました (${error})`);
      });
    });


    /**
     * データの削除
     **/
     document.querySelector("#removeData").addEventListener("click", ()=>{
      // リストにない場合は何もしない
      if(LIST.length === 0)
        return(true);

      db.collection("users").doc(LIST.pop()).delete().then(() => {
        showMessage("削除しました");
      })
      .catch((error) => {
        showMessage(`削除に失敗しました (${error})`);
      });
    });


    /**
     * 実行結果の表示
     **/
    function showMessage(str){
      var msg = document.querySelector("#msg");
      msg.innerHTML = str;
      msg.style.display = "block";
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Hello FireStore</title>
	<style type="text/css">
	button{width:100px; height:30px; margin:5px;}
	#msg{ display:none; border:1px solid gray; margin:10px; padding:10px; width:600px;}
	</style>
	</head>
	<body>
	<h1>Hello FireStore</h1>
	<form>
	<button id="addData" type="button">追加</button><br>
	<button id="readData" type="button">参照</button><br>
	<button id="updateData" type="button">更新</button><br>
	<button id="removeData" type="button">削除</button><br>
	</form>
	<div id="msg"></div>

	<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-firestore.js"></script>
	<script src="/js/config.js"></script>
	<script>
	// Firestoreのインスタンス作成
	var db = firebase.firestore();
	var LIST = []; //ID保管用

	/**
	* データの追加
	**/
	document.querySelector("#addData").addEventListener("click", ()=>{
	db.collection("users").add({
	name: "マイメロ",
	age: 27
	})
	.then((doc) => {
	LIST.push(doc.id);
	showMessage(`追加に成功しました (${doc.id})`);
	})
	.catch((error) => {
	showMessage(`追加に失敗しました (${error})`);
	});
	});

	/**
	* データの参照
	**/
	document.querySelector("#readData").addEventListener("click", ()=>{
	db.collection("users").get().then((querySnapshot) => {
	var buff = [];
	var html = "<ul>";
	querySnapshot.forEach((doc) => {
	var data = doc.data();
	html += `<li>${doc.id} => ${data.name}, ${data.age}</li>`;
	buff.push(doc.id);
	});
	html += "</ul>";
	LIST = buff;
	showMessage(html);
	})
	.catch((error)=>{
	showMessage(`データの取得に失敗しました (${error})`);
	});
	});

	/**
	* データの更新
	**/
	document.querySelector("#updateData").addEventListener("click", ()=>{
	db.collection("users").doc(LIST.slice(0,1)[0]).set({
	name: "ポムポムプリン",
	age: 32
	})
	.then(()=>{
	showMessage(`更新に成功しました`);
	})
	.catch((error)=>{
	showMessage(`更新に失敗しました (${error})`);
	});
	});


	/**
	* データの削除
	**/
	document.querySelector("#removeData").addEventListener("click", ()=>{
	// リストにない場合は何もしない
	if(LIST.length === 0)
	return(true);

	db.collection("users").doc(LIST.pop()).delete().then(() => {
	showMessage("削除しました");
	})
	.catch((error) => {
	showMessage(`削除に失敗しました (${error})`);
	});
	});


	/**
	* 実行結果の表示
	**/
	function showMessage(str){
	var msg = document.querySelector("#msg");
	msg.innerHTML = str;
	msg.style.display = "block";
	}
	</script>
	</body>
	</html>