5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-23

【バージョン】

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を消すとうまくいくとか。
知ってたら誰か教えてください。

5
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?