商品詳細表示機能の実装：パスとコードの完全ガイド

1. ルーティングの設定
   商品詳細ページ専用のURL（items/:id）を有効にします。

ファイルパス：config/routes.rb

Ruby

Rails.application.routes.draw do
devise_for :users
root to: "items#index"

showアクションを追加

resources :items, only: [:index, :new, :create, :show]
end

1. コントローラーの実装
   URLから渡される id を使い、Item.find で特定のデータを1件取得します。

ファイルパス：app/controllers/items_controller.rb

Ruby

class ItemsController < ApplicationController
before_action :authenticate_user!, only: [:new, :create]

def index
@items = Item.all.order(created_at: :desc)
end

def show
# 詳細表示に必要なデータを取得
@item = Item.find(params[:id])
end

1. ビューの実装（条件分岐と動的表示）
   差し替え後の完成版コードです。ログイン状態によるボタンの出し分けロジックを注釈とともに記載します。

ファイルパス：app/views/items/show.html.erb

コード スニペット

  <%# 補足条件に基づき、購入機能実装後に条件式（sold out）を記述 %>
  <% if false %>
    <div class="sold-out">
      <span>Sold Out!!</span>
    </div>
  <% end %>
</div>

<div class="item-price-box">
  <span class="item-price">
    ¥ <%= @item.price %>
  </span>
  <span class="item-postage">
    <%= @item.shipping_fee_status.name %>
  </span>
</div>

<%# ログイン状態の判定 %>
<% if user_signed_in? %>
  <%# ログインかつ出品者の場合 %>
  <% if current_user.id == @item.user_id %>
    <%= link_to "商品の編集", "#", method: :get, class: "item-red-btn" %>
    <p class="or-text">or</p>
    <%= link_to "削除", "#", data: {turbo_method: :delete}, class:"item-destroy" %>
  <% else %>
    <%# ログインかつ出品者以外の場合（※売却済み判定は購入機能実装後） %>
    <%= link_to "購入画面に進む", "#" ,class:"item-red-btn"%>
  <% end %>
<% end %>

<div class="item-explain-box">
  <span><%= @item.info %></span>
</div>
<table class="detail-table">
  <tbody>
    <tr>
      <th class="detail-item">出品者</th>
      <td class="detail-value"><%= @item.user.nickname %></td>
    </tr>
    <tr>
      <th class="detail-item">カテゴリー</th>
      <td class="detail-value"><%= @item.category.name %></td>
    </tr>
    <tr>
      <th class="detail-item">商品の状態</th>
      <td class="detail-value"><%= @item.sales_status.name %></td>
    </tr>
    <tr>
      <th class="detail-item">配送料の負担</th>
      <td class="detail-value"><%= @item.shipping_fee_status.name %></td>
    </tr>
    <tr>
      <th class="detail-item">発送元の地域</th>
      <td class="detail-value"><%= @item.prefecture.name %></td>
    </tr>
    <tr>
      <th class="detail-item">発送日の目安</th>
      <td class="detail-value"><%= @item.scheduled_delivery.name %></td>
    </tr>
  </tbody>
</table>
<div class="option">
  <div class="favorite-btn">
    <%= image_tag "star.png" ,class:"favorite-star-icon" ,width:"20",height:"20"%>
    <span>お気に入り 0</span>
  </div>
  <div class="report-btn">
    <%= image_tag "flag.png" ,class:"report-flag-icon" ,width:"20",height:"20"%>
    <span>不適切な商品の通報</span>
  </div>
</div>

４. 遷移元の修正
一覧画面から詳細画面へ遷移できるように、リンク先を動的なものに変更します。

ファイルパス：app/views/items/index.html.erb

コード スニペット

<%# 変更箇所のみ抜粋 %>
<%= link_to item_path(item.id) do %>
<%# 商品画像などのコンテンツ %>
<% end %>