- 実装のゴール
出品された商品をトップページに「新着順」で表示させ、商品がない場合には「ダミー情報」を表示させる機能を実装しました。
実装条件のポイント
ログイン状況に関わらず誰でも閲覧可能
左上から「出品された日時が新しい順」に表示
画像・商品名・価格・配送料の負担の4つの情報を表示
商品がない時はダミーを表示
- コントローラーの実装
indexアクションで、すべての商品を「作成日時の新しい順（降順）」で取得するように記述します。
Ruby
def index
orderメソッドで作成日時の新しい順（DESC）に並び替えて取得
@items = Item.all.order("created_at DESC")
end
3. ビューの実装（index.html.erb）
「商品がある場合」と「ない場合」を条件分岐（if @items.present?）させ、eachメソッドを使って動的に商品を表示させます。
コード
-
<% if @items.present? %>
<% @items.each do |item| %>
-
<%= link_to "#" do %>
<%= image_tag item.image, class: "item-img" %> <%# 売却済み表示の器（将来の購入機能実装用） %> <% if false %><% end %>Sold Out!!<% end %>
<% end %>
<% else %>
<%# 商品がない時のダミー表示 %>
- <%= link_to '#' do %> <%= image_tag "sample.jpg", class: "item-img" %> <% end %> <% end %>
Ruby
Railsコンソールを起動
rails c
1. データの取得確認
item = Item.last
2. ActiveHashの名称が取得できるか確認
item.shipping_fee_status.name
=> "送料込み(出品者負担)" などの名称が返ってくれば成功
また、ダミー表示の確認のために全データを一時的に削除する際もコンソールが便利です。
Ruby
全データの削除
Item.destroy_all
- レビュー依頼前のチェックリスト
一発でLGTMをもらうために、以下の3点を徹底しました。
Rubocopの実行: bundle exec rubocop -A でコードの体裁を整える。
動画撮影（Gyazo）: 「商品0件のダミー表示」と「2件以上の新着順表示」の2パターンを撮影。
PRのWhyを明確に: なぜその実装が必要なのか（最新情報の優先、UIの維持など）を記述。
What
出品された商品がトップページに一覧で表示される機能を実装しました。
具体的には以下の通りです。
コントローラーのindexアクションで商品データを最新順（降順）に取得
ビュー（index.html.erb）にて、商品データの有無による条件分岐を実装
商品がある場合は、eachメソッドを用いて「画像・商品名・価格・配送料の負担」を表示
商品がない場合は、サンプル（ダミー）画像を表示
Why
出品された商品をユーザーが閲覧し、購入を検討できるようにするため。
また、最新の出品を優先的に表示することで、利便性を向上させるため。
実装の様子（Gyazoリンク）
商品のデータがない場合は、ダミー商品が表示されている動画
https://gyazo.com/ac036b8f707ede63b7849befe3b718f5
商品のデータがある場合は、商品が一覧で表示されている動画
https://gyazo.com/f0453ee745191f405b0bf6ec0811f57a