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