ChatSpaceの JavaScript復習

はじめに

TECH:CAMPのカリキュラムで作ったチャットスペースのJavaScript非同期通信の自分なりの理解です。htmlは自分で考えたhamlの記述になっているのでご了承ください。
理解が間違っていたらすみません。

コード解説

$(function(){
    var buildHTML = function (message) {
      if (message.content && message.image) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                    <div class="chat-main__chat-home__message__block">
                      <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                    </div>
                      <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                      </div>
                    </div>
                      <div class="chat-main__chat-home__message__current-text">
                        <p class="chat-main__chat-home__message__current-text__content">
                        ${message.content}
                        </p>
                        <img src=${message.image} class="chat-main__chat-home__message__current-text__image" >  
                      </div>
                    </div>`
      } else if (message.content) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                    <div class="chat-main__chat-home__message__block">
                       <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                  </div>
                    <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                    </div>
                  </div>
                    <div class="chat-main__chat-home__message__current-text">
                      <p class="chat-main__chat-home__message__current-text__content">
                        ${message.content}
                      </p>
                  </div>
                </div>`
      }else if(message.image) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                     <div class="chat-main__chat-home__message__block">
                       <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                    </div>
                    <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                    </div>
                  </div>
                    <div class="chat-main__chat-home__message__current-text">
                    <img src=${message.image} class="chat-main__chat-home__message__current-text__image" >  
                  </div>
                </div>`
        };
      return html;
    };
$('#new_message').on('submit', function(e){
  // デフォルトのイベント停止
    e.preventDefault();
    // #new_messageというidがついたフォームの情報を取得
    var formData = new FormData(this);
    // 送信先であるthisのaction属性を取得
    var url = $(this).attr('action')
    $.ajax({
      //action属性のurlがそのまま入る
      url: url,
      // 投稿だからHttpメソッドはpost
      type: "POST",
      data: formData,
      dataType: 'json',
      //下記2つはformDataを使っている場合、falseにする
      processData: false,
      contentType: false
    })
    // 通信に成功した時、引数にformに入力した情報の入ったdataを受け取る
     .done(function(data){
      //dataを変数htmlに代入
       var html = buildHTML(data);
       //メッセージの表示される箇所に付加する
       $('.chat-main__chat-home').append(html);
       //自動でスクロールするアニメーションを付加する
       $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight});
       //入力フォームの中をリセットする
       $('form')[0].reset();
       //ボタンを再利用できる様にする
       $('input').prop('disabled', false);
    })
    // 失敗したとき
     .fail(function() {
      //  アラートで失敗したことを伝える
      alert("メッセージ送信に失敗しました");
      //ボタンを再利用できる様にする
      $('input').prop('disabled', false);
    });
  });

    // 自動更新機能
    var reloadMessages = function() {
      //_message.html.hamlにカスタムデータ属性で付与したidを取得している
      var last_message_id = $('.chat-main__chat-home__message:last').data("message-id");
      $.ajax({
        //ルーティングで設定した/groups/id番号/api/messagesとなるよう文字列を書く
        url: "api/messages",
        //表示なのGET
        type: 'GET',
        dataType: 'json',
        data: {id: last_message_id}
      })

      .done(function(messages) {
        //メッセージが０文字ではないとき
        if (messages.length !== 0) {
          // 空の変数を作成
          var insertHTML = '';
          //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを空の変数に足し合わせる
          $.each(messages, function(i, message) {
            insertHTML += buildHTML(message)
          });
          // HTMLに追加
          $('.chat-main__chat-home').append(insertHTML);
          // スクロールアニメーション
          $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight});
        }
      })
      .fail(function() {
        alert('error');
      });
    };
    // 現在のURLが一致する場合
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    //7秒ごとに更新
    setInterval(reloadMessages, 7000);
  }
});

最後に

JavaScriptは教室で詳しく教えてもらうことができなかったので、まだまだ理解が曖昧です。
これを素人に書けと言われても、コピペせざるを得ないと思ってしまいます。
しかし、コールバック関数、非同期通信、apiの作成と取得、カスタムデータ属性、そして多くのメソッドなど、JavaScriptのたくさんの機能が盛り込まれているので、一つずつ紐解きながら理解を深めていきたいです。