【178日目】【1日20分のRailsチュートリアル】【第12章】Ajaxを使ったフォローボタンを考える

Ruby on Railsチュートリアル(第3版)

今日は「12.2.5 [フォローする] ボタン (Ajax)」から。

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

ユーザーをフォローした後、本当にそのページから離れて元のページに戻らないといけないのでしょうか。この点を考えなおしてみましょう。

フォローボタンを押した後、そのままだとフォローボタンはフォローボタンのまま。（フォロー解除ボタンにならない）
すぐリダイレクトするようにしているからこそボタンの描画が切り替わる。 これをAjaxを使用して更新しよう、ってことかなー。

たったこれだけで、Railsは自動的にAjaxを使用します。更新の結果をリスト12.33とリスト12.34に示します。

へー、一行で済むのか…。

app/views/users/_follow.html.erb

<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>

app/views/users/_unfollow.html.erb

  :
             remote: true) do |f| %>

上の (ブロック内の) コードのうち、いずれかの1行が実行されるという点が重要です (このためrespond_toメソッドは、上から順に実行する逐次処理というより、if文を使った分岐処理に近いイメージです)。

ややこしいね。忘れそう。

ユーザーのローカル変数 (user) をインスタンス変数 (@user) に変更した点に注目してください。これは、リスト12.32のときはインスタンス変数は必要なかったのですが、リスト12.33やリスト12.34を実装したことにより、インスタンス変数が必要になったためです。

へー。インスタンス変数じゃないと動かないコードがあるのか…。
format.html { redirect_to @user }にインスタンス変数が必要なのかな？

HTMLリクエストなら上のコード、Ajaxリクエストなら下のコードが動く、ってことなんだよね…難しい…。

app/controllers/relationships_controller.rb

  def create
    @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

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

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