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

 [javascript + firebase]のサンプルコードを見つけ難かったのでメモるシリーズ

# Firestoreとは
Google Firebase の NoSQLデータベースです。[コレクション]というフォルダの中に、資料[ドキュメント]が複数保存されていて、そのドキュメントに[フィールド]というデータが記載されているイメージ。[コレクション] → [ドキュメント] → [フィールド]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/1bf22801-975a-f777-4996-cbe1d2cfa314.png)

### １．データ新規追加（サンプルＣ）
新しいドキュメントを追加する

``` 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が大好き！な理由](https://qiita.com/1Kano/items/1a482b1caffc251e1c75)