<DAY183>いいねの非同期化

●8/23(金)
●学習日数 183日
●学習時間(本日)8時間
●累計学習時間 801.0時間
●一日あたりの平均学習時間 4.37時間

結論（ポイント）

(1)remote tureを指定するだけでajaxで通信する事ができる
(2)jsファイル記述の際にrenderを指定するのでajaxで変更したい部分だけテンプレート化しておく
(3)respond to |format|にてjs処理かhtml処理を指定する

手順1

ajaxで表示を変更させたい箇所を部分テンプレート化させる
今回だと、数字の部分のみを変更させる。
_like.html.hamlファイルを作成した。
id:"like_judgment"を付与させてセレクタをつける必要がある。
remote: trueを忘れない。

app/view/likes/_like.html.haml

- if Like.find_by(user_id:current_user&.id,tweet_id: @tweet.id)
  = link_to @tweet.likes.count,"/likes/#{@tweet.id}/delete",method: :delete, remote: true,id:"like_judgment"
- else 
  =link_to @tweet.likes.count,"/likes/#{@tweet.id}/create",method: :post, remote: true,id:"like_judgment"

手順2

js.erbファイルの作成。
ajax通信時にjs.erbファイルに飛ばすため必要な記載。
コントローラのアクションと命名を合わせる。

app/view/likes/create.js.erb
app/view/likes/destroy.js.erb
同じ記載を実施する。

$('#like_judgment').html("<%= j (render partial:'likes/like') %>");
$('#like_judgment').slideDown(350);

手順3

既存の記載に以下を加えただけである。
対象のcreataとdestroyに加える。
respond_to do |format|
format.html
format.js
end

コントローラの記載を変更

app/controller/likescontroller

 def create
    respond_to do |format|
        like = Like.new(user_id:current_user&.id,tweet_id: @tweet.id)
        like.save
        format.html{redirect_to tweet_path(@tweet.id) }
        format.js
    end
   
   
  end

  def destroy
    respond_to do |format|
      like = Like.find_by(user_id:current_user&.id,tweet_id:@tweet.id)
      like.destroy
      format.html{redirect_to tweet_path(@tweet.id) }
      format.js
    end
  end

以上で非同期は完了。