RailsでERBからJavaScriptに変数の値を渡す方法

このエントリーはWeb開発初級者向けです。

JavaScriptでViewを動的に更新したい場合、Controllerで定義したインスタンス変数の値などをJavaScript側に渡したい場合があると思います。

数値や文字列の場合はhiddenフィールドなどに出力していますが、Hashの場合はそのまま出力してもJavaScript側で取得すると文字列になり、そのままでは使えません。

Hashを受け渡したい場合は、事前にHashを.to_jsonでJSON化し、JavaScript側でparseJSONしても良いのですが、
下記のようにカスタムデータ属性を使うと、そのままHashとしてアクセスできます。

変数

@test = { 'hoge' => 'huga', 'hogehoge' => 'hugahuga' }

ERB

<div id="hoge" data-hoge-id="<%= @test.to_json %>"></div>

JavaScript

var test = $('#hoge').data('hoge-id');

実行結果

test
Object {hoge: "huga", hogehoge: "hugahuga"}