さて、今回は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通信にもなるため、初めのページ読み込みのスピードも改善できますね。
ソースコード等は、以下の参考リンクのブログに今後掲載していく予定なので、そちらを定期的に確認してほしい。