JA
Bugtan

TechShop Specification

"Here's the spec for the e-commerce site under investigation. You can also refer to it during missions, so no need to memorize everything now!"

商品一覧

📋 概要

TechShopの全商品を一覧表示するページ。商品カードにはサムネイル画像・商品名・価格・在庫状況・評価が表示され、ソート・フィルタ・ページネーション機能を備える。

前提条件（テストデータ）

  • •テストデータとして10件以上の商品が登録済み（セール商品・在庫切れ商品を含む）
  • •カテゴリは「PC・周辺機器」「オーディオ」「アクセサリ」等の複数が存在する
  • •価格帯は¥980〜¥128,000の範囲で分布する

レイアウト概要

上部にソート・フィルタバー、中央にグリッド形式の商品カード一覧、下部にページネーション。各カードは画像・商品名・価格・評価・在庫バッジで構成。

🖥️ コンポーネント仕様

商品カード

個別の商品情報をカード形式で表示するコンポーネント。画像・商品名・価格・評価・在庫状況を含む。

表示ルール
  • ✓商品名は全文表示する（text-overflowやtruncateで省略しない）
  • ✓商品名が長い場合（50文字超）でもレイアウトが崩れない（カード高さが伸びて収まる）
  • ✓商品画像はカード内に収まり、はみ出さない（object-fit適用）
  • ✓テキストと背景のコントラスト比はWCAG AA基準（4.5:1以上）を満たす
  • ✓商品カードにホバーするとカーソルがpointerになる
  • ✓在庫数が0の場合、「在庫切れ」ラベルを赤色で表示する
データ仕様
商品価格¥X,XXX形式（通貨記号¥が必須、3桁カンマ区切り）
例: ¥12,800
  • →価格が0円の場合は「無料」と表示
セール価格元価格に取り消し線 + セール価格を強調表示
例: ¥15,000 → ¥12,800
  • →セール価格は必ず元の価格より低い値である
評価（レーティング）星アイコン + 数値（小数第1位まで）
例: ★4.2
  • →表示される評価値はレビューデータの平均と一致する
  • →評価値は0.0〜5.0の範囲内
在庫状況在庫数が0の場合のみ「在庫切れ」バッジを表示
  • →在庫数が0の場合は「在庫切れ」と表示（赤色バッジ）
  • →在庫切れ商品は購入操作ができない状態で表示
操作仕様
▸
商品カードをクリック → その商品の詳細ページに遷移する
▸
商品カードにマウスホバー → カーソルがpointer（指マーク）に変わる

ソート機能

商品一覧の並び順を変更するドロップダウンまたはボタン。価格の昇順・降順に対応。

操作仕様
▸
「価格が安い順」を選択 → 商品が価格の数値昇順で並び替わる（例: ¥980→¥4,980→¥12,800→¥128,000）
▸
「価格が高い順」を選択 → 商品が価格の数値降順で並び替わる
▸
ソート切替後 → 即座に一覧が更新される（ページリロード不要）

カテゴリフィルタ

カテゴリによる商品の絞り込み機能。特定のカテゴリに属する商品のみを表示する。

操作仕様
▸
特定のカテゴリ（例:「アクセサリ」）を選択 → そのカテゴリに完全一致する商品のみ表示される（部分一致ではない）
▸
フィルタを解除（「すべて」を選択） → 全商品が再表示される（フィルタ前と同じ状態にリセット）

商品件数表示

現在表示されている商品の件数を表示するテキスト。

データ仕様
表示件数「N件の商品」形式
  • →表示されている件数テキストの数値と、実際に画面上に表示されている商品カードの数が一致する
  • →フィルタ適用時はフィルタ後の件数を表示

ページネーション

商品一覧のページ送り機能。

表示ルール
  • ✓全ページを通して全商品が網羅される（途中のページで商品が欠落しない）
操作仕様
▸
次ページボタンをクリック → 次のページの商品が表示され、前ページの商品と重複しない

📐 ビジネスルール

BR-L1

価格ソートは数値比較

価格の並び替えは文字列順ではなく数値順で行う。文字列として比較すると桁数の違う価格が正しくソートされない。

入力: ¥4,980 / ¥12,800 / ¥8,900 / ¥980 を昇順ソート
期待結果: ¥980 → ¥4,980 → ¥8,900 → ¥12,800（文字列順だと ¥12,800 → ¥4,980 → ¥8,900 → ¥980 になり誤り）
BR-L2

カテゴリフィルタは完全一致

カテゴリフィルタは選択されたカテゴリと完全一致する商品のみを表示する。部分一致や前方一致ではない。

入力: 「アクセサリ」カテゴリを選択
期待結果: カテゴリが「アクセサリ」と完全一致する商品のみ表示（「PCアクセサリ」等は含まない）
BR-L3

フィルタリセットで全件復元

フィルタを解除した場合、フィルタ適用前の全商品一覧が完全に復元される。

BR-L4

ページネーションの完全性

全ページを順に見た場合、全商品が1回ずつ表示される。ページ間で商品の重複や欠落がない。

BR-L5

セール価格の整合性

セール価格が表示される場合、セール価格は必ず元の価格より低い。

入力: 元価格 ¥15,000 のセール商品
期待結果: セール価格は¥15,000未満（例: ¥12,800）

🔒 セキュリティ要件

HIGH

HTMLソースの情報露出

ページのHTMLソースに内部情報やデバッグ情報が含まれていないこと

  • !HTMLコメント（<!-- -->）にデバッグ情報・TODO・API情報が残っていないか
  • !data-*属性に原価・マージン・内部IDなどの内部データが含まれていないか
  • !非表示要素（display:none等）に機密情報が含まれていないか
HIGH

XSS・インジェクション

商品名やカテゴリ名に含まれるHTMLタグが適切にエスケープされること

  • !商品名・説明文にHTMLタグが含まれる場合、エスケープされて表示される
  • !URLパラメータ（カテゴリフィルタ等）がそのままHTMLに反映されていないか
  • !dangerouslySetInnerHTML等の危険なレンダリングが使われていないか
MED

CORS・リソース取得

外部リソースの取得設定が適切であること

  • !画像やスクリプトの読み込み元が信頼できるドメインか
  • !CORSヘッダーが適切に設定されているか（Access-Control-Allow-Origin: * は危険）
MED

ID体系の推測可能性

商品IDが連番でなく、他商品の存在が推測できない体系であること

  • !商品IDがシーケンシャルな連番（1, 2, 3...）になっていないか
  • !IDから他の商品の存在が推測できないか（UUIDやハッシュベースが望ましい）

♿ アクセシビリティ要件

  • [WCAG 1.1.1]
    商品画像 — すべての商品画像に意味のあるalt属性が設定されている（空文字「」は不可、商品名を含む内容であること）
  • [WCAG 1.4.3]
    テキスト・背景 — テキストと背景のコントラスト比が4.5:1以上であること（特に薄い色の価格テキストやラベル）
  • [WCAG 2.1.1]
    商品カード — Tab/Enterキーで商品カードをナビゲート・選択できること

📝 テスト時の注意事項

  • 💡開発者ツールでHTMLソースも確認すること（HTMLコメント、data-*属性、hidden要素）
  • 💡ソートは数値の大小が正しいか確認（文字列ソートのバグは見た目でわかりにくい）
  • 💡フィルタ適用後に件数テキストと実際の商品数を目視で照合すること