JAvascript と html

このコード重複しまくってるのでリファクタリングしたいです。何かいい例ないですか？？


if ( message.image == null){
      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.created_at}
                      </div>
                    </div>
                    <div class="lower-message">
                      <p class="lower-message__content">
                      ${message.content}
                      </p>
                    </div>
                  </div> `
      return html;
     }else{
      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.created_at}
                      </div>
                    </div>
                    <div class="lower-message">
                      <p class="lower-message__content">
                      ${message.content}
                      </p>
                      <img src="${message.image}" class="lower-message__image">
                    </div>
                  </div> `
      return html;
    }

行動規範の内容に同意します

回答1件

ベストアンサー

三項演算子を使う事で解決出来るでしょう。

if...elseの違いはp要素の直後にimgタグがあるかないかだけです。
テンプレートリテラルの${}は変数の展開ではなく、
式の評価なので三項演算子を使えば満たせます。

JavaScript
1var html = `
2<div class="message">
3  <div class="upper-message">
4    <div class="upper-message__user-name">
5      ${message.user_name}
6    </div>
7    <div class="upper-message__date">
8      ${message.created_at}
9    </div>
10  </div>
11  <div class="lower-message">
12    <p class="lower-message__content">
13      ${message.content}
14    </p>
15    ${message.image == null ? "" : `<img src="${message.image}" class="lower-message__image">`}
16  </div>
17</div>`;