質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.22%

javascriptで文字列の中で変数を使う方法が知りたい。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,768

javascriptの''の中で変数を使う方法が知りたいです。javascriptでは式展開が使えないということですが、やはり最新のES6を使って式展開をする方法以外はないでしょうか?具体的には下記の場所で変数を使いたいです。よろしくお願いします。

$('ここで変数@indexを使いたい').html("<%= j(render partial: 'like', locals: { post: @post,i: @index,like:@likes }) %>");

@indexの定義部分

@index = params[:index]

viewファイル

<% if user_signed_in? %>
 <% if post.like_user(current_user.id) %>
  <%= button_to "/posts/#{post.id}/unlike",params:{index: i}, method: :delete, id: i, remote: true do %>
   <%= image_tag("icon_red_heart.svg") %>
   <span>
     <%= post.likes_count %>
   </span>
  <% end %>

viewファイルで出力されたHTML
each_with_indexでidをふっているので、下記と同じものでidだけが異なるものがひとつのページに多くあるというイメージです。

<form class="button_to" method="post" action="/posts/16/like" data-remote="true"><button id="0" type="submit">
   <img src="/assets/icon_heart-ce229fb5b842bba5a3bf498493eecc5a.svg" alt="Icon heart" />
   <span>
     0
   </span>
</button><input type="hidden" name="authenticity_token" value="blU6kMq62zJ/HKQ5dmLC0ymeRROBt6cq67/rrcIV2J5QrasNijT6Hx9Zdx/eymsZXM7FrBOejLMkp3MzQZZ8yA==" /><input type="hidden" name="index" value="0" /></form>

私のやりたいことはviewファイルのid: iをjsファイルで認識してくれることです!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • himakuma

    2016/10/31 11:16

    テンプレートエンジンを使用するということですか?@indexの定義部分の記載を教えてください。

    キャンセル

  • kei344

    2016/10/31 19:01

    Railsを使用した、Railsの変数の話なのであれば、質問タグに「Rails」を追加されてはいかがでしょう。

    キャンセル

  • kei344

    2016/10/31 19:18

    viewファイルで出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。

    キャンセル

回答 4

+4

記法的にRailsのようですが、「Rails側で生成してしまう」という手段は使えないのでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:54

    コメントコメントありがとうございます。
    具体的にはどういうことでしょうか?
    知識不足なので教えてもらえると幸いです。

    キャンセル

  • 2016/10/31 21:51

    無理矢理感はありますが、$("<%= @indexを使った式 %>")のようにすれば、とりあえずはできそうです。

    キャンセル

  • 2016/10/31 22:44

    # + <%= @index %>でid指定ができるということでしょうか?
    試してみます!

    キャンセル

checkベストアンサー

+1

単純に i で出力された値を使用したいのであれば。

[].forEach.call( document.querySelectorAll( '.button_to' ), ele => {
    let id = ele.querySelector( 'input[name="index"]' ).value;
    console.log( ele );
    console.log( id );
} );

動くサンプル:https://jsfiddle.net/Lbbcnjz3/

【querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい - Qiita】
http://qiita.com/yugo-yamamoto/items/b87470f118ac62dc6a8d


みんなが避ける jQuery で。

// jQuery
$( '.button_to' ).each( function() {
    let id = $( this ).find( 'input[name="index"]' ).val();
    console.log( this );
    console.log( id );
} );

ちなみにHTMLのclassやidはアルファベットからはじめたものを使用しないと認識できない場合があります。
なので id="0" と出力される部分は id="i0" とかにしておいたほうが良いです。質問文に書かれているHTMLであれば、id="i0" は不要です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/05 11:35

    コメント遅くなってしまいすみません。
    試行錯誤した結果、まだ解決までは至っていないのですが、jsで直接ajaxを書く方法に切り替えてやっていこうと思っています。

    キャンセル

+1

やはり最新のES6を使って式展開をする方法以外はないでしょうか?

JavaScriptではシングルクォート、ダブルクォート問わず式展開は存在しません。
AltJSでは式展開の使える言語が存在しますが、コンパイルすると下記のように変更されます。

// LiveScript
hoge = 123
console.log "#hoge"

// JavaScript (compiled)
var hoge;
hoge = 123;
console.log(hoge + "");

PHP等の他言語で使えるのに、JavaScriptでは使えないので要望としてあり、ES6で実装されたのでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:56

    コメントありがとうございます。
    では、$()の中で変数は使えないということでしょうか?
    ES6を導入する手段が一番効率的かどうか悩んでいます。

    キャンセル

+1

記述的にjQueryを使用しているようですが、
セレクタ部分の指定は単純に文字列で指定しても参照できると思いますよ?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:53

    コメントありがとうございます。
    $()の中に直接@indexを書くということでしょうか?

    キャンセル

  • 2016/10/31 21:48 編集

    Railsで画面を生成することはできているのですよね?であればJavaScriptをHTMLと同様にview上で生成してはどうですか?

    キャンセル

  • 2016/10/31 22:19

    挑戦してみたいと思います!
    調べたのですが、react.jsを使うのは難しいでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる