Day20 Ajaxによる非同期通信実装【いいね】

#概要
イメージとしては、ページの中の一部分だけを遷移することなく読み込み直すことをできるようにするのが非同期通信であり、その一部分をパーシャルとして作成し、リンクにremote trueとすることでアクションと同じ名前で、その一部だけをリロードする設定のjsファイルを読み込ませることで、ページ遷移なく更新することができるといったものである。

**いいねのパーシャルを作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/8665e831-3072-e019-0aed-8a6dd53a9e01.png)
LIKESとLIKEDが表示される部分を非同期で読み込みたいので、ここをパーシャルにする。
<img width="264" alt="スクリーンショット 2020-02-05 16.07.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/3f324f7f-f6ab-8a6f-0f6e-a585cc9ccc73.png">

**ビューにパーシャルを配置**
<img width="515" alt="スクリーンショット 2020-02-05 16.04.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/dfb0b0bc-087d-a7bd-a824-dd8882ee6768.png">
_like_ajax.html.erbがここではパーシャルで、そちら側で使うuserという変数にshowページで使っていたuserpを変換して渡している。これによりパーシャル側でプロフィールユーザのLIKES LIKEDが表示できる。
ここまでは今までのパーシャルと同じである。

**リンクにremote trueを追加**
<img width="729" alt="スクリーンショット 2020-02-05 16.11.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/eafaa100-1982-8d71-5aca-ea727e6ee987.png">
これにより、そのリンクが予定しているコントローラのアクションを実行してもページ繊維が行われない代わりに、同名のjsファイルを探してそれを実行するようになる。

**jsファイル作成**
create.js.erb
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/e6a872d7-2324-801e-5368-79de20263f15.png)
destroy.js.erb
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/8374c7ab-3982-fbb3-9016-4c64698f18cf.png)
likedivというクラスの部分だけ、renderで更新するという意味で、locals以下は、コントローラ（createとdestroy)で定義された変数（@userp)を'shared/like_ajax'に渡している。
つまりその変数に基づいて、パーシャルだけが部分的に更新されるようになっている。

**コントローラにjsが仲介してパーシャルに渡す変数を追加**
<img width="550" alt="スクリーンショット 2020-02-05 16.17.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/537fbcae-620b-0412-f993-89e56226f6f9.png">
これで指定した部分だけが、更新されるようになる。
参考：https://qiita.com/naberina/items/c6b5c8d7756cb882fb20

#ユーザ一覧画面でのいいね機能
**ビューのパーシャル部分**
<img width="998" alt="スクリーンショット 2020-02-05 17.19.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/7eb7169a-5bc5-d467-e7b3-0c0d1cfa3b33.png">
このように一覧表示などの同じものが繰り返されるページで非同期通信にしたい時は、その個別のクラスを付与しないと、再読み込みが意図しない場所以外にも適用されてしまう。
ここでは、いいねアイコンをクリックしたユーザのみ繰り返し表示させたいので、クラスが固有のものになるように<%=user.id%>と追加している。
**コントローラ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/e1241a39-cbf7-79dc-56b7-a2f5ff7648de.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/7ddba87f-1472-a19e-b078-66ef8642962a.png)

**js**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/56c88dcb-ec2b-2667-89a3-fa3387a783ee.png)
ここでも固有のクラスのみを再読み込みするよう設定。ちなみにここでの@userは、コントローラでUser.find_by(params[:id])で取得してきたユーザ。paramsにはいいねのリンク生成時に各ユーザのIDが入るので取り出せるという仕組み。
current_userのクラスも追加されているのは、本記事の**その他>複数箇所を同時に非同期で読み込ませる方法**を参照。


#Likeslist Likedlistでのいいね機能
**ビューのパーシャル部分**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/16c570af-e496-e3f8-e82d-d9703374405a.png)
ユーザ一覧と同じで、クラス名は固有でなくてはならないなど条件がほぼ一緒なので同じクラス名を付した。
**js**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/e5d81cd5-8885-1f61-7850-ab2bf23235b2.png)
クラス名が一緒なのでこちらも一緒である。
#その他
##Ajaxでリダイレクトをする方法
例えばユーザが更新に失敗したときなどは、Flashのメッセージを表示させるのと同時に、ページを遷移させたいときなどがある。Ajaxでは基本的にリダイレクトが使えないので、下記のようにコントローラ内で特殊な指定方法をすることでリダイレクトをできるようにする。
<img width="586" alt="スクリーンショット 2020-02-05 17.15.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/37087ead-4323-1a87-dbc4-f197dabd0e17.png">
参考:https://medium.com/@SullivanArielle/redirecting-with-remote-true-62f07f4a83a1

##複数箇所を同時に非同期で読み込ませる方法
**やりたいこと**
ユーザ一覧画面でいいねをしたり、消したりする時に、自分のLIKESの数も同時に増減させたい。
下の画像で言うと、シャワーズ（右端）にいいねをすると同時に、admin(自分）のLIKESの数も変化させたい。
<img width="1170" alt="スクリーンショット 2020-02-05 17.31.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/4b73ad4f-19aa-2768-0d37-de30b4fe33c8.png">
**やり方**
どの部分が再読み込みされるかを定義しているのはjsファイルの設定で、そこをいじればよい。
具体的にはログインしているユーザのクラスも追加で設定すれば、指定したクラスで変化が起きた際に必ずログインしているユーザの部分も再読み込みされるということである。
<img width="988" alt="スクリーンショット 2020-02-05 17.34.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565105/b51a5377-f851-14ad-4395-f6ed36207c15.png">
上の部分はいいねを送ったユーザでそこも再読み込みされ、赤枠の部分で現在のユーザのクラスを持つ場所（自分の欄）も再読み込みされるようになるという仕組みである。