こんにちは。ゆうせいです。
今回は、新人エンジニアの方に向けて、Spring BootとThymeleafを使った「都道府県を選んで送信するフォーム」について、実際のコードを使って解説していきます。
実際のコードの掲載
package com.example.demo.controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class ValueController {
private final List<String> prefectures = List.of("北海道", "東京都", "大阪府", "福岡県");
@GetMapping("/value")
public String showForm(Model model) {
model.addAttribute("prefList", prefectures);
model.addAttribute("selectedPref", null);
return "value";
}
@PostMapping("/submit")
public String handleForm(@RequestParam("prefecture") String selectedPref, Model model) {
model.addAttribute("prefList", prefectures);
model.addAttribute("selectedPref", selectedPref);
return "value";
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>都道府県選択</title>
</head>
<body>
<h1>都道府県を選択してください</h1>
<form th:action="@{/submit}" method="post">
<select name="prefecture">
<option value="" disabled selected>選択してください</option>
<option th:each="pref : ${prefList}"
th:value="${pref}"
th:text="${pref}"
th:selected="${pref == selectedPref}">
</option>
</select>
<button type="submit">送信</button>
</form>
<p th:if="${selectedPref != null}">
選択された都道府県:<span th:text="${selectedPref}"></span>
</p>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>都道府県選択</title>
</head>
<body>
<h1>都道府県を選択してください</h1>
<form th:action="@{/submit}" method="post">
<select name="prefecture">
<option value="" disabled selected>選択してください</option>
<option th:each="pref : ${prefList}"
th:value="${pref}"
th:text="${pref}"
th:selected="${pref == selectedPref}">
</option>
</select>
<button type="submit">送信</button>
</form>
<p th:if="${selectedPref != null}">
選択された都道府県:<span th:text="${selectedPref}"></span>
</p>
</body>
</html>
コントローラークラスの中身を解説!
クラス名:ValueController
このクラスはコントローラーと呼ばれるもので、ユーザーの操作(リクエスト)を受け取って、どう処理するかを決めています。
@Controller
public class ValueController {
@Controller
というのは、「このクラスはWebリクエストを処理するよ」という合図です。
都道府県のリスト
private final List<String> prefectures = List.of("北海道", "東京都", "大阪府", "福岡県");
ここで定義しているのは、選択肢として表示する都道府県のリストです。
@GetMapping("/value")
とは?
@GetMapping("/value")
public String showForm(Model model) {
model.addAttribute("prefList", prefectures);
model.addAttribute("selectedPref", null);
return "value";
}
@GetMapping("/value")
は「このURLにアクセスされたらこのメソッドを動かすよ」という意味です。Model
というのは、HTMLに値を渡すための箱のようなものです。model.addAttribute(...)
で、HTMLから${prefList}
として都道府県のリストを使えるようにしています。
@PostMapping("/submit")
とは?
@PostMapping("/submit")
public String handleForm(@RequestParam("prefecture") String selectedPref, Model model) {
model.addAttribute("prefList", prefectures);
model.addAttribute("selectedPref", selectedPref);
return "value";
}
@PostMapping("/submit")
はフォームが送信されたときの処理です。@RequestParam("prefecture")
で、送られてきた都道府県を受け取ります。
例えるなら、「誰かが“東京都”って書かれた紙を渡してきたので、それを受け取って、また画面に表示する」といったイメージです。
HTML(Thymeleaf)テンプレートを分解してみよう!
① th:action="@{/submit}"
とは?
<form th:action="@{/submit}" method="post">
この部分は「フォームの送信先は/submit
ですよ」という指定です。
② th:each
で選択肢を繰り返す!
<option th:each="pref : ${prefList}"
th:value="${pref}"
th:text="${pref}"
th:selected="${pref == selectedPref}">
</option>
th:each="pref : ${prefList}"
は、「リストに入ってる都道府県をひとつずつ取り出して表示しよう」という意味。th:value
は送信される値th:text
は表示される文字th:selected
はその選択肢が選ばれていたかを判断
まるでプリンターが「リストをもらったから順番に印刷していくよ」みたいなイメージです。
実行の流れまとめ(図で確認!)
[ユーザー] → GET /value
↓
[サーバー] → HTML表示(フォーム付き)
[ユーザー] → POST /submit(選択肢つき)
↓
[サーバー] → HTML表示(選択済みを表示)
よくある間違いとその解決法
ミス内容 | 原因 | 解決方法 |
---|---|---|
都道府県が表示されない | prefList が渡されてない | model.addAttribute を確認 |
選択状態がリセットされる | selectedPref がnull になっている | POST時に値を渡せているかチェック |
フォームが送信されない | method="post" がない | formタグの属性を確認 |