###About
railsからjavascriptに対して変数を渡します。
html.erbファイル内にscriptタグでjavascriptを書いた場合に変数を渡せる方法です。
今回は、controllerで、モデルのレコードを数行取り出し、それをそのままJSに渡す方法を記載しています。
###Environment
この記事ではmacbook(unix)にインストールしたruby 2.5.1p57, Rails 5.2.3を使用しています。
#変数の渡し方
controller内での変数の定義
まずは変数をcontroller内で定義します。
今回は配列を渡してみます。
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
@sleeps = @user.sleeps.order('date DESC').includes(:user).limit(14).reverse
end
end
##html.erbで変数を受け取る
ここからは力技です。参考までにamchartsのスクリプトを拝借しています。
他に良い方法があると思いますので、最終手段くらいに思っていただければと思います。
また、良い方法がある方、コメントいただけると幸いです。
<!-- Chart code -->
<script>
//略
// Add data
// 推奨(ムダなスペースなどが含まれません。)
var sleepings = '<%== JSON.dump(@sleeps) %>';
// 次点(スペースなど余計なものが入る可能性がありますが、渡せる事には渡せます。)
var sleepings = '<%= @sleeps %>';
// 以下略
</script>
この様にすることで、javascriptの変数として、文字列を渡すことができます。
ただし、ここで注意しなくてはいけないのが、あくまで javascript側には文字列が渡されるだけ、ということです。
(また、今回はモデルの中身を渡しているため、カラムごとの値を抽出してJavaScriptに渡したい!という場合は、コントローラやhtml.erb内で変換してあげてください。)
html.erb内での変換
@sleeps = @sleeps.map {|sleep| sleep.id}
そのため、以下の様に文字列を分解して、配列に変換しています。
文字列の[]をそれぞれ置換の要領で削除し、カンマでsplitし、配列化します。
<!-- Chart code -->
<script>
//略
// Add data
var sleepings = '<%== JSON.dump(@sleeps) %>'.replace(/\[/g, "").replace(/\]/g, "").split(',');
// 以下略
</script>
これでjavascriptにrailsのcontrollerから値を渡す事ができます。
...ゴリ押し感が否めないですが。
##最後に
ここまでゴリ押し感が強いものを共有するべきか悩みましたが、同じ様な悩みを抱えている方が少しでもいらっしゃれば、その方の助けになるかもと思い書きました。
さらに良い方法がありましたら、是非教えてください!
###筆者について
TECH::EXPERTにて4月よりruby, railsを学習している未経験エンジニアです。
記載内容に不備・不足があればご指摘いただけると幸いです。
至らぬ点ばかりですので、改善点がありましたらどんどんご指摘下さい!