Ajaxでブックマークボタンを実装する

Ajaxとは

ブックマーク機能をajaxを使用した処理に変更すると、ページの一部だけ（☆★部分）が更新され、実際の処理はバックグラウンドで行われます。（非同期通信）
★と☆が入れ替わるだけで、実際の処理（ブックマークの追加・解除）はユーザーの見えないところで行われます。
ユーザーはページ遷移の待ち時間がなくなり、ストレスフリーに。UXの向上につながるといったメリットがあります。
参考『現場で使えるRuby on Rails5 速習実践ガイド』

前提

ブックマーク機能は実装済。

実装の流れ

Ajaxでサーバーにリクエストを送る処理を追加
実行したい内容を記載した jsファイルを用意する
リダイレクト処理していたアクションを変更する

では進めていきます。

Ajaxでサーバーにリクエストを送る処理を追加

これは簡単です。ブックマークリンクは既に作成していますが、そこにremote: trueオプションを追加します。

<%= link_to  略,
            id: 略
            method: :delete, 
            remote: true do %> 　#追加！
  <%= icon 'fas', 'star' %>
<% end %>

これで、RailsがJS方式のリクエストを送信できるようにしてくれます。

今まで
ブックマークボタンクリック
→HTMLリクエストが送信
→likes_controller内create（or destroy)アクション
→DBに保存（or 削除）される

今回
ブックマークボタンクリック
→JSリクエストが送信
→likes_controller内create（or destroy)アクション
→（同時）create.js.erbやdestroy.js.erbを探して、処理
→（同時）DBに保存（or 削除）される

※次のjsファイル配置場所は、このリクエストの流れを意識する。ここをミスってテンプレートエラーで３０分くらい無駄にした。

実行したい内容を記載した jsファイルを用意する

views/posts内ではなく、views/likes内に配置することに注意！！

$("#like-<%= @post.id %>").replaceWith("<%= j(render('posts/unlike' )) %>");

$("#like-<%= @post.id %>").replaceWith("<%= j(render('posts/like' )) %>");

replaceWithは要素を置換するメソッド。
$(置換対象).replaceWith(置換後の要素)
パーシャルを読み込んで、置換している

j()はescape_javascriptのエイリアス

https://apidock.com/rails/ActionView/Helpers/JavaScriptHelper/escape_javascript

ActionView::Helpers::JavaScriptHelper

※閉じカッコ　）　の数をミスってここもエラーを出してしまった・・・
※<%= @post.id %>を#{post.id}のままコピペしてここもエラー。

likes_controllerの修正

redirect_toの処理をごそっと削除

エラー解消

No template found for LikesController#destroy

f:id:Study-Diary:20200818124942p:plain — テンプレートエラー

テンプレートは用意しているのになぜ・・？

likes_controller内のアクション→remote: trueオプションにより、likesフォルダ内のファイルを探すという流れを意識する。

案の定、jsファイルをpostフォルダに置いていました…

参考

Rails で JavaScript を使用する - Railsガイド

Programming Journal

学習したことの整理用です。