link_toにremote: trueをつけて非同期通信
ツイッターのいいねみたいな機能をつけたくて、非同期通信を実装しようとして迷走しました。
初めはカリキュラムに出てきたAction cableを使ったのですが、出来上がってから欠陥に気づきました。ググったら「正解」的なやり方が出てきて、早く調べればよかったかなと思ったり。
Action cableについてもいつか書くかもしれないです。
この記事がすごく分かりやすかったです。
Railsで remote: true と js.erbを使って簡単にAjax(非同期通信)を実装しよう！(いいね機能のデモ付) - Qiita
簡単に非同期通信をする方法
Railsのヘルパーメソッドであるlink_toに、remote: trueをつけます。
例えばこのような感じです。
<%= link_to "非同期通信", post_reactions_path(post.id), remote: true %>
これにより、普段HTML形式でリクエストを送っているところを、js形式のリクエストにすることができます。
それで何が変わるかというと、コントローラーによる処理が済んだ後に、
普段はapp/views/コントローラー名/アクション名.html.erbというhtmlのファイルを読んでいたのに対し、
app/views/コントローラー名/アクション名.js.erbというjsのファイルを読むようになります。
つまり、リンクを押してもページは更新されないまま、jsのファイルが実行されます。
しかもただのjsではなくjs.erbなので、erbでRubyの記述を埋め込み、コントローラーで定義されたインスタンス変数も使えます。便利すぎ。
js.erbのファイルは自分で作成する必要があるので、コントローラー名とアクション名に合わせて作成します。
あとはそのファイルにjsの記述をしていけばOKです。
