Help us understand the problem. What is going on with this article?

デプロイしてExecJS::RuntimeError: SyntaxError: Unexpected character '`' が出たとき

More than 1 year has passed since last update.

【バージョン】

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}の変数の中身が表示されないのだ。

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

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

以下はエラー解消後の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を消すとうまくいくとか。
知ってたら誰か教えてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away