JSONをdoneメソッドで受取り、HTMLを作成する処理の流れについて

非同期通信の実装で分からなかったところをアウトプットしてみた。

以下は、JSONをdoneメソッドで受取り、HTMLを作成する処理のコードである。

$(function(){
  function buildHTML(comment){
    var html = `<p>
                  <strong>
                    <a href=/users/${comment.user_id}>${comment.user_name}</a>
                    ：
                  </strong>
                  ${comment.text}
                </p>`
    return html;
  }
  #間は省略する
    .done(function(data){
      var html = buildHTML(data);
      $('.comments').append(html)
      $('.textbox').val('')
    })
  })
});

doneメソッド以下の記述は、非同期通信に成功した時の記述である。非同期通信に成功した時の即時関数の第一引数(data)の中には、サーバから返されたデータが入っている。また、サーバから返されたデータとは、jbuilderで作成したJSON形式のデータを指す。

そして、上部において、受け取ったデータをHTMLに変換するコードを記述する。

自分的にはなぜ、受け取ったデータをHTMLに変換するコードを上部に書いているのかが今一よく理解できなかった。
この点について、ご指摘いただけると助かります。