【Firebase+Firestore】画面からFirestoreドキュメントを更新する

HTMLに取り付けたjsで、画面操作の結果を受け取ってfirestoreドキュメントを更新します。

function inputCheck(){
   for(let index in inputFormElements){
       let elem = inputFormElements[index]
       if(typeof(elem) != "object"){continue} 'リストの中に変なのがあったら無視
       elem.addEventListener("change", updateFirebase)
   }
}

function updateFirebase(event){
   let dom_id = event.srcElement.id;
   let value = event.target.value;
   
   let firestoreFieldName = "フィールド名";
   let firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名');
   let updateObject = {}
   updateObject[firestoreFieldName] = value
   console.log(firestoreRef)
   
   return firestoreRef.update(updateObject)
       .then(()=>{alert(firestoreFieldName + "を更新しました")})
       .catch((error)=>{alert("更新に失敗しました。エラーコード→【" + error + "】")});
}

var inputFormElements = document.getElementsByClassName("input")
window.addEventListener("DOMContentLoaded", inputCheck)

ッてな感じで。流れはざっくり

1・監視するフォームを取得して変数に入れる

2・取得したフォームにEventListenerを追加する

3・EventListenerが発火したらupdateFirebaseが動く

今回は複数フォームを監視する必要があるので、

 window.addEventListener("DOMContentLoaded", inputCheck)

でwindow自体にEventListenerを設置して、画面読み込み時にinputCheckを起動、inputCheckの中で監視したいフォームのリストをぐるぐるして一個ずつEventListenerを設置、という面倒なことしてます。
「更新ボタン押したら更新」っていうだけで良ければ、buttun要素にonclick="updateFirestore"付けておけばいいです。ボタンをクリックしたらupdateFirebaseが発火します。

本命の処理

function updateFirebase(event){
   let dom_id = event.srcElement.id;
   let value = event.target.value;
   
   let firestoreFieldName = "フィールド名";
   let firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名');
   let updateObject = {}
   updateObject[firestoreFieldName] = value
   console.log(firestoreRef)
   
   return firestoreRef.update(updateObject)
       .then(()=>{alert(firestoreFieldName + "を更新しました")})
       .catch((error)=>{alert("更新に失敗しました。エラーコード→【" + error + "】")});
}

無駄にdom_id取ってますが、eventから該当のフォームのid特定する方法忘れないようにするためのメモです。

updateFirebase()の引数にeventを取っておくと、EventListenerが変更を感知した時に変更情報をeventに入れてくれます。便利～。
そうすると、event.srcElementやtargetの中からidとかclassとかvalueとか色々取れます。
他にもconsole.logして中身掘ってみると、割と何でも取れるってことが分かります。便利～

大筋は、

firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名')

で参照を作って、

   let updateObject = {}
   updateObject[firestoreFieldName] = value

で載せたいデータ作って

 firestoreRef.update(updateObject)

で更新掛けて、その結果をthenとcatchで受け取る、と。

ｳﾜｰｰｰプロミスだーーーーーー！！！！！

……だけど、とりあえずｳﾜｰｰｰプロミスだーーーって思っても、今は

firestoreRef.update(updateObject)
.then("成功時にやりたいことをアロー関数で")
.chach("失敗時にやりたいことをアロー関数で")

って覚えておけば大丈夫だぞ！

ところで、ｳﾜｰｰｰｰプロミスだーーーー！！！ってつい最近叫んだ記憶があったんですが

これだった。