45日目です。
非同期通信の概念を理解するのにとても苦しんだので、昨日の自分に向けて分かりやすさ重視で説明します。

そもそも同期通信とは

何らかのリクエストをブラウザからサーバに投げた際、サーバの応答があるまでブラウザ側の処理が止まる通信のこと（応答があり次第、画面が一瞬白くなり、その後ページが遷移する）。ユーザーはページの遷移が完了するまで、操作ができない。HTMLの情報量が多いサイトだと、それだけ読み込みにも時間がかかる。

非同期通信の簡単な概念

ページ遷移（リロード）は行わずに、サーバから取得したデータを使ってページの一部分だけ変更して反映すること（この仕組みのことを、Ajaxという）。
JavaScriptがサーバと通信してくれているので、リクエストを投げた瞬間からユーザーは次の操作（登録、削除、編集など）ができる。そのため非同期通信を用いることでUX（User Experience、ユーザー体験）の向上に寄与できる。

非同期通信の簡単な流れ

下記の図を元に何をやっているか書き込むと、分かりやすかったです。

f:id:tattaka_s:20190807223026p:plain

リクエストが走る（メッセージを入力して送信ボタンを押すなど）
Ajax通信でコントローラーのアクションを動かす（メッセージの保存ならcreateアクションなど）。
Ajax通信では、入力されたデータや欲しい情報、レスポンスの情報が指定されたJSON形式（Rubyのハッシュのような、キーとバリュー）で送られる。
コントローラのアクションで指定されている「format.json」という記述で「json.builderファイル」に情報を渡す。
jbuilder（json.builderファイル）では渡された情報を元にJSON（JavaScript Object Notation＝JavaScriptオブジェクト記法）を作成する。
jbuilderで作成されたJSONがJavaScriptに返され、JavaScriptファイルに記載のdoneメソッドで受け取る。
JavaScript内でHTMLを生成してブラウザで変更箇所だけ変えて表示する。
（これによりリロードせずにページの一部を変えることができる）

3で送られる情報の例

$('#new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })

5で作成されるJSONの例

json.id @message.id
json.content @message.content
json.image_url @message.image_url
json.date @message.created_at.strftime("%Y/%m/%d %H:%M")
json.name @message.user.name

7でHTMLを生成してブラウザに返す例

function buildHTML(message) {
    var content = message.content ? `${ message.content }` : "";
    var image_url = (message.image_url) ? `<image class="lower-message_image" src="${ message.image_url }">` : "";
    var html = `<div class="message" id="${ message.id }">
                  <div class="upper-message">
                    <div class="upper-message__name">
                      ${ message.name }
                    </div>
                    <div class="upper-message__date">
                      ${ message.date }
                    </div>
                  </div>
                  <div class="lower-message">
                    <p class="lower-message__content">
                      ${message.content}
                      ${image_url}
                    </p>
                  </div>
                </div>`
    return html;
  }

参考：

[https://qiita.com/　tambo　/items/45211df065e0c037d032:title]

初心者目線でAjaxの説明 - Qiita

明日はインクリメンタルサーチの実装なので、非同期と併せて理解に努めます。