[2021]Ajax(非同期通信)フォロー機能(Rails・jQuery)

前提

• フォローボタンを実装していること
• jQueryを使用できるようにしていること

View.

<th class="follow"><%= render 'relationships/follow_button', user: @user %></th>

部分テンプレートを使用しているため
お好きなところに使用してください。

部分テンプレート作成

relationships/_follow_button.thml.erb

<% if current_user.following?(user) %>
    <%= link_to 'Unfollow', user_relationships_path(user.id), method: :delete, remote: true %>
　<% else %>
    <%= link_to 'Follow', user_relationships_path(user.id), method: :post, remote: true %>
<% end %>

• link_toを使用している場合はremote:trueを記載することで非同期通信になります

次はcontroller

relationships_controller.rb

 def create
    @user = User.find(params[:user_id])
    following = current_user.follow(@user)
    following.save
    flash[:success] = 'ユーザーをフォローしました'
  end

  def destroy
    @user = User.find(params[:user_id])
    following = current_user.unfollow(@user)
    following.destroy
    flash[:success] = 'ユーザーのフォローを解除しました'
  end

• 重要なところは"redirect_to"の部分を記載しないこと
• 処理が終わるとcontroller名と同じ名前のviewフォルダーの中の"アクション名/js/erb"へ処理が行われます

viewファイル作成

relationships/create.js.erb

$(".follow").html("<%= j(render 'relationships/follow_button', user: @user ) %>");

relationships/destroy.js.erb

$(".follow").html("<%= j(render 'relationships/follow_button', user: @user ) %>");

内容は同じですが新しく作る必要があります。
follow classが部分テンプレートのものに置き換わるようなイメージです。

補足

form_withを使用する場合はlocal:trueを書かないことで非同期通信になります。また、form_withはidなどが付与されているみたいですのでデベロッパツール（検証ツール）で確認することでcalssなど書く必要がなくなります。