railsの変数をjsに渡すには、js.erbを使えば簡単だった件

さて、今回はWeb開発に関する話!Railsで開発をしている最中なのですが、フロントエンドをいじくりたい場合、Javascriptを利用することは珍しくない。そして私もまたそんな一人だったのです・・・

でも一つ困ったことが起こりました。Railsで使っているデータベースの中身のデータを使ってページに動きをつけたかったのですが、Railsのコントローラーでデータベースからデータを取得し変数に格納、これをどうやってjsに渡すか悩んでました。

はじめはViewに一回埋め込んでた

色々調べた結果、一番わかりやすく簡単なのが、データをViewに埋め込んで、display:noneで隠しておいて、値をjsで取得する方法。コードを書くと以下のようになりました。
・html

input class="data" type="hidden" name="data" value="=@data">

@dataにはrailsのコントローラーで取得したデータが入っています。

これをjavascriptで取得すれば完了です。以下のコードはjQueryを使っています。これでjs内でRailsの変数を使うことができますね。

var data=$(".data").val();

ただしこれはデータが増えるほど読み込みが遅くなってしまうし、結構無駄なことをしているらしい。

js.erbを使うとスッキリした

erbという拡張子をつければ、Rubyのコードが使えるらしい。どおりでslimとかを使うときもslim.erbとかなってました。

それをうまく利用すれば、一発でjsにrailsから変数を渡せます。以下のコードはhtmlをslimで書いています。
・slim

= link_to “JSで描画する“, js_write_path, id: “js_write”, remote: true, method: :post

・rails

def js_write
@data = "なんらかのデータ配列取得"
end

・js_write.js.erb

<% @topics.each do |t|%>
$('.data').append("<%=t%>");
<% end %>

上記のコードを少し解説すると、まずhtmlにはjs.erbファイルを発火させるためのコードを書いています。slimでlink_toと書くとタグのリンクが生成されるので、このリンクをクリックされるとjs_write_pathのアクションが実行されることになります。
js_write
のアクションが実行されると、@dataという変数に何かのデータを格納し、js_write.js.erbを実行するという流れになります。
そしてjs_write.js.erbにはjsのコードにrubyのコードを混ぜられるため、変数が使えます。

まとめ

railsの変数をjsに渡す時こんな便利な方法があったなんて知りませんでした。しかもこれならajax通信にもなるため、初めのページ読み込みのスピードも改善できますね。

ソースコード等は、以下の参考リンクのブログに今後掲載していく予定なので、そちらを定期的に確認してほしい。

参考リンク



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です