[javascript + firebase]のサンプルコードを見つけ難かったのでメモるシリーズ
Firestoreとは
Google Firebase の NoSQLデータベースです。[コレクション]というフォルダの中に、資料[ドキュメント]が複数保存されていて、そのドキュメントに[フィールド]というデータが記載されているイメージ。[コレクション] → [ドキュメント] → [フィールド]
１．データ新規追加（サンプルＣ）
新しいドキュメントを追加する
hoge1.html
<script>MemberDocAdd("名前A", "役割A")</script>
hoge1.js
function MemberDocAdd(dojoName, role) {
var db = firebase.firestore();
db.collection("members").doc(strUserID).set({
group: dojoName,
docid: role,
point: 0,
timestamp: firebase.firestore.Timestamp.fromDate(new Date())
})
.then(function(){
document.location.reload(); // 新しいレコードの登録が成功したらリロードする
})
.catch(function(error){console.log("Error at MemberDocAdd:", error)});
}
２．データ読み込み（サンプルＲ）
複数のドキュメントを読み込み、フィールドデータを表示するサンプル
hoge2.html
<div id='aaaaid'></div>
<script>
CheckMemberGroupTitle("demo");
</script>
hoge2.js
<script>
function CheckMemberGroupTitle(keyword) {
document.addEventListener('DOMContentLoaded', function() {
var db = firebase.firestore();
db.collection("dojo").where("name", "==", keyword)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
if (doc.exists) {
var strHTML = ''
+ '<h1>' + doc.data().fieldTitle + '</h1>'
+ '<p>' + doc.data().fieldMessage + '</p>'
document.getElementById('aaaaid').insertAdjacentHTML('afterbegin', strHTML);
} else {
console.log("ドキュメントが見つかりません");
}
})
})
.catch(function(error) {
console.log("DB読込エラー発生:", error);
});
});
}
</script>
３．データ更新（サンプルＵ）
HTMLフォームに値を入力して、データベースのドキュメントを更新する。
hoge3.html
<form name="formUpdate">
<input type="hidden" id="docid" value="' + doc.data().uid.trim() + '">
<p>属性１：<input type="text" id="att1col" value="' + doc.data().att1 + '"></p>
<p>属性２：<input type="text" id="att1rem" value="' + doc.data().att2 + '"></p>
</form>
hoge3.js
function GroupDocUpdate() {
var docID = document.forms['formUpdate'].elements['docid'].value;
var db = firebase.firestore();
db.collection("dojo").doc(docID).update({
att1: document.forms['formUpdate'].elements['att1'].value,
att2: document.forms['formUpdate'].elements['att2'].value,
})
.then(function(){
// 新しいレコードの登録が成功したらリロードする
window.open('/' , '_self');
})
.catch(function(error){console.log("error:", error)});
}
４．データ削除（サンプルＤ）
削除同意のチェックボックスを確認してから、ドキュメントを削除する例
hoge4.html
<form name="formUpdate">
<input type="hidden" name="docid" value="' + doc.id + '">
</form>
<form name="DeleteMe">
<input type="checkbox" id="acceptDelete">
<label for="acceptDelete">この紹介データを削除することに同意します</label></div>
<div id="reconfirm"></div>
<input type="button" value="削除する" onClick="MemberDelete()">
</form>
hoge4.js
function MemberDelete() {
if(document.getElementById("acceptDelete").checked) {
var docID = document.forms['formUpdate'].elements['docid'].value;
var db = firebase.firestore();
db.collection("members").doc(docID).delete().then(() => {
document.location.reload(); // 新しいレコードの登録が成功したらリロードする
}).catch((error) => {console.log("Document Delete Error:", error)});
} else {
document.getElementById('reconfirm').insertAdjacentHTML('beforeend', '<p class="text-danger">↑チェックをしてください</p>');
}
}