Java + H2 削除機能、更新機能を追加したい。

前提

プロになるJava ―仕事で必要なプログラミングの知識がゼロから身につく最高の指南書
Java + H2 でデータベース、タスク管理アプリケーションを作りました。

実現したいこと

削除機能の動作、更新ボタンの更新ダイアログの表示がうまく動かないので
動くようにしたい。

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

無し（表示されない）

該当のソースコード

HomeController.java

Java
1package jp.gihyo.projava.tasklist;
2
3import org.springframework.beans.factory.annotation.Autowired;
4import org.springframework.stereotype.Controller;
5import org.springframework.ui.Model;
6import org.springframework.web.bind.annotation.GetMapping;
7import org.springframework.web.bind.annotation.RequestMapping;
8import org.springframework.web.bind.annotation.RequestParam;
9import org.springframework.web.bind.annotation.ResponseBody;
10
11import java.time.LocalDateTime;
12import java.util.ArrayList;
13import java.util.List;
14import java.util.UUID;
15
16@Controller
17public class HomeController {
18    private final TaskListDao dao;
19
20    @Autowired
21    HomeController(TaskListDao dao){
22        this.dao = dao;
23    }
24    record TaskItem(String id, String task, String deadline, boolean done){}
25    private List<TaskItem> taskItems = new ArrayList<>();
26
27    @RequestMapping(value="/hello")
28    String hello(Model model){
29        model.addAttribute("time", LocalDateTime.now());
30        return "hello";
31    }
32    @GetMapping("/list")
33    String listItems(Model model){
34        List<TaskItem> taskItems = dao.findAll();
35        model.addAttribute("taskList", taskItems);
36        return "home";
37    }
38    @GetMapping("/add")
39    String addItem(@RequestParam("task") String task,
40                   @RequestParam("deadline") String deadline) {
41        String id = UUID.randomUUID().toString().substring(0,8);
42        TaskItem item = new TaskItem(id,task,deadline,false);
43        dao.add(item);
44
45        return "redirect:/list";
46    }
47
48    @GetMapping("/delete")
49    String deleteItem(@RequestParam("id") String id ) {
50        dao.delete(id);
51        return "redirect:/list";
52    }
53
54    @GetMapping("/update")
55    String updateItem(@RequestParam("id") String id,
56                      @RequestParam("task") String task,
57                      @RequestParam("deadline") String deadline,
58                      @RequestParam("done") boolean done ) {
59        TaskItem taskItem = new TaskItem(id,task,deadline,done);
60        dao.update(taskItem);
61        return "redirect:/list";
62    }
63}
64

TaskListDao.java

Java
1package jp.gihyo.projava.tasklist;
2
3import jp.gihyo.projava.tasklist.HomeController.TaskItem;
4
5import org.springframework.beans.factory.annotation.Autowired;
6import org.springframework.jdbc.core.JdbcTemplate;
7import org.springframework.jdbc.core.namedparam.BeanPropertySqlParameterSource;
8import org.springframework.jdbc.core.namedparam.SqlParameterSource;
9import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
10import org.springframework.stereotype.Service;
11
12
13import java.util.List;
14import java.util.Map;
15
16@Service
17public class TaskListDao {
18    private final JdbcTemplate jdbcTemplate;
19
20    @Autowired
21    TaskListDao(JdbcTemplate jdbcTemplate){
22        this.jdbcTemplate = jdbcTemplate;
23    }
24
25    public void add(TaskItem taskItem){
26        SqlParameterSource param = new BeanPropertySqlParameterSource((taskItem));
27        SimpleJdbcInsert insert = new SimpleJdbcInsert(jdbcTemplate)
28                .withTableName(("tasklist"));
29        insert.execute(param);
30    }
31
32    public List<TaskItem> findAll() {
33        String query = "SELECT * FROM tasklist";
34
35        List<Map<String,Object>> result = jdbcTemplate.queryForList(query);
36        List<TaskItem> taskItems = result.stream().map((Map<String,Object> row) -> new TaskItem(
37                row.get("id").toString(),
38                row.get("task").toString(),
39                row.get("deadline").toString(),
40                (Boolean)row.get("done")))
41                .toList();
42
43        return taskItems;
44    }
45
46    public int delete(String id) {
47        int number = jdbcTemplate.update("DELETE FROM tasklist WHERE id = ?", id);
48        return number;
49    }
50
51    public int update(TaskItem taskItem) {
52        int number = jdbcTemplate.update(
53                "UPDATE tasklist SET task = ?, deadline = ?, done = ? WHERE id = ?",
54                taskItem.task(),
55                taskItem.deadline(),
56                taskItem.done(),
57                taskItem.id()
58        );
59        return number;
60    }
61}

