いいね機能の非同期化

１．非同期機能とは

• 画面全体を更新せずに、一部だけ更新すること
• Ajaxという手法が使用されます。

２．実装

２−１.リンクにremote: trueを追記する

• これにより、リクエストがhtml形式からjs形式になる

app/views/posts/show.html.erb

<% if current_user && @post.favorited_by?(current_user) %>
  <%= link_to post_favorites_path(@post), method: :delete, remote: true, class: "favorite_btn" do %>
  ♥<%= @post.favorites.count %> いいね
  <% end %>
<% else %>
  <%= link_to post_favorites_path(@post), method: :post, remote: true, class: "favorite_btn" do %> #ここ
  ♡<%= @post.favorites.count %> いいね
  <% end %>
<% end %>

２−２．ボタンを部分をテンプレート化する

• ２−１の部分を切り取りviews/favorites/_favorite.html.erbというファイルを作成
• 部分テンプレートのファイルではインスタン変数を使用することは適切ではないのでローカル変数で記述する。

views/favorites/_favorite.html.erb

<% if current_user && @post.favorited_by?(current_user) %>
  <%= link_to post_favorites_path(post), method: :delete, remote: true, class: "favorite_btn" do %>
  ♥<%= post.favorites.count %> いいね
  <% end %>
<% else %>
  <%= link_to post_favorites_path(post), method: :post, remote: true, class: "favorite_btn" do %>
  ♡<%= post.favorites.count %> いいね
  <% end %>
<% end %>

２−３．先程の部分テンプレートを呼び出すための記述をする

• ここでは、部分テンプレート自体にidをつけ投稿ごとにいいねをできるようにしている。
• これがないと、すべての投稿に対していいねをおこなってしまう.

views/posts/show.html.erb

<div id="favorite_btn_<%= @post.id %>">
    <%= render 'favorites/favorite', post: @post %>
</div>

2-4.JavaScriptファイルを作成

• remote: trueの設定により、リクエストがhtml形式ではなくjs形式になっているので対応するファイルを作成する
• 以下を新規で作成

views/favorites/create.js.erb

$('#favorite_btn_<%= @post.id %>').html("<%= j(render partial: 'favorites/favorite', locals: {post: @post}) %>");

views/favorites/destroy.js.erb

$('#favorite_btn_<%= @post.id %>').html("<%= j(render partial: 'favorites/favorite', locals: {post: @post}) %>");

以上で、非同期通信を実装できる

3.さいごに

• フォロー機能なども同様の手順で非同期化を実装できます。