Railsでいいね機能をAjax（非同期通信）化する

これまでに作った機能について簡単にまとめていく。

今回は、

いいね機能をAjax化する

前提条件

いいね機能があること
まだの方はこちら

使用モデル

Userモデル

Blogモデル

Likeモデル（中間テーブル）

いいね機能のビューをパーシャル化

app/views/blogs/_form.html.erb

<% unless @blog.user_id == current_user.id %>
  <% if @like.present? %>
    <%= link_to 'いいねを取り消す', like_path(id: like.id), method: :delete",  remote: true %>
  <% else %>
    <%= link_to 'いいね', likes_path(blog_id: blog.id), method: :post",  remote: true %>
  <% end %>
<% end %>

インスタンス変数の直接受け取りから変数の受け取りに変更
remote: trueでjsのリクエストに変更

パーシャルの呼び出し

app/views/blogs/show.html.erb

フォーマットの指定

app/controllers/likes_controller.rb

class LikesController < ApplicationController
 
  def create
    like = current_user.likes.create(blog_id: params[:blog_id])
    respond_to do |format|
      format.js { render :like }
    end
  end
 
  def destroy
    like = current_user.likes.find_by(id: params[:id]).destroy
    respond_to do |format|
      format.js { render :like }
    end
  end
 
end

JavaScriptの処理を作成

app/likes/like.js.erb

$("#like_area").html("<%= j(render 'likes/like', { like: @like, blog: @blog, user_id: current_user.id }) %>")

以上で作成完了