Zenn
🍎

【Rails】いいね機能実装(非同期通信化)

2023/07/28に公開
JavaScript
Rails
gem
非同期通信
いいね機能
tech

はじめに

  • アプリケーション作成済
  • いいね機能(同期)実装済

https://zenn.dev/h_hana/articles/0339847820bd1b

1.Gemインストール

Gemfile
gem 'jquery-rails'
ターミナル
$ bundle install

2.いいねボタンを部分テンプレートで作成

app/views/favorites/_favorite.html.erb
  <% if book.favorited_by?(current_user) %>
    <%= link_to book_favorites_path(book), method: :delete do %>
      <i class="fas fa-heart" aria-hidden="true" style="color: red;"></i>
    <% end %>
  <% else %>
    <%= link_to book_favorites_path(book), method: :post do %>
      <i class="fas fa-heart" aria-hidden="true"></i>
    <% end %>
  <% end %>

3.Ajaxの処理を適用

部分テンプレートで作成したいいねボタンを編集する

app/views/favorites/_favorite.html.erb
  <% if book.favorited_by?(current_user) %>
    <%= link_to book_favorites_path(book), method: :delete, remote: true do %> #remote: true を追記！
      <i class="fas fa-heart" aria-hidden="true" style="color: red;"></i>
    <% end %>
  <% else %>
    <%= link_to book_favorites_path(book), method: :post, remote: true do %> #remote: true を追記！
      <i class="fas fa-heart" aria-hidden="true"></i>
    <% end %>
  <% end %>

  • method: :delete　の後に　remote: true を追記

  • method: :post の後に remote: true を追記

  • 上記を追記したことにより、Javascriptのリクエストがfavoritesコントローラーに送信される

  • HTMLリクエスト(同期通信)・・いいねボタンを押した後、画面にリダイレクトする(ページを読み込む)

  • Javascriptリクエスト(非同期通信)・・いいねボタンを押した後、Javascriptを使っていいねボタンの部分のみ更新する(ページの読み込みはなし)

4.js.erbファイルを作成

3で「remote: true」を追記したことによりJavascriptリクエストが送られるため、JavaScript用のファイルを作成する

  • app/views/favoritesにファイルを2つ作成
    　- create.js.erb
    　- destroy.js.erb

altテキスト

5.いいねボタンの部分テンプレートを読み込む

booksコントローラーのindexページとshowページにいいねボタンを実装

app/views/books/index.html.erb
  <!--いいねボタン-->
  <td id="favorite_buttons_<%= book.id %>">　←いいねボタンのみを更新するために、idで名前をつける
    <%= render "favorites/favorite", book: book %>
  </td>
app/views/books/show.html.erb
  <!--いいねボタン-->
  <td id="favorite_buttons_<%= @books.id %>">　←いいねボタンのみを更新するために、idで名前をつける
    <%= render "favorites/favorite", book: @books %>
  </td>

6.js.erbファイルを編集

↓　4でidに名前をつけた部分のみを更新するためのjsファイル
　　createアクション、destroyアクションそれぞれ作成する

app/views/favorites/create.js.erb
$('#favorite_buttons_<%= @book.id %>').html("<%= j(render "favorites/favorite", book: @book) %>");
app/views/favorites/destroy.js.erb
$('#favorite_buttons_<%= @book.id %>').html("<%= j(render "favorites/favorite", book: @book) %>");

7.コントローラー編集

favoritesコントローラーのcreateアクション、destroyアクションを編集する

app/controllers/favorites_controller.rb
class FavoritesController < ApplicationController
  def create
    book = Book.find(params[:book_id])
    favorite = current_user.favorites.new(book_id: book.id)
    favorite.save
    redirect_to request.referer　　　←この行を削除！
  end

  def destroy
    book = Book.find(params[:book_id])
    favorite = current_user.favorites.find_by(book_id: book.id)
    favorite.destroy
    redirect_to request.referer　　　←この行を削除！
  end
end

「redirect_to request.referer」これを削除したことでredirectできなくなり、Javascriptファイルを探しに行くことになる。

ここまででいいね機能の非同期通信化が完了しました！！

いいねボタンを押して、ページがリロードされずに💟の色が変われば成功です🙋

↓　こちらの記事を参考にさせていただきました！！
https://qiita.com/hapiblog2020/items/3ba7e7edc02f01d987b9

Discussion