【Spring入門】付録D 送信内容で原因を切り分ける

ボタンを押したらエラーになった、入力したのに値が入っていない。こうしたとき、原因は「ブラウザが送った内容」か「Spring の受け取り方」のどちらかにあります。Chrome のデベロッパー ツールで送信内容を見ると、HTML・Thymeleaf 側の問題か、Spring・Java 側の問題かを切り分けられます。

D.1 切り分けの考え方

フォームの「確認」ボタンや一覧の「削除」ボタンを押すと、ブラウザはリクエストを Spring に送ります。リクエストの中身は、HTML・Thymeleaf のテンプレートで決まります。Spring は、Controller のアノテーションやメソッドの引数、フォームクラスで、それを受け取ります。

Web アプリでよくあるミスは、次の5つです。どれも、画面を見ただけでは分かりません。

1. 宛先の URL が違っている
2. POST で送るはずが、GET で送っている
3. パラメータの名前が違っている
4. パラメータに値が入っていない
5. パラメータの個数が違う

デベロッパー ツールの「ネットワーク」タブには、ブラウザが 実際に送った 宛先の URL、メソッド（GET／POST）、パラメータの名前と値が表示されます。これを、送るつもりだった内容と見比べます。

ネットワーク タブで見た送信内容	原因がある側	調べる場所
送るつもりの内容と 違う	HTML・Thymeleaf 側（送る側）	テンプレートの th:action、method="post"、th:field
送るつもりの内容と 同じ	Spring・Java 側（受け取る側）	Controller の @GetMapping・@PostMapping の URL、メソッドの引数の名前、フォームクラス

どちらの側かが分かれば、調べるファイルが半分になります。

D.2 デベロッパー ツールを開いて日本語にする

1. Chrome でアプリの画面（例：http://localhost:8080/employees/register）を開き、F12 キーを押します。画面の右側（または下側）に、デベロッパー ツールが開きます。
2. 初めて開いたときは、デベロッパー ツールが英語で表示されます。上に「DevTools is now available in Japanese」というお知らせが出ていたら、「Always match Chrome's language」を押します。

図D-1 日本語に切り替えるお知らせ（「Always match Chrome's language」を押す）

1. 上に「Settings changed. To apply, reload DevTools.」と表示されたら、「Reload DevTools」を押します。デベロッパー ツールが開き直し、日本語で表示されます。

図D-2 「Reload DevTools」を押す（赤枠）

【ご注意】お知らせを閉じてしまったとき

デベロッパー ツールの上の段の右側にある歯車（Settings）を押し、Preferences → Appearance の「Language」で「Browser UI language」を選びます。設定の画面を閉じると、上に図D-2 の表示が出るので、「Reload DevTools」を押します。

D.3 ネットワーク タブで送信内容を見る

正しく動くときの送信内容を、先に見ておきます。例として、新規登録の入力画面で「確認」を押したときのリクエストを見ます。

ネットワーク タブを準備する

1. デベロッパー ツールの上に並んだタブから「ネットワーク」を選びます。
2. 「ログを保持」にチェックを入れます。

図D-3 「ネットワーク」タブと「ログを保持」（赤枠）

【再確認】「ログを保持」にチェックを入れる

この教材のアプリは、登録や削除のあとに redirect: で別の画面に移ります。チェックを入れていないと、画面が移った時点で一覧が消え、ボタンを押したときのリクエストが見られません。

リクエストを送って、一覧を見る

1. 新規登録の入力画面に値を入力し、「確認」を押します。
2. ネットワーク タブの一覧に、confirm という行が増えます。一覧の「名前」は URL の最後の部分、「ステータス」はステータスコードです。app.css の行は CSS の読み込みなので、今は気にしなくてかまいません。

図D-4 「確認」を押したあとの一覧（赤枠：confirm の行）

宛先の URL とメソッドを見る（ヘッダー タブ）

confirm の行をクリックすると、右側に詳しい内容が表示されます。「ヘッダー」タブの「全般」に、次の3つがあります。

項目	正しいときの値	分かること
リクエスト URL	http://localhost:8080/employees/register/confirm	宛先の URL（ミス①）
リクエスト メソッド	POST	GET か POST か（ミス②）
ステータス コード	200 OK	Spring が返した結果（404、405 など）

図D-5 ヘッダー タブの「全般」（赤枠）

送ったパラメータを見る（ペイロード タブ）

「ペイロード」タブを選ぶと、「フォームデータ」に、送ったパラメータの名前と値が1行ずつ表示されます。

図D-6 ペイロード タブの「フォームデータ」（赤枠）

新規登録の「確認」では、次の6つが送られていれば正しい状態です。名前（ミス③）、値（ミス④）、個数（ミス⑤）をここで確かめます。

フォームデータ（例）

name: 田中 美咲
gender: 2
age: 24
birthDate: 2001-06-15
deptId: 3
address: 愛知県

パラメータの名前は、入力画面の th:field="*{name}" から Thymeleaf が作ったものです。Spring は、この名前と同じ名前のフォームクラスのフィールドに、値を入れます（第10章 10.10）。

【知識メモ】GET のときのパラメータ

GET で送ったときは、パラメータは URL の ? の後ろに付いて送られます。ペイロード タブでは「フォームデータ」ではなく「クエリ文字列パラメータ」に表示されます。

D.4 症状別の切り分け

同じ症状でも、原因が送る側にある場合と、受け取る側にある場合があります。ここでは、教材のアプリで実際に起こした例で、ネットワーク タブのどこを見れば切り分けられるかを示します。

「確認」を押すと 404 になる

ヘッダー タブの「リクエスト URL」を見ます。

リクエスト URL	原因	直す場所
…/employees/register/config （送るつもりと違う）	HTML・Thymeleaf 側：テンプレートの宛先の打ち間違い	入力画面の th:action="@{/employees/register/confirm}"
…/employees/register/confirm （送るつもりと同じ）	Spring・Java 側：受け付ける URL の打ち間違い	Controller の @PostMapping("/employees/register/confirm")

図D-7 送る側の打ち間違い（赤枠：リクエスト URL が config、ステータス コードが 404）

「確認」を押すと 405 になる

ヘッダー タブの「リクエスト メソッド」を見ます。

リクエスト メソッド	原因	直す場所
GET （送るつもりと違う）	HTML・Thymeleaf 側：<form> に method="post" がない。method を書かないと GET で送られる	入力画面の <form … method="post">
POST （送るつもりと同じ）	Spring・Java 側：POST を受け付けるメソッドに @GetMapping を付けている	Controller の @PostMapping

GET で送られたときは、アドレスバーの URL にも ?name=田中+美咲&gender=2… のように、入力した値が付きます。ペイロード タブでは「クエリ文字列パラメータ」に表示されます。

図D-8 送る側のミス（赤枠：アドレスバーの URL に値が付き、ペイロード タブに「クエリ文字列パラメータ」が出ている）

入力したのに「〜を入力してください」と出る

住所を入力して「確認」を押したのに、「住所（都道府県）を入力してください。」と表示される場合です。ペイロード タブの「フォームデータ」を見ます。

フォームデータ	原因	直す場所
address の行がない（5つしかない）	HTML・Thymeleaf 側：入力欄に th:field="*{address}" がなく、名前の付いていない入力欄になっている。名前のない入力欄の値は送られない	入力画面の住所の <input>
address: 愛知県 がある	Spring・Java 側：送られた値を、フォームクラスが受け取れていない。たとえば setter の引数名を setAddress(String adress) と打ち間違えると、中の this.address = address; の右側が引数ではなくフィールド自身になり、値が入らない	フォームクラス（RegisterForm）の setAddress

図D-9 送る側のミス（赤枠：住所を入力したのにエラーが出て、フォームデータに address がない）

「削除」を押すと 400 や 500 になる

削除は、社員IDを URL に埋め込んで送ります（第9章 9.5）。ヘッダー タブの「リクエスト URL」と「ステータス コード」を見ます。

リクエスト URL とステータス	原因	直す場所
…/employees/%7BempId%7D/delete?empid=4、400 （{empId} が数字に置き換わっていない。%7B・%7D は {・} を URL で使える形にしたもの）	HTML・Thymeleaf 側：(empId=${employee.empId}) の名前を empid と打ち間違えた。名前が合わないので、{empId} が置き換わらず、値は ? の後ろに付けられる	一覧画面の th:action="@{/employees/{empId}/delete(empId=${employee.empId})}"
…/employees/4/delete、500 （送るつもりと同じ）	Spring・Java 側：メソッドの引数名を @PathVariable Integer id と打ち間違えた。URL の {empId} と名前が合わないので、値を受け取れない。コンソールに MissingPathVariableException: Required URI template variable 'id' が出る	Controller の delete(@PathVariable Integer empId)

図D-10 送る側のミス（赤枠：{empId} が置き換わらないまま送られ、400 になっている）

【便利な使い方】「ページのソースを表示」と組み合わせる

送る側に原因があると分かったら、Chrome で入力画面や一覧画面を右クリック →「ページのソースを表示」で、Thymeleaf が作った HTML の action・method・name を確かめます（第4章 4.7）。テンプレートのどこが違うのかが分かります。

D.5 まとめ

症状	見る場所	送信内容が違う → 送る側	送信内容が正しい → 受け取る側
404	ヘッダー：リクエスト URL	th:action の URL	@GetMapping・@PostMapping の URL
405	ヘッダー：リクエスト メソッド	method="post"	@GetMapping と @PostMapping の取り違え
400・500（URL に ID を含む処理）	ヘッダー：リクエスト URL	th:action の (empId=…)	@PathVariable の引数名
入力したのに値が入らない	ペイロード：フォームデータ	th:field（名前・個数）	フォームクラスのフィールド・setter

エラーの表示から原因を探す方法は、付録B にまとめています。付録B で原因が絞れないときは、まずネットワーク タブで送信内容を見て、どちらの側を調べるかを決めましょう。

---

前へ

付録C Eclipse 操作早見表・用語集