Zenn
📝

【Rails】いいねした投稿の一覧ページ作成

2023/11/08に公開
Rails
初学者
DMM WEBCAMP
tech

ポートフォリオにていいねした投稿を一覧画面にする操作が初めてだったので復習として載せます。人によって全然やり方が違うと思うのでこの記事を見かけた方は参考程度でお願いします。

前提

  • いいね機能が作成されている。
  • 画像はActiveStorageを使用
  • 投稿テーブル名はreview
  • 一覧はuserのマイページから飛ぶイメージ

ルーティング

ルーティングを設定する

routes.rb
get 'users/favorites' => 'users#favorites', as: 'user_favorites'

以上のように記述することで、"/users/favorites"というURLにアクセスした際に、usersコントローラのfavoritesアクションが呼び出されるようになります。

コントローラ

コントローラ内に記載していきます。

users_contllor
:
def favorites
    @user = current_user
    @favorite_reviews = @user.favorites.includes(:review)
    render 'favorites'
  end
:

上記のように、favoritesアクションを追加し、その中で現在のユーザーのお気に入りの投稿を取得して、@favorite_reviewsに格納するようにします。

includesメソッド

includesメソッドは、Ruby on Railsフレームワークで使用されるメソッドの一つです。このメソッドは、あるオブジェクトが別のオブジェクト内に含まれているかどうかを確認するために使用されます。

ビューの作成

viewsフォルダの中のusersフォルダ内にfavorites.html.erbファイルを作成し記述します。

users/favolites.html.erb
<div class="container mt-5">
  <div class="row">
    <div class="col-md-3 mt-5">
      <%= render 'public/reviews/new', review: @review %>
    </div>
    
    <div class="col-md-8 offset-md-1 mt-5">
      <h3 class="mb-3">いいねした投稿一覧</h3>
      <% @favorite_reviews.each do |favorite| %>
        <div class="card mt-3">
          <%= image_tag favorite.review.image %>
            <div class="card-body">
              <div class="list-group list-group-flush">
                <p>投稿日時: <%= favorite.review.created_at.strftime('%Y/%m/%d') %></p>
                <h5 class="list-group-item">タイトル: <%= favorite.review.title %></h5>
                <p class="list-group-item"> <%= favorite.review.body %></p>
                <h6 class="list-group-item">ユーザー名: <%= favorite.review.user.name %></h6>
                <h6 class="list-group-item"><%= link_to "詳細ページはこちら",review_path(favorite.review_id) %></h6>
              </div>
            </div>
        </div>
      <% end %>
    </div>
  </div>
</div>

<% @favorite_reviews.each do |favorite| %>というeach文を作成し、いいねした投稿を1つずつ取り出すような形にし、投稿の必要な情報を呼び出します。

完成形

マイページ

いいね一覧ページ

人によって調べるといろいろな書き方があるので、「こんなのもあるんだな～」くらいで参考にしていただけると幸いです。

Discussion