JavaScriptでFirebase（Firestoreデータベース）の例

18856 ワード
Firebase JavaScript Firestore JavaScript テキストリンク

[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>');
  }
}

戻る

図解で、Google Firebaseが大好き！な理由