更新ボタン押下時に型についてのエラーが生じる

実現したいこと

ここに実現したいことを箇条書きで書いてください。

UPDATE機能を実現したい。
更新ボタンを押したらユーザーの入力内容がDBに登録されるようにしたい。

前提

Springで簡単なCRUDを搭載したWebアプリを作ろうとしています。

発生している問題・エラーメッセージ

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Wed Sep 06 20:25:38 JST 2023
There was an unexpected error (type=Bad Request, status=400).
Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; For input string: "${columnId}"
org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; For input string: "${columnId}"


### 該当のソースコード

```Java
/* WebAppControllerのpreUpdateメソッド */
	@GetMapping("/update/{columnId}")
	public ModelAndView preUpdate(@ModelAttribute ColumnForm columnForm, @PathVariable Integer columnId) {
		
		DataSource dataSource = DataSourceBuilder.create().url("jdbc:h2:mem:test").driverClassName("org.h2.Driver").username("sa").password("").build();
		SevenColumnsDaoImpl sevenColumnsDaoImpl = new SevenColumnsDaoImpl(dataSource);
		SevenColumns column = sevenColumnsDaoImpl.getDetail(columnId);
		columnForm = column.changeColumnToForm(columnForm);
		
		ModelAndView modelAndView = new ModelAndView("update");
		modelAndView.addObject("columnForm", columnForm);
		modelAndView.addObject("columnId", columnId);
		modelAndView.addObject("userId", columnForm.getUserId());
		modelAndView.addObject("editDate", columnForm.getEditDate());
		modelAndView.addObject("title", columnForm.getTitle());
		modelAndView.addObject("event", columnForm.getEvent());
		modelAndView.addObject("emotion", columnForm.getEmotion());
		modelAndView.addObject("negative", columnForm.getNegative());
		modelAndView.addObject("distortion", columnForm.getDistortion());
		modelAndView.addObject("reason", columnForm.getReason());
		modelAndView.addObject("disproof", columnForm.getDisproof());
		modelAndView.addObject("another", columnForm.getAnother());
		modelAndView.addObject("changeEmo", columnForm.getChangeEmo());

		return modelAndView;
	}

Java
1/* 同コントローラーのupdateメソッド */
2	@PostMapping("/update/{columnId}")
3	public ModelAndView update(@ModelAttribute ColumnForm columnForm, @PathVariable Integer columnId) {
4		
5		System.out.println(columnId);
6		DataSource dataSource = DataSourceBuilder.create().url("jdbc:h2:mem:test").driverClassName("org.h2.Driver").username("sa").password("").build();
7		SevenColumnsDaoImpl sevenColumnsDaoImpl = new SevenColumnsDaoImpl(dataSource);
8		sevenColumnsDaoImpl.update(columnForm, columnId);
9		
10		UserDaoImpl userDaoImpl = new UserDaoImpl(dataSource);
11		User user = userDaoImpl.searchIdOnly(columnId);
12		ModelAndView modelAndView = new ModelAndView("list");
13		modelAndView.addObject("user", user);
14		String cid = columnId.toString();
15		modelAndView.addObject("columnId", cid);
16		
17		return modelAndView;
18		
19	}
20

HTML
1<!-- detail.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org">
4<head>
5	<title>詳細画面</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- Bootstrap CSSの読み込み -->
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">	
9</head>	
10<body>
11    <nav class="navbar navbar-expand-lg navbar-light bg-light">
12    <a class="navbar-brand text-dark" href="#">日記録 | 認知行動療法サイト</a>
13	<!--<p th:text="'ログインユーザー：' + ' ' + ${user.getUserName()}"></p></nav>-->
14	<h1>認知行動療法 7コラム法 記事詳細ページ</h1>
15	  <table border="1"　class="table table-striped">
16	    <thead　class="thead-light">
17        <tr>
18			<th>見出</th>
19            <th>内容</th>
20        </tr>
21    </thead>
22    <tbody>
23		<tr>
24			<td>ID</td>
25			<td th:text="${columns.columnId}"></td>
26        </tr>
27        <tr>
28			<td>日付</td>
29			<td th:text="${columns.editDate}"></td>
30        </tr>
31        <tr>
32			<td>題名</td>
33			<td th:text="${columns.title}"></td>
34        </tr>
35        <tr>
36			<td>出来事</td>
37			<td th:text="${columns.event}"></td>
38        </tr>
39        <tr>
40			<td>気分</td>
41			<td th:text="${columns.emotion}"></td>
42        </tr>
43        <tr>
44			<td>ネガティブな考え</td>
45			<td th:text="${columns.negative}"></td>
46        </tr>
47        <tr>
48			<td>認知の歪み</td>
49			<td th:text="${columns.distortion}"></td>
50        </tr>
51        <tr>
52			<td>考えの根拠</td>
53			<td th:text="${columns.reason}"></td>
54        </tr>
55        <tr>
56			<td>考えへの反証</td>
57			<td th:text="${columns.disproof}"></td>
58        </tr>
59        <tr>
60        	<td>別の考え</td>
61        	<td th:text="${columns.another}"></td>
62        </tr>
63        <tr>
64			<td>感情の変化</td>
65			<td th:text="${columns.changeEmo}"></td>
66        </tr>
67    </tbody>
68	</table>
69	<form method="get" th:action="@{/update/{columnId}(columnId=${columns.columnId})}">
70		<button type="submit" class="btn btn-success">編集</button>
71	</form>
72</body>
73</html>

HTML
1<!-- update.html -->
2<!DOCTYPE html>
3<html xmlns:th="http://www.thymeleaf.org">
4<head>
5	<title>編集画面</title>
6	<meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <!-- Bootstrap CSSの読み込み -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">	
10</head>	
11<body>
12    <nav class="navbar navbar-expand-lg navbar-light bg-light">
13    <a class="navbar-brand text-dark" href="#">日記録 | 認知行動療法サイト</a>
14	<!--<p th:text="'ログインユーザー：' + ' ' + ${user.userName}"></p></nav>-->
15	<h1>認知行動療法 7コラム法 編集</h1>
16	<form method="post" th:action="@{/update/${columnId}}" th:object="${columnForm}">
17		<input type="hidden" id="columnId" name="columnId" th:value="${param.columnId}" />
18		<input type="hidden" id="userId" name="userId" th:value="${userId}" />
19		
20		<label for="editDate">日付</label>
21		<input type="date" id="editDate" name="editDate" th:value="${editDate}" /><br />
22		
23		<label for="title">題名</label>
24		<input type="text" id="title" name="title" th:value="${title}" /><br />
25
26		<label for="event">出来事</label>
27		<input type="text" id="event" name="event" th:value="${event}" /><br />
28
29		<label for="emotion">気分</label>
30		<input type="text" id="emotion" name="emotion" th:value="${emotion}" /><br />
31
32		<label for="negative">ネガティブな考え</label>
33		<input type="text" id="negative" name="negative" th:value="${negative}" /><br />
34			
35		<label for="distortion">認知の歪み</label>
36		<input type="text" id="distortion" name="distortion" th:value="${distortion}" /><br />
37		
38		<label for="reason">考えの根拠</label>
39		<input type="text" id="reason" name="reason" th:value="${reason}"  /><br />
40		
41		<label for="disproof">考えへの反証</label>
42		<input type="text" id="disproof" name="disproof" th:value="${disproof}"  /><br />
43		
44		<label for="another">別の考え</label>
45		<input type="text" id="another" name="another" th:value="${another}"  /><br />
46		
47		<label for="changeEmo">感情の変化</label>
48		<input type="text" id="changeEmo" name="changeEmo" th:value="${changeEmo}"  /><br />        
49		
50		<button type="submit" class="btn btn-success">更新</button>
51
52	</form>
53</body>
54</html>
55