【178日目】【1日20分のRailsチュートリアル】【第12章】JavaScriptでフォロー/フォロー解除ボタンを更新する

今日は「12.2.5 [フォローする] ボタン (Ajax)」のJavaScriptが無効になっていた場合の対応を実装するところから。

12.2.5 [フォローする] ボタン (Ajax)

リスト12.35でAjaxリクエストに対応したので、今度はブラウザ側でJavaScriptが無効になっていた場合 (Ajaxリクエストが送れない場合) でもうまく動くようにします (リスト12.36)。

この一行でJavaScriptが無効になっていても上手く動作するのか…。

config/application.rb

    # 認証トークンをremoteフォームに埋め込む
    config.action_view.embed_authenticity_token_in_remote_forms = true

一方で、JavaScriptが有効になっていても、まだ十分に対応できていない部分があります。
（中略）
ユーザーをフォローしたときやフォロー解除したときにプロフィールページを更新するために、私たちがこれから作成および編集しなければならないのは、まさにこれらのファイルです。

Ajaxリクエストを受信した場合は、Railsが自動的にアクションと同じ名前を持つJavaScript用の埋め込みRuby (.js.erb) ファイルを呼び出すらしいので呼び出されるファイルをまず生成しておく。

$ touch app/views/relationships/create.js.erb
$ touch app/views/relationships/destroy.js.erb

create.js.erbファイルでは、フォロー用のフォームをunfollowパーシャルで更新し、フォロワーのカウントを更新するのにERbを使用しています (もちろんこれは、フォローに成功した場合の動作です)。

フォローボタンを押下されたときはアンフォロー用のHTMLで置き換えて、フォロワー数を更新する。
フォロー解除ボタンを押下されたときはフォロー用のHTMLで置き換えて、フォロワー数を更新する。
って感じなのかー。

app/views/relationships/create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= @user.followers.count %>');

app/views/relationships/destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= @user.followers.count %>');

これらのコードにより、ユーザープロファイルを表示して、ページを更新せずにフォローまたはフォロー解除ができるようになったはずです。

サーバーを起動して動作見てみた。
スクショでは表現できないので貼らないけど、多分ページ更新してない！でもフォロー/フォロー解除できてる！
こっちの方が自然な感じでいいね。

$ rails server -b $IP -p $PORT

今日の学習時間は【28分】。

次は「12.2.6 フォローをテストする」から。