jsファイルにおける変数の読み取り規則

Question

初めまして。
jsファイルにカスタムデータ属性を反映させるため、下記のコードを書きました。
この時var html内の${image}を${message.image}にしていたところ、const imageが読み取られませんでした。
それを${image}に変更すると変数が読み取られるようになったのですが、これはなぜなのでしょうか？

jsなどに詳しくなく、解決はしたものの原因を知りたいと思い質問致しました。
初歩的な質問で申し訳ありませんが、よろしくお願いいたします。

function buildHTML(message) {
  
const image = (message.image) ? `<img src=${message.image} class="lower-message__image">`:"";
var html = `<p class="message"> 
                <div class="upper-message"> 

                  <div class="main-message__user">
                    ${message.user_name}
                  </div>

                  <div class="main-message__day">
                    ${message.time}
                  </div>

                 </div>

                <div class = "main-message"> 
                 <p class = "lower-message__content">
                   ${message.content}
                </p>
                ${image}
                </div>

              </div>`
  return html;
  
}

Answer 1

逆に伺いますが、どうして「message.imageと書いてimageが参照される」と考えたのでしょうか。

その誤解を掘り起こしておくことで、あとあとにもつながると思いますので、あえて質問形式で投げかけます。

Comments

[rurururururu]

ご回答ありがとうございます。
実は勉強を始めたばかりで、今調べながら手探りで進めている状態です...そのため処理の流れやコードの意味が理解できていません。

お伺いしたいのですが、var html内の${image}などはどこを参照しているのでしょうか。別ファイルから引っ張ってきていると考えていたのですが、違うのでしょうか...
無知な質問で申し訳ありませんがご教示いただけますと幸いです。

[maisumakun]

> 別ファイルから引っ張ってきていると考えていたのですが、違うのでしょうか...

いえ、同じスコープ内にある変数を拾っているだけです。Template Literalといいます。

[rurururururu]

ありがとうございます。
テンプレートリテラルというものを調べてみましたが、シンプルに記述ができるようになるのですね。

ただ、まだよくわからないのですが...
そもそもこのimageの参照は`<img src=${message.image} `の部分で行われますよね？その参照元がvar html内の${image}だと考えましたが、こちらも認識違いでしょうか...

[maisumakun]

> そもそもこのimageの参照は`<img src=${message.image} `の部分で行われますよね？

どういう意味でしょうか？

[rurururururu]

長いことお付き合いくださりありがとうございます。

img srcは画像の表示を行う部分ですよね？
こちらで使っている${message.image}にデータを渡しているのが${image}の部分かと考えたのですが、違うのでしょうか...

[maisumakun]

> こちらで使っている${message.image}にデータを渡しているのが${image}の部分かと考えたのですが、違うのでしょうか...

違います。${message.image}には「message.image」の値が埋め込まれる、${image}には「image」の値が埋め込まれる、それだけの話です。

[rurururururu]

ようやく理解しました！
こんな初心者に最後までお付き合いくださり、本当にありがとうございます。
教えていただいたことを元に進めます。
ご親切感謝いたします。