##自己紹介
9月から独学でプログラミング学習を開始し、
11月からスクールを使って学習をしています。
現在はポートフォリオの作成し転職活動中です。
知識を定着させるために、学びをアウトプットしています。
また、これから学び始める方の参考になることを願っています。
##開発環境
- Ruby 3.0
- Ruby on Rails 6.0.3.4
- jQuery 3.5.1
#Ajaxでお気に入り機能を実装する
前回、Railsでお気に入り機能を実装するという記事を投稿しました。
今回は、この記事の非同期化を行います。
同時にお気に入り数のカウントも行ってみましょう！
##1.マイグレーションファイルを作成する
まずはターミナルで下記のコマンドを実行して下さい。
rails g migration AddLikersCountToMoives
そして、生成されたマイグレーションファイルを編集します。
class AddLikersCountToMovies < ActiveRecord::Migration[6.0]
def change
add_column :movies, :likers_count, :integer, default: 0
end
end
これでlikees_countというメソッドが使用できるようになりました。
公式のGithubも合わせて参照下さい。
☆ポイント
ここでrails db:migrateを実行しますが、
その前に、もしお気に入りの登録を行っている場合は全て解除して下さい。
default: 0としているため、現在の状態が0になってしまいます。
このまま、お気に入り解除をすると-1のような表示になってしまいます。
##2.ビューファイルを追加する
まずは、views/movie配下に_favorite.html.erbというビューファイルを新しく追加します。
<% if current_user.likes?(movie) %>
お気に入り解除
<% else %>
お気に入り登録
<% end %>
<%= movie.likers_count %>
これは以前に作成したビューファイルを切り出したものに、likers_countを追加したものになります。
それでは、以前に作成したビューファイルを編集しましょう
##3.ビューファイルの編集をする
<%= link_to favorite_movie_path(movie), remote: true do %>
<div id="favorite-movie">
<%= render partial: "movies/favorite", locals: {movie: movie}
</div>
<% end %>
まず、作成した_favorite.html.erbをrender partial: "movies/favorite"で読み込んでいます。
locals: {movie: movie}はfavorite.html.erb内のmovieにビューで使っているmovieを渡しています。
renderについてはRailsガイドを参照ください。
link_toのオプションにremote: trueを指定しています。
これによりviews/movies/favorite.js.erbが呼び出されるようになります。
指定したid="favorite-movieはfavorite.js.erbで使用します。
##4.JavaScriptファイルを作成する。
views/movies配下にfavorite.js.erbを作成して下さい。
内部は下記の１行だけです。
$("#favorite-movie").html("<%= j(render partial: "movies/favorite", locals: {movie: @movie}) %>");
先程のidを指定し、内部のhtmlを_favorite.html.erbに書き換えています。
今回、jQueryを使用していますが、導入については、省略致します。
以上で機能の実装は終了です。
前回記事、Railsでお気に入り機能を実装すると合わせてご覧下さい。
また、至らない点があれば、お手数ですがご指摘下さい。
###補足①
非同期でお気に入りを行った際に、お気に入り数のカウントが、遅れてしまう可能性があります。
そのような場合、controllers/movies_controller.rbに下記を追加して下さい。
def favorite
@movie = Movie.find(params[:id])
current_user.toggle_like!(@movie)
+ @movie.reload #この１行を追加
reloadでお気に入り処理後に再読み込みを行っています。
###補足②
お気に入り処理をeachなど繰り返し処理内で行いたいこともあると思います。
その場合は、指定したid="favorite-movieを下記のように変更して下さい。
<%= @movies.each do |movie| %>
<div id="favorite-movie-<%= movie.id %>">
<%= render partial: "movie/favorite", locals: {movie: movie} %>
</div>
<% end %>
views/movies/favorite.js.erb
$("#favorite-movie-<%= @movie.id %>").html("<%= j(render partial: "movies/favorite", locals: {movie: @movie}) %>");
id属性にid値を指定することで、繰り返し処理内でもお気に入りの処理を行うことができます。