【バージョン】

ruby 2.3.1
Rails 5.0.4

【やろうとしたこと】

とあるjsファイルを作成してcapistranoを使用してAWSのサーバーにデプロイした。
すると「ExecJS::RuntimeError: SyntaxError: Unexpected character '`' 」とエラーが出てしまった。

以下　エラー時のJSファイル。

  function buildHTML(product){
    var html = `<a class="item-link" href="/products/${product.id}">`
  if ("受付中" == $(product.status).selector) {
  html += `<p class="order_now">${product.status}</p>`+
  `<p class="no_underline">残り  ${product.rem_num}</p>`
  }
  if ("受付終了" == $(product.status).selector) {
  html += `<p class="order_end">${product.status}</p>`+
  `<p class="no_underline">申し込み上限に達しました</p>`
  }
  html += `<section class="items">`+
    `<figure class="item-image">`+
      `<img>`+
        `<img height="223" width="340" alt="プロダクト写真" src = "${product.image.url}" >`+
    `</figure>`+
    `<h2 class="top_product_title">${product.title}</h2>`+
    `<div class="info">`+
      `<p class="place">`+
       `<i class="fa fa-map-marker"></i>`+
        `${product.area}`+
      `</p>`+
      `<p class="price">`+
        `<i class="fa fa-shopping-bag"></i>`+
        `¥ ${product.price}`+
      `</p>`+
    `</div>`+
  `</section>`+
`</a>`;
    return html;
  }
....以下略

ExecJS::RuntimeError: SyntaxError: Unexpected character '`' 」

「`(バッククォート)」を使うんじゃあない、と言われている。
なるほど。
じゃあシングルクォートか、ダブルクォートを使えばいいんだなと思ったがそうもいかなかった。
${product.status}の変数の中身が表示されないのだ。

どうしよーと思ってたら、ちょっと書き方を変えたら解決した。
考えてみればシンプル。
以外にインターネットで漁ってても同じようなエラーが出てこなかったので書いてみる。

(こんなことに躓くのはやはり開発経験２ヶ月の初心者だからか・・・)

以下はエラー解消後のJSファイル。

$(function() {
var itemlink = $(".item-link");
var all = "all"

  function buildHTML(product){
    var html = '<a class="item-link" href="/products/' + product.id + '">'
  if ("受付中" == $(product.status).selector) {
  html += '<p class="order_now">' + product.status + '</p>'+
  '<p class="no_underline">残り' + product.rem_num + '</p>'
  }
  if ("受付終了" == $(product.status).selector) {
  html += '<p class="order_end">' + product.status + '</p>'+
  '<p class="no_underline">申し込み上限に達しました</p>'
  }
  html += '<section class="items">'+
    '<figure class="item-image">'+
      '<img>'+
        '<img height="223" width="340" alt="プロダクト写真" src = "' + product.image.url + '" >'+
    '</figure>'+
    '<h2 class="top_product_title">' + product.title + '</h2>'+
    '<div class="info">'+
      '<p class="place">'+
       '<i class="fa fa-map-marker"></i>'
         + product.area +
      '</p>'+
      '<p class="price">'+
        '<i class="fa fa-shopping-bag"></i>'+
        '¥' + product.price +
      '</p>'+
    '</div>'+
  '</section>'+
'</a>';
....以下略

変更前

「`(バッククォート)」
「${product.status}」

変更後

「'(シングルクォート)」
「+ product.status +」

これで問題なくデプロイできた。
もっとうまいやり方があるらしい。
何かのgemを消すとうまくいくとか。
知ってたら誰か教えてください。