RailsのViewファイルのインスタンス変数をJavaScriptから参照する

メモ。

別にRailsに限ったことではなくて、Webアプリケーションフレームワークとかを使っていて、テンプレートファイルで使ってる変数をJavaScriptから参照するやり方。
検索結果をlocalStorageでキャッシュしておきたいなど、いくつかの場面で必要になるかと思います。

（例）Viewファイルで、

<script>
    var piyo_id = <%= @piyo.id %>;
</script>

<div id="hoge">
    <%= render "hoge/hoge_piyo", piyo: @piyo %>
    <!-- いろいろ -->
</div>

って書くしかないのかと思ったけど、もっといい方法があった。

そう、HTML5の独自データ属性（data-* こんなやつ）。

Viewファイルで

<div id="hoge" data-hoge-id="<%= @piyo.id %>">
    <%= render "hoge/hoge_piyo", piyo: @piyo %>
    <!-- いろいろ -->
</div>

ってして、外部JSファイルから

var e = document.getElementById('hoge');
var piyo_id = e.getAttribute('data-hoge-id');

ってすればよかった。

ちなみに、jQueryだと、

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

で、
Minified.jsだと、

var piyo_id = $('#hoge').get("%hoge-id");

こう。

以上。