Firebaseで作る掲示板 #JavaScript

自分用のメモです。

導入は以下の記事を参考に。
・Firebaseの始め方

手っ取り早く試したい方はFirebase導入後、"/public/index.html" に以下のコードを貼り付ければ動きます。（Firebase設定の記述は削除）

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firebase BBS</title>
    <style lang="">
      .entry {
        border-top: 1px solid #ccc;
        padding-top: 10px;
        margin-top: 10px;
      }
      #comment {
        border-radius: 3px;
        padding: 5px 10px;
        width: 400px;
        font-size: 16px;
      }
      #submit {
        background: #eee;
        border-radius: 3px;
        display: inline-block;
        padding: 5px 10px; 
      }
      #submit:hover {
        cursor: pointer;
      }
    </style>

  </head>
    <body>
    <input type="text" id="comment" placeholder="コメント">
    <div id="submit">登録</div>
    <div id="entryArea"></div>

    <script>
      const db = firebase.database();
      const commentRef = db.ref();

      const submit = document.getElementById("submit");
      const entryArea = document.getElementById("entryArea");

      let id = 0;

      const getNow = ()=> {
        const dt = new Date();
        let formatStr = 'YYYY-MM-DD hh:mm:ss';
        formatStr = formatStr.replace(/YYYY/g, dt.getFullYear());
        formatStr = formatStr.replace(/MM/g, dt.getMonth());
        formatStr = formatStr.replace(/DD/g, dt.getDate());
        formatStr = formatStr.replace(/hh/g, dt.getHours());
        formatStr = formatStr.replace(/mm/g, dt.getMinutes());
        formatStr = formatStr.replace(/ss/g, dt.getSeconds());
        return formatStr;
      }

      const appendElm = (elm, dataArr)=> {
        for (let i = 0; i < dataArr.length; i++) {
          elm.appendChild(dataArr[i])  
        }
      }

      const createElm = (tag, clsName, html)=> {
        let elm = document.createElement(tag);
        if(clsName){
          elm.className = clsName;
        }
        if(html){
          elm.innerHTML = html;
        }
        return elm;
      }

      const createEntry = (comment, date)=> {
        let commentElm = createElm("div", "entry-comment", comment);
        let dateElm = createElm("div", "entry-date", date);
        let entryElm = createElm("div", "entry");
        appendElm(entryElm, [commentElm, dateElm]);
        appendElm(entryArea, [entryElm]); 
      }

      submit.addEventListener("click", ()=> {
        let comment = document.getElementById("comment").value;
        if(!comment) {
          alert("入力してください");
          return false;
        }
        let myComment = db.ref("/" + id);
        let date = getNow();
        myComment.set({comment:comment, date:date});
      }, false);


      // 以下からがコア

      commentRef.on("value", (snapshot)=> { 
        let comments = snapshot.val();
        if(comments !== null) {
          id = comments.length;
        }
      });

      commentRef.on("child_added", (snapshot)=> { 
        createEntry(snapshot.val().comment, snapshot.val().date);
      });

      commentRef.on("child_changed", (snapshot)=> { 
        createEntry(snapshot.val().comment, snapshot.val().date);
      });

    </script>
  </body>
</html>

フロントとかデザイナーの人がこれ覚えるだけでサービスとアプリ作れちゃいます。すごい便利。