フォロー・フォロワー数の非同期化

フォロー機能の非同期化完了後、ユーザー詳細ページにて、他ユーザーをフォロー(or解除)した際、リロードしなければフォロワー数が変化せず、躓きメンターさんに教えていただいたので、自分メモとして記事にいたしました。
（初心者であるため、専門用語の誤用や読みにくい記事となっているかもしれませんが悪しからず）

初めに

まず、私が勘違いしていたこととして、フォローボタンを押すとusers/show画面が変わるため、usersディレクトリにcreate.js.erbを作成したり、users/showに記述してある<%#= link_to @user.followers.count, user_followers_path(@user.id) %> にremote:trueを追記しなければいけないと思っておりました。

しかし、ターミナルのログを確認すると、フォローボタンを押すと、サーバにはRelationshipsコントローラのcreateアクションが送られておりました。

そのため、フォロー機能の非同期化の際に作成したrelationships/create.js.erbに後述する内容を追記をしなければならないとメンターにご教授いただきました。

id名を付けて識別化

ビューファイルにセレクタとなるidを記述します。(id="follow_count")

users/show.html.erb

︙
<td>フォロワー</td>
<td id="follow_count">
  <%= render "users/follow_count", user: @user %>
</td>
︙

部分テンプレートの作成

フォロワー数を変動させたいため、部分テンプレートを作成します。
フォロー機能を非同期化させる際には、部分テンプレートに下記のようにremote:trueで非同期化しましたが、今回はフォローボタンを押した際にフォロワー数が変動すれば良いだけなので、remote:tureは必要ありません。
むしろ、フォロワー数をクリックすると、フォロワー一覧ページに遷移したいため、サーバにhtml（同期通信）で送る必要があります。
そのため、remote:tureは記述してはいけません。

users/_follow.html.erb

<%= link_to "フォローする", user_relationships_path(user.id), remote: true, method: :post %>

users/_follow_count.html.erb

<%= link_to user.followers.count, user_followers_path(user.id) %>
//フォロワー画面に遷移させたいため、サーバにはhtmlで送る必要がある。そのため、remote:true(非同期化)は必要ない。

create.js.erb

上記で定めたid名、部分テンプレートをcreate.jsに記述します。

relationships/create.js.erb

$("#follow").html("<%= j(render 'users/follow', user: @user) %>"); //フォロー機能の非同期化の際、記述
$("#follow_count").html("<%= j(render 'users/follow_count', user: @user) %>"); //追記

//要約
//$("#非同期通信で変動したいタグのid名").html("<%= j(render '非同期通信で変動したい部分テンプレート");

最後に

非同期通信した際に、変動させたい動的UIがある場合の大まかな流れとしては、下記のようになるかと思います。
①非同期ボタンをクリックした際にどのURL(コントローラアクション)がサーバに送られているか確認
②ビューページの変動させたいタグにid名(もしくはクラス名)を付属させ、部分テンプレートを作成
②非同期化の際、作成したcreate(destroy).js.erbにid名・部分テンプレートを記述