非同期通信(Ajax)を実装する方法

非同期通信について

ポイント4点
この4つだけ押さえていれば簡単に実装ができる

1. 非同期する機能箇所の部分テンプレートを作る
2. link_toをlocal: falseにしてjs形式で送信
3. jsファイルを用意する
4. controllerのredirect_toを消す

1.部分テンプレートファイルを用意する

• 部分テンプレートにすることで、view全体ではなく、指定した部分のみをリロードなしで返してくれる

_form.html.erb

 <% if book.favorited_by?(current_user) %>
  <td>
    <%= link_to book_favorites_path(book), method: :delete do %>
    🤍<%= book.favorites.count %>いいね
  <% end %>
  </td>
<% else %>
  <td>
    <%= link_to book_favorites_path(book), method: :post do %>
    ♡<%= book.favorites.count %>いいね
  <% end %>
  </td>
<% end %>

index.html.erb

<div class="favorites_buttons_<%= @book.id %>">
　　<%= render 'favorites/favorite.btn', book: @book %>
</div>

• class名をfavorites_buttonsにすると全ての投稿のいいねボタンが同じクラス名になってしまう
• 判別する方法として_<%= @book.id %>にて、どの投稿に対していいねをしたか判別

2.非同期の設定をする

• local: falseを設定することで、非同期処理が発生

_form.html.erb

<%= form_with model: [book, book_comment],local: false do |f| %>
  <%= f.text_area :comment, rows: '5', cols: '50',  placeholder: "コメントをここに", class: "comment-textarea" %>
  <%= f.submit "送信" %>
<% end %>

3.jsファイルを用意する

escape_javascript

• JavaScriptファイル内にHTMLを挿入するときに実行結果をエスケープするために必要

create.js.erb

$('some_element').replaceWith('<%= escape_javascript render 'some/element_template' %>');


// 上記の短縮形
$('some_element').replaceWith('<%= j render 'some/element_template' %>');　

4.controllerのredirect_toを消す

• redirect_to を省略することで、コントローラー名のjs.erbを探すことになる

favorites.controller.erb

 def create
    @book = Book.find(params[:book_id])
    @favorite = current_user.favorites.new(book_id: @book.id)
    @favorite.save
  end

参考

• https://pikawaka.com/rails/remote-true