前回までの実装で、お気に入り機能の非同期通信化まで行いました。
今回は、お気に入りに登録した情報を一覧で見れるように実装していきます。
まだ見ていない方は、以下の記事を御覧ください。
目次
お気に入り一覧表示実装
準備
各ユーザーのマイページを用意し、そちらで自身のお気に入りした投稿を一覧表示させます。
users_controller.rbを作成します。showアクションも作成します。
ターミナルで以下のコマンドを実行しましょう。
rails g controller users show 実装
実装に取り掛かっていきましょう。
routingルーティングの設定を行います。
config/routes.rbに、今回使用するルーティングを記述していきましょう。
# config/routes.rb
Rails.application.routes.draw do
devise_for :users
root 'posts#index'
resources :posts, only: [:index, :new, :create]
post 'favorite/:id' => 'favorites#create', as: 'create_favorite'
delete 'favorite/:id' => 'favorites#destroy', as: 'destroy_favorite'
resources :users, only: [:show] # こちらの記述を追加
end記述することができたら正しく設定されているか確認してみましょう。
ターミナルで以下のコマンドを実行します。
rails routes実行後、ターミナルで以下の表示が出てくるか確認しましょう。
user GET /users/:id(.:format) users#show次にコントローラーの記述を行っていきます。
以下のように記述していきましょう。
# users_controller.rb
class UsersController < ApplicationController
before_action :authenticate_user!
def show
user = User.find(params[:id])
return redirect_to root_path unless current_user.id == user.id
@user_favorites = user.favorites
end
end今回はログインしているユーザーだけが自身の詳細ページに遷移できるようにしています。
before_action :authenticate_user!deviseを導入していると使用することができるメソッドになります。
ログインしていないユーザーをログインページに遷移させてくれます。
user = User.find(params[:id])return redirect_to root_path unless current_user.id == user.id先程取得した変数userの情報と、ログインしているユーザー(current_user)の情報が一致しているか確認しています。
一致しなかった場合は、トップページに遷移させています。
これは、ログインしているユーザーが別のユーザーの情報を、見れないようにするために記述しています。
@user_favorites = user.favorites取得したuserに紐づくお気に入りの情報を取得し、@user_favoritesに代入しています。
インスタンス変数にしているのは、この後ビューで使用するためです。
モデルにアソシエーションを記述しているため、上記の記述で情報を取得することが可能になっています。
# user.rb内のアソシエーションの記述
has_many :favorites「詳細ページに遷移するためのリンク」と「お気に入り一覧を表示させるためのページ」を記述していきます。
まずは、「詳細ページに遷移するためのリンク」を記述していきましょう。
# posts/index.html.erb
<% if user_signed_in? %>
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
<%= link_to '投稿ページへ', new_post_path %>
<%= link_to 'お気に入り一覧', user_path(current_user.id)%> # 記述を追加
<% else %>
<%= link_to 'ログイン', new_user_session_path %>
<%= link_to '新規登録', new_user_registration_path %>
<% end %>
<div class="post">
<h2>投稿一覧</h2>
<p>↓↓↓</p>
<% @posts.reverse_each do |post| %>
<div id="post_<%= post.id %>">
<%= render 'post', post: post%>
</div>
<% end %>
</div>ログインしているユーザーだけに、リンクが表示されるように条件式の中に記述しています。
ログインしている状態で、以下の画像のように表示されているか確認してみましょう。
確認することができたら、「お気に入り一覧を表示させるためのページ」を記述していきましょう。
# users/show.html.erb
<% @user_favorites.reverse_each do |favorite| %>
<div>
<%= favorite.post.title %>
</div>
<% end %>
<% if @user_favorites.empty? %>
<h2>お気に入りはありません</h2>
<% end %>
<%= link_to 'トップページに戻る', root_path %>先程コントローラーで定義した@user_favoritesに入っている情報の数だけ繰り返し処理を行っています。
<%= favorite.post.title %>によって、お気に入りに紐付いた投稿のタイトルを表示させています。
また、@user_favoritesに情報がなかった場合、「お気に入りはありません」と表示させるために条件式を記述しています。
if @user_favorites.empty?こちらの条件式で使用している「empty?」は配列の中身が空であるかどうかを判断することができるrubyのメソッドになります。
最後に挙動を確認しましょう。
確認する内容は以下になります。
- お気に入りがない場合のユーザー詳細ページの表示
- お気に入り登録後のユーザー詳細ページの表示
- ログアウトした際のトップページの表示
お気に入りの一覧を表示させることができたでしょうか？
ぜひご自身のアプリケーションに実装してみてください。
最後までご覧頂きありがとうございました。
お気に入り機能の他の記事をまだ見ていない方は、ぜひチェックしてみてください！
