Ruby on Rails remote:true Ajaxを用いて非同期通信について

Question

わからないこと

こちらのサイトではajax を用いて非同期通信を行う際に　remote: true に加えて　app/views/likes/create.js.erb ファイルなるものを作成し、その中にJSのコードをかく？とういうことをして　remote: true の非同期通信を可能にしているみたいですが。

  <%= link_to("/likes/#{@post.id}/create", method: "post", remote: true ) do %>
     <i class="fas fa-thumbs-up"></i>



class LikesController < ApplicationController
 before_action :authenticate_user
  def create
    @like = Like.new(
      user_id: @current_user.id,
      post_id: params[:post_id]
    )
    @like.save
    redirect_to("/posts/#{params[:post_id]}")
  end
end 

自分のコードではhtml に　remote: true と書くだけでも非同期通信はできるのですがこれはローカルだからでしょうか？本番環境で実行しようとするとうまくいかないのでしょうか？ ajax での非同期通信については昨日知ったばかりなので詳しいことはまだわかりませんが remote: true とだけ書くことで実行可能なのでしょうか？

やったこと

posts#show 

　　　<div id="likes_buttons_<%= @post.id %>">
       <i class="fas fa-bookmark"></i>
         <%= render partial: 'likes/like', locals: { post: @post, likes: @likes} %>
      </div>

_like.html.erb

<% if @post.user_id != @current_user.id %>
<% if Like.find_by(user_id: @current_user.id, post_id: @post.id)%>
<%= link_to("/likes/#{@post.id}/destroy", method: "post", remote: true) do %>
<i class="fas fa-bookmark unclip"></i>
<% end %>
<% else %>
<%= link_to("/likes/#{@post.id}/create", method: "post", remote: true ) do %>
<i class="fas fa-bookmark"></i>
<% end %>
<% end %>
  <%= Like.where(post_id: @post.id).count %>
  回答: <%= Answer.where(post_id: @post.id).count %>件
  <% else %>
  <i class="fas fa-bookmark"></i>
  <%= Like.where(post_id: @post.id).count %>
  回答: <%= Answer.where(post_id: @post.id).count %>件
<% end %>

create.js.erb

$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

参考にしたサイト

Answer 1

自分のコードではhtml に　remote: true と書くだけでも非同期通信はできる

「app/views/likes/create.js.erbを用意していなくとも動いている」という意味だと思いますが、

# LikesController#create
redirect_to("/posts/#{params[:post_id]}")

コントローラでリダイレクトしているのでremote: trueがあろうが無かろうが同じような動きをします。
仮に、ここでリダイレクトされていない場合にapp/views/likes/create.js.erbを見に行くのでこのファイルが必須となります。

そもそも非同期処理は、「ページ遷移を行わず画面の一部を変更する」ために用いられるものですので、そのためにはJavaScriptが必須となります。今回の場合は画面遷移を伴うので非同期処理である必要はありません。

Comments

[atage517]

なるほど、redirect_toでページ遷移を行なっているためにページのリロードはされないが、いいねを押した時に画面の上に飛んでしまう。

これをrenderにすればいいのですかね？だから参考にしたwebサイトが全てrenderなのかと勝手に納得したんですが。

現状としてはremote: true →　redirect_to なのでページのリロードはされないが例えばページの途中でいいねをするとページの上に飛ばされてしまいます。これをリロードもせずにかつページの上に飛ばされないようにもしたいと思っています

[rhiroe]

> これをrenderにすればいいのですかね？だから参考にしたwebサイトが全てrenderなのかと勝手に納得したんですが。

違います。というか参考にされているサイトでもコントローラにrenderは書かれてないでしょう？
回答にも書いた通り、redirect_toしなければapp/views/likes/create.js.erbを見に行くので、そこにJavaScriptのコードを書いてHTMLの特定の要素を書き換えます。

[atage517]

なるほど！そもそもcontroller に書かなくていいということですね。

.box_button_like
#like-button-zone{ id: user.id }
-# userのidが1の場合、id="like-button-zone_1"になります
= render partial: "likes/like", locals: { user: user }

viewにはrenderと書かれていますがこれはcontrollerのrenderとは違うんでしょうか？

[rhiroe]

viewのrender
https://api.rubyonrails.org/classes/ActionView/Renderer.html#method-i-render

controllerのrender
https://api.rubyonrails.org/classes/ActionController/API.html#class-ActionController::API-label-Renders

といった感じで動きは多少似てますが、全く別物です。

[atage517]

そうなんですね。それは知りませんでした。自分でも深く調べてみます。ありがとうございます！

Answer 2

同じことで悩んで、自己解決したことがあるのですが、前提としてpost側とget側で分けて考えると良いかと思います。

https://teratail.com/questions/238976#reply-352560
ここらへんの内容をRailsGuideなどでもっとわかりやすく書いてもらえるといいなと思っています。

Comments

[atage517]

no1knowsさん　参考先のサイトを拝見しました。自分がやりたいこととしてはlike の post のみなのでgetは考えなくていいのかな？と思いました。

あと参考のサイトにもあるように

// いいね残高をコントローラにて定義した@sending_userを用いて表示します
$(".like_balance").html("<%= @sending_user.like_balance %>")

htmlをcreate.js に書き換えるこの書き方がいまいち不明です。

jquery の　htmlを変えるコマンドでruby風に変えているということでしょうか？

[no1knows]

atage517さんのサンプルを基に凄いシンプルに説明すると下記のような形になるかと思います。

・いいねを押したら、いいねの色や形だけが変わる or いいねの数だけが増える
　⇒postのAjaxを使いましょう

・いいねを押したら、画面遷移（画面が白くなったり）してから、いいねの色や形だけが変わる or いいねの数が増える
　⇒getは気にしなくていいです。

もしイメージがつかなければ、「Ajaxとは」で検索するか、Railsガイドの「Rails で JavaScript を使用する」の「4.サーバー側で考慮すべき点のシンプルな例」を実装するととてもイメージがつきやすいです。←個人的に凄いおすすめです。

[no1knows]

> htmlをcreate.js に書き換えるこの書き方がいまいち不明です。

これは、create.js.erbという名称に変更することがわからないということでしょうか？
それとも$(".like_balance").html("<%= @sending_user.like_balance %>")のコードが何をしているかがわからないということでしょうか？

もし後者なら、その後の説明を読んでいただくと良いかと思いますが、jQueryのhtml()メソッドで、like_balanceクラスの文字を変更しています。

[rhiroe]

> いいねを押したら、いいねの色や形だけが変わる or いいねの数だけが増える
> ⇒getのAjaxを使いましょう

「いいね」するとレコードが登録される仕様なのでGETよりPOSTの方が好ましいと思いますよ。

[no1knows]

あぁ、失礼しました。。。

[atage517]

質問なのですがajaxを使い非同期でいいねをする時にはrenderを使わないといけないのでしょうか？

post/show で

<% if Like.find_by(user_id: @current_user.id, post_id: @post.id)%>
<%= link_to("/likes/#{@post.id}/destroy", method: "post", remote: true) do %>
<i class="fas fa-bookmark unclip"></i>
<% end %>
<% else %>
<%= link_to("/likes/#{@post.id}/create", method: "post", remote: true ) do %>
<i class="fas fa-bookmark"></i>
<% end %>
<% end %>

このような形を取っている時renderなしで非同期でいいねはできないですかね？

ハートマークを押すといいねができて、もう一回押すといいねを消せるという仕様なのですが、調べた方法はどれもハートマークを押すhtmlとそれをcontollerに送るhtmlを作っています。

no1knowsさんのおかげでajaxについてはわかりましたがそれを実行するコードの書き方がまだわかりません

[rhiroe]

renderなしでもできます。renderを使っているのは表示させたいHTMLをパーシャルファイルで作成しておいて、それをjsから埋め込みRubyを使って表示させるのが簡単だからです。render無しでもjsでHTMLを生成してそれを表示させれば同じことができます。

[atage517]

参考サイトを参照して自分でもやってみましたが以下のエラーが出ます、何が原因でしょうか？

Missing partial likes/_like with {:locale=>[:ja], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}. Searched in:
* "/Users/hoge/union1/app/views"
* "/Users/hoge/union1/vendor/bundle/ruby/2.7.0/gems/actiontext-6.0.3.2/app/views"
* "/Users/hoge/union1/vendor/bundle/ruby/2.7.0/gems/actionmailbox-6.0.3.2/app/views"

<div id="likes_buttons_<%= @post.id %>">
<i class="fas fa-bookmark"></i>
<%= render partial: 'likes/like', locals: { post: @post, likes: @likes} %> ←ここが原因
</div>
</div>
</div>

[rhiroe]

Missing partial likes/_like とあるように app/views/likes/_like.html.erb が存在していないからじゃないですか？

[atage517]

ありがとうございます。単純なミスでした今の所非同期でいいねはできているようですが、リロードしないと表示されません。
何が原因でしょうか？
いいねはできているようですがその画面では見ることができなく、リロードしないといいねが削除されたかいいねされたか確認できません。

[atage517]

ActionView::Template::Error (undefined method `id' for nil:NilClass):
1: $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

app/views/likes/destroy.js.erb:1

エラーにはこうありました。今自分でも原因を探しています

[atage517]

@post = Post.find_by(id: params[:post_id]) で@postのidを取得したらできましたありがとうございました