【備忘録】IFの冗長な文章を三項演算子で省略

現状

・LINEのようなチャットアプリを作成中
・メッセージを非同期通信で保管・表示させたい
・メッセージの「SEND」ボタンを押すと非同期通信が発火
・文字のみ、画像のみ、文字と画像のそれぞれのメッセージを表示する

以下のようなjavascriptを書いたところ
buildHTML()の動作のIF分が冗長すぎるとのレビューがあったので
三項演算子で修正

$(function() {
 function buildHTML(message){
    if (message.image.url) {
      if (message.body) {
        var html = `<div class="message">
                      <div class="upper-message">
                        <div class="upper-message__user-name">
                        ${message.name}
                        </div>
                        <div class="upper-message__date">
                        ${message.created_at}
                        </div>
                      </div>
                      <div class="lower-meesage">
                        <p class="lower-message__content">
                        ${message.body}
                        </p>
                        <img class = "lower-message__image" src = "${message.image.url}" >
                      </div>
                    </div>`
      } else {
        var html =  `<div class="message">
                      <div class="upper-message">
                        <div class="upper-message__user-name">
                        ${message.name}
                        </div>
                        <div class="upper-message__date">
                        ${message.created_at}
                        </div>
                      </div>
                      <div class="lower-meesage">
                        <img class = "lower-message__image" src = "${message.image.url}" >
                      </div>
                    </div>`
      }
    } else {
      var html = `<div class="message">
                    <div class="upper-message">
                      <div class="upper-message__user-name">
                      ${message.name}
                      </div>
                      <div class="upper-message__date">
                      ${message.created_at}
                      </div>
                    </div>
                    <div class="lower-meesage">
                      <p class="lower-message__content">
                      ${message.body}
                      </p>
                    </div>
                  </div>`
    }
    return html
  }


  $('.messages').animate({
    scrollTop: $('.messages')[0].scrollHeight
  });

  $("#new_message").on("submit", function(e) {
    e.preventDefault();
    var formData = new FormData($(this).get(0));
    var url = $(this).attr('action');
    
    $.ajax({
      url : url,
      type : 'POST',
      processData: false,
      data : formData,
      dataType : "json",
      processData : false,
      contentType : false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.messages').append(html);
      $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
      $("#new_message")[0].reset();
      $('.form__submit').prop('disabled', false);

    })
    .fail(function(){
      alert("メッセージ送信に失敗しました");
      $("#new_message")[0].reset();
      $('.form__submit').prop('disabled', false);
    })
  });
});

改善

buildHTMLの部分のIF文を三項演算子で修正

  function buildHTML(message){
    var message_body = message.body? message.body : "" ;
    var message_image = message.image.url? message.image.url : "" ;

    var html = `<div class="message">
                  <div class="upper-message">
                    <div class="upper-message__user-name">
                    ${message.name}
                    </div>
                    <div class="upper-message__date">
                    ${message.created_at}
                    </div>
                  </div>
                  <div class="lower-meesage">
                    <p class="lower-message__content">
                    ${message_body}
                    </p>
                    <img class = "lower-message__image" src = "${message_image}" >
                  </div>
                </div>`
    return html
  }

条件式 ? Trueの処理 : Falseの処理

【メモ①】
参考演算子の条件式は、
message.body?（メッセージという変数のbodyというカラムに値がありますか？）
というような書き方でも動く。
参考記事では、比較演算子やtrue falseで条件式を
書くサイトが多かったが上記のような条件式でも動いた！


【メモ②】
最初は、三項演算子のtrueの記述部分で${ }をつけていたためエラーに。
${ }は、変数で呼び出したあとの記述に記載しておけばOK

  function buildHTML(message){
    var message_body = message.body? <b>${message.body}</b> : "" ;
    var message_image = message.image.url? <b>${message.image.url} </b>: "" ;

【参考記事】
【JavaScript入門】条件(三項)演算子の使い方と活用例まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト