三項演算子について、学習したので、備忘録もかねてまとめます。
今回は基本となる記法だけでなく、変数を活用した記法も以下に記載します。
（変数を活用した記法は自分が実装した時に非常に苦戦しました。今回の記事を書くきっかけです。。）

三項演算子とは

if文を簡易的に記述するときに使用します。
三項演算子は３つの項目に分かれており、これが三項演算子における三項の意味する部分となってます。
その三項とは条件と２つの可能性のことを指しており、これを使用することでIf文を簡易化します。
それでは早速使い方を記載していきます！

使い方

まず、三項演算子の記載法について、以下に記載いたします。

三項演算子の書き方

条件式 ? trueの時の値 : falseの時の値

続いて具体例を用いて、if文から三項演算子に変換してみます。

if文

if apple_stock > 1
  :eat_apple
else
  :buy_apple
end

上記例の場合、三項は以下のようになります。

条件式　if apple_stock
trueの時の値　:eat_apple
falseの時の値 :buy_apple

上記を踏まえて三項演算子を利用します。

三項演算子

条件式 ? trueの時の値 : falseの時の値
apple_stock >1 ? :eat_apple : :buy_apple

以上がif文を三項演算子で記載するときの基本的な方法となります。
三項演算子は上記のように条件・true・falseが一つずつの時に利用します。
複数の要素がある場合は、if文をそのまま利用しましょう。

以降では、当方が苦労した変数を利用した三項演算子について記載します。

変数を使用した三項演算子の活用法

以下は当時自分がコードを書いていた内容を例としてます。
画像がある場合とない場合で条件分岐させ、それぞれの条件にあうよう、テンプレートリテラルを使ってコードを書いていました。
最初に自分が作ったのが以下。大分冗長的ですね。。。

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

上記を変数を使用した三項演算子で記載をすると以下のようになります。
考え方としてはimageという変数を三項演算子で定義します。

変数：image
条件：message.image
true: `<img class="lower-message__image" src=${message.image}>`
false: ``<=空のvalを返すことでimageがない時は画面に何も反映しないようにします。

let image = message.image ? `<img class="lower-message__image" src=${message.image}>` : ``

それでは、上記で定義した変数を組み込んでみましょう。

  function buildHTML(message){
    let image = message.image ? `<img class="lower-message__image" src=${message.image}>` : ``

    let 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-message">
                <p class="lower-message__content">
                ${message.content}
                </p>
                ${image}
                </div>
                </div>`;
      return html
    }

大分、すっきり書けました！

今回、自分のやり方では上記方法でリファクタリングしましたが、より良い方法などございましたら、
ご教示いただけますと幸いです！

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。

三項演算子とは-基礎＋応用（変数を活用した記法）

三項演算子とは

使い方

変数を使用した三項演算子の活用法

参考