【rails】jQueryでいいね機能を非同期化しよう

やりたいこと

いいねを非同期でやりたい！！
railsの勉強し始めてしばらく同期通信しかやっていませんでした。。
そんな時、Ajaxという言葉を見つけました。
Ajax？何やと調べてみると非同期通信の意味らしい
非同期通信があると一つのページでいろいろなことができるようになる！！
ページに新しい情報を増やす時はだいたい非同期通信が使われています

この記事を理解して非同期通信できるようになってください！！！

方法

今回の方法は以下の通りです
1. ボタンをクリックでAjax（非同期通信）でアクションへ送信
2. アクションで処理を進め、ビューへデータを返す
3. Ajaxが成功したらHTMLを書き換える

ボタンをクリックでAjax（非同期通信）でアクションへ送信

ビューファイルから押すとAjaxでアクションへ送信するボタンを実装します
では、説明していきます

link_to

一般的な方法でいいね機能を実装するのであれば、このメソッドを使っていると思います
追加するのはremote trueとclass: "post_favorites_create"です
remote trueは非同期通信にするための記述です。
class: "post_favorites_create"はJaveScriptで反応させるために設定しています
クラス名は好きな名前にしてください

<%if @post.favrite?(current_user)%>current_userが@postに対していいねをしてるかどうかのチェックです。
いいね実装時に条件分岐していると思うので、それに合わしてください。

posts/show.html.erb

<div class="favorite">
    <%if @post.favrite.nil?%>
        <%= link_to post_favorites_path(@post), id: "post_favorites_deatroy", method: :delete, remote: true do %>
            <span>❤︎</span>
        <%end%>
    <%else%>
        <%= link_to post_favorites_path(@post), id: "post_favorites_create", method: :post, remote: true do %>
            <span style="color:red;">❤︎</span>
        <%end%>
    <%end%>
</div>

アクションで処理を進め、ビューへデータを返す

app/controllers/favorites_controller.rb

def create
    @post_favorites = Favorite.new(user_id: current_user.id,post_id: params[:post_id])
    @post_favorites.save
    result = [done: "save",user_id: current_user.id, post_id: params[:post_id]]
    render :json => result
end

def destroy
    @post_favorites = Favorite.find_by(user_id: current_user.id, post_id: params[:post_id])
    @post_favorites.destroy
    result = [done: "destroy",user_id: current_user.id, post_id:params[:post_id]]
    render :json => result
end

resultを定義するときの
doneはビューにresultを返した時に判断するための値です

render :json => result
resultをjson形式でビューに返すということです。

Ajaxが成功したらHTMLを書き換える

$(document).on('ajax:success', '.favorite a', function(e) {
    Ajaxに成功した時の処理
});

favoriteクラスないのaタグからのajaxが成功した時にfunction(e)を実行するという意味です
eはajaxで返ってきた値をeとして扱う

application.js

$(document).on('ajax:success', '.favorite a', function(e) {
    if (e.detail[0][0].done == "save"){
        var post_fav = document.getElementById('post_fav')
        post_fav.innerHTML = '<a id="post_favorites__deatroy" data-remote="true" rel="nofollow" data-method="delete" href="posts/'+e.detail[0][0].post_id+'/favorites"><span style="color:red;">❤︎</span></a>'
    }
    if (e.detail[0][0].done == "destroy"){
        var post_fav = document.getElementById('post_fav')
        post_fav.innerHTML = '<a id="post_favorites_create" data-remote="true" rel="nofollow" data-method="post" href="posts/'+e.detail[0][0].post_id+'/favorites"><span>❤︎</span></a>'
    }
  });

これで非同期化が完了です

まとめると
link_toにremote: true、id名の追記
redirect_toをrender :json =>に変更
jsファイルにajax成功時の処理を記述する
以上３点です。

以上のことを設定すると同期通信を非同期通信にすることができます
いいね以外にも他の機能を非同期にしてみましょう！！

質問、気になるところなどございましたらコメントよろしくお願いします