商品詳細ページを作成する

この章のゴール

/product/{id} のような URL の {id} に含まれる値（PathVariable）をコントローラで受け取れるようにする

1. Controller メソッドの追加

前章で作成した ProductController に、商品詳細ページを表示するメソッドを追加する。
URL に含まれる {id} の値を受け取り、固定の内容を表示する。

📄src/main/java/com/example/ecsample/controller/ProductController.java+ 追加- 削除

 1package com.example.ecsample.controller;
 2
 3import org.springframework.stereotype.Controller;
 4import org.springframework.web.bind.annotation.GetMapping;
+5import org.springframework.web.bind.annotation.PathVariable;
 6
 7@Controller
 8public class ProductController {
 9
 10   @GetMapping("/products")
 11   public String showList() {
 12       // 商品一覧ページを表示する
 13       return "product/list";
 14   }
 15
+16   @GetMapping("/product/{id}")
+17   public String showDetail(@PathVariable("id") int id) {
+18       // URL で指定された id を受け取る
+19       System.out.println("アクセスされたID：" + id);
+20
+21       // 商品詳細ページを表示する
+22       return "product/detail";
+23   }
 24}

📘 ポイント

/product/1 にアクセスすると、Eclipse の「コンソール」タブに アクセスされたID：1 と出力される。
これで、@PathVariable によって URL の値を取得できていることを確認できる。
出力したこの id は、今後の商品情報の切り替え機能で使用する。

※補足
この時点ではブラウザ上ではエラー（Whitelabel Error Page）が表示される。これはまだ product/detail.html が存在しないためである。
同様にコンソールにも多くのエラーログが出力され、目的のメッセージが見つけづらい。
その場合は、Eclipseのコンソールをクリックした後 Ctrl + F（Macでは Command + F） を押して検索ダイアログを開き、"アクセスされたID" などのキーワードで検索すると素早く確認できる。
（Ctrl + F = 検索 は、Eclipse だけでなくブラウザなど多くのアプリでも共通のショートカットである）

2. View（HTML）の作成

src/main/resources/templates/product に detail.html を作成する。
今回はまだ動的な値は扱わず、固定の内容を表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>商品詳細</title>
</head>
<body>
  <h1>商品詳細ページ</h1>

  <p>商品ID：1</p>
  <p>商品名：サンプル商品</p>
  <p>価格：1200円</p>

  <a href="/products">▶ 商品一覧へ戻る</a>
</body>
</html>

3. トップページにリンクを追加

トップページ（home.html）から、サンプル商品の詳細ページへ遷移できるようリンクを追加する。

📄src/main/resources/templates/home.html+ 追加- 削除

 1<!DOCTYPE html>
 2<html xmlns:th="http://www.thymeleaf.org">
 3<head>
 4  <meta charset="UTF-8" />
 5  <title>EC Sample - トップページ</title>
 6</head>
 7<body>
 8  <h1>ようこそ EC Sample へ</h1>
 9  <p>このサイトでは商品一覧を閲覧し、カートに追加・購入する体験ができます。</p>
 10  <a href="/products">▶ 商品一覧を見る</a>
+11  <p><a href="/product/1">▶ サンプル商品の詳細を見る</a></p>
 12</body>
 13</html>

4. 動作確認

Eclipse の 実行 > Spring Boot アプリケーション でアプリを起動する。
ブラウザで http://localhost:8080/product/1 にアクセスする。
「商品詳細ページ」として固定の内容が表示されれば成功。
コンソールには アクセスされたID：1 と表示されることを確認する。
/product/2 や /product/999 にアクセスすると、コンソールにIDが変わって表示される。

6. 現時点の課題

この状態では、どの ID にアクセスしても同じ商品情報が表示される。
ただし、受け取った id の値はコンソールで確認できている。
今後の章では、この値に応じて表示内容を動的に変える仕組みを実装する。

7. Gitでコミットを作成する

ここまでの変更を保存し、コミットを取る。

git add .
git commit -m "商品詳細ページを追加（PathVariableの値を取得してコンソール出力）"

練習問題

商品詳細ページにクーポンコード付きでアクセスできる機能を追加してみよう。

動作仕様：URLの末尾に ?coupon=SPRINGSALE のような形式で値を渡すと、コンソールに クーポン：SPRINGSALE と出力される。

入力例：

http://localhost:8080/product/1?coupon=SPRINGSALE

出力例

アクセスされたID：1
クーポン：SPRINGSALE

💡 ヒント：
@RequestParam を使うと、?key=value 形式の値を取得できる。
@PathVariable と組み合わせて使えることを確認しよう。

この章のゴール​

1. Controller メソッドの追加​

2. View（HTML）の作成​

3. トップページにリンクを追加​

4. 動作確認​

6. 現時点の課題​

7. Gitでコミットを作成する​

練習問題​