railsのcontrollerからjavascriptに対して変数を渡す

About

railsからjavascriptに対して変数を渡します。
html.erbファイル内にscriptタグでjavascriptを書いた場合に変数を渡せる方法です。

今回は、controllerで、モデルのレコードを数行取り出し、それをそのままJSに渡す方法を記載しています。

Environment

この記事ではmacbook(unix)にインストールしたruby 2.5.1p57, Rails 5.2.3を使用しています。

変数の渡し方

controller内での変数の定義

まずは変数をcontroller内で定義します。
今回は配列を渡してみます。

users_controller.rb

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のスクリプトを拝借しています。
他に良い方法があると思いますので、最終手段くらいに思っていただければと思います。
また、良い方法がある方、コメントいただけると幸いです。

show.html.erb

<!-- Chart code -->
<script>
    //略
    // Add data
    // 推奨(ムダなスペースなどが含まれません。)
    var sleepings = '<%== JSON.dump(@sleeps) %>';
    // 次点(スペースなど余計なものが入る可能性がありますが、渡せる事には渡せます。)
    var sleepings = '<%= @sleeps %>';
    // 以下略
</script>

この様にすることで、javascriptの変数として、文字列を渡すことができます。
ただし、ここで注意しなくてはいけないのが、あくまで　javascript側には文字列が渡されるだけ、ということです。

（また、今回はモデルの中身を渡しているため、カラムごとの値を抽出してJavaScriptに渡したい！という場合は、コントローラやhtml.erb内で変換してあげてください。)

html.erb内での変換

筆者はこの様に変換しています。

show.html.erb

@sleeps = @sleeps.map {|sleep| sleep.id}

そのため、以下の様に文字列を分解して、配列に変換しています。
文字列の[]をそれぞれ置換の要領で削除し、カンマでsplitし、配列化します。

show.html.erb

<!-- Chart code -->
<script>
    //略
    // Add data
    var sleepings = '<%== JSON.dump(@sleeps) %>'.replace(/\[/g, "").replace(/\]/g, "").split(',');
    // 以下略
</script>

これでjavascriptにrailsのcontrollerから値を渡す事ができます。
...ゴリ押し感が否めないですが。

最後に

ここまでゴリ押し感が強いものを共有するべきか悩みましたが、同じ様な悩みを抱えている方が少しでもいらっしゃれば、その方の助けになるかもと思い書きました。
さらに良い方法がありましたら、是非教えてください！

筆者について

TECH::EXPERTにて4月よりruby, railsを学習している未経験エンジニアです。
記載内容に不備・不足があればご指摘いただけると幸いです。
至らぬ点ばかりですので、改善点がありましたらどんどんご指摘下さい！