home.html

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4  <meta charset="UTF-8">
5  <title>タスク管理アプリケーション</title>
6  <link th:gref="@{/home.css}" rel="stylesheet">
7</head>
8<body>
9<h1>タスク管理アプリケーション</h1>
10
11<div class="task_form">
12  <h2>タスクの管理</h2>
13
14  <form action="/add">
15    <label>タスク</label>
16    <input name="task" type="text" />
17    <label>期限</label>
18    <input name="deadline" type="date" />
19    <input type="submit" value="登録" />
20  </form>
21</div>
22
23<div class="tasklist">
24  <h2>タスクの一覧</h2>
25  <table border="1" style="border-collapse:collapse;">
26    <thread>
27      <tr><th class="hidden">ID</th>
28        <th>タスク</th>
29        <th width="150px">期限</th>
30        <th width="100px">状態</ th>
31      </tr>
32    </thread>
33    <tbody>
34    <tr th:each="task : ${taskList}">
35      <td class="hidden" th:text="${task.id}"></td>
36      <td th:text="${task.task}"></td>
37      <td width="100px" th:text="${task.deadline}"></td>
38      <td width="50"px th:text="${task.done} ? '完了':'未完了'"></td>
39      <td width="50px">
40        <button type="submit" id="update_button" onclick="
41          let row = this.parentElement.parentElement;
42          getElementById('update_id').value=row.cells[0].firstChild.data;
43          getElementById('update_task').value=
44          row.cells[1].firstChild.data;
45          getElementById('update_deadline').value=row.cells[2].firstChild.data;
46          getElementById('update_status').selectIndex=(row.cells[3].firstChild.data=='完了')?1:0;
47          var dialog = getElementById('updateDialog');
48          dialog.style.left = ((window.innerWidth - 500) / 2 ) + 'px';
49          dialog.sytle.display = 'block';
50          ">更新</button>
51      </td>
52      <td width="50px">
53        <form action="/delete">
54          <button type="submit" id="delete_button">削除</button>
55          <input type="hidden" name="id" th:values="${task.id}" />
56        </form>
57      </td>
58    </tr>
59    </tbody>
60  </table>
61
62</div>
63
64<div id="updateDialog">
65  <div class="task_form">
66    <h2>タスクの更新</h2>
67    <form action="/update">
68      <input id="update_id" name="id" type="hidden" />
69      <label>タスク</label>
70      <input id="update_task" name="task" type="text" />
71      <label>期限</label>
72      <input id="update_deadline" name="deadline" type="date" />
73      <label>状態</label>
74      <select id="update_status" name="done">
75        <option value="false">未完了</option>
76        <option value="true">完了</option>
77      </select>
78      <div>
79        <button type="submit">更新</button>
80        <button type="reset" onclick="getElementById('updateDialog').style.display='none';">キャンセル</button>
81      </div>
82    </form>
83</div>
84</div>
85
86</body>
87</html>

home.css

CSS
1body {
2    margin: 30px;
3    color: #283655;
4    }
5
6input {
7    border: 1px solid;
8}
9.hidden {
10    display: none;
11}
12
13.task_form {
14    padding: 0px 10px 10px 10px;
15    border: 1px solid #4D648D;
16}
17.task_form form {
18    display: grid;
19    grid-template-columns: 100px 1fr;
20}
21.task_form input[type="date"], select {
22    width: 150px;
23}
24
25
26.taskList table {
27    width: 100%;
28    border: 1px solid;
29    border-collapse: collapse;
30}
31
32
33#updateDialog {
34    display: none;
35    border: 2px double;
36    width: 500px;
37    position: fixed;
38    top: 120px;
39    z-index: 9999;
40}