メッセージの非同期化(大まかなコードの意味)

チャットアプリのメッセージの非同期化を実装中で、jsコードの処理の流れを説明する。

```js

$(function() {
    function buildHTML(message){
    var html = `<div class="message">
                  <div class="upper-message">
                      <div class="upper-message__user-name">
                          ${ message.user_name }
                      </div>
                      <div class="upper-message__date">
                          ${ message.time }
                      </div>
                  </div>
                  <div class="lower-message">
                      <p class="lower-message__content">
                          ${ message.content }
                      </p>
                  </div>
               </div>`
        return html; 
    }
    $("#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
        })
        .done(function(data){
          var html = buildHTML(data);
          $('.messages').append(html);
          $("#new_message")[0].reset();
          $('.form__submit').prop('disabled', false);
          $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
        })
        .fail(function(){
          alert('error')
          $('.form__submit').prop('disabled', false);
      })
    })
  })

```



#1.作成したメッセージをJSON形式で返す

submit（送信ボタン）を押した時、イベントが発火する。イベントの仕組みは、メッセーシが入力されて、送信ボタンが押された時にイベントが発火する

```js
$("#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
        })
```

#2.返ってきたJSON形式のデータをdoneメソッドで処理する。

```js
.done(function(data){
          var html = buildHTML(data);
          $('.messages').append(html);
           <!--メッセーシが送られたら、htmlの変数をappend(追加する)  -->
          $("#new_message")[0].reset();
           <!--新しく送られたメッセーシを配列の要素にして配列に加え、resetメソッドによって、送信した後の入力フォーム内のメッセージをリセット(空白)状態にする。  -->
          $('.form__submit').prop('disabled', false);
          $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
        })
          <!--メッセーシが送られたら、配列の高さの分だけ、画面がスクロールする。 -->
```

#3.htmlという変数の定義
doneメソッドで処理する場面において、「html」という変数を用いたので、その変数の定義を行う。定義内容は、HTML要素(ユーザー名、送信時間、メッセージ内容)を代入する。

```js
$(function() {
    function buildHTML(message){
    var html = `<div class="message">
                  <div class="upper-message">
                      <div class="upper-message__user-name">
                          ${ message.user_name }
                      </div>
                      <div class="upper-message__date">
                          ${ message.time }
                      </div>
                  </div>
                  <div class="lower-message">
                      <p class="lower-message__content">
                          ${ message.content }
                      </p>
                  </div>
               </div>`
        return html; 
    }
```


#4.メッセージの非同期に失敗した時の処理

メッセージ送信フォームに何も入力せずに送信ボタンを押すと、エラーのアラートを表示される。

```js

.fail(function(){
          alert('error')
          $('.form__submit').prop('disabled', false);
      })
```