プログラミング言語Java入門です。
Javaの基本的な文法を学びます。

SpringBootコース

SpringBootによるアプリケーション作成

SpringBoot入門

ここでは、**To-Doリストの一覧画面で、タスクの完了状態をトグルできるように、コントローラクラスとテンプレートファイル**を修正します。
今回の処理範囲は以下のとおりです。
```mermaid
graph LR
    subgraph title[今回該当する範囲（特に★）]
        B["コントローラー"] --"リダイレクト\n★/tasks"--> A(["👤 クライアント"])
    end
    A --"完了状態の切り替えリクエスト\n★POST /tasks/{id}/toggle"--> B
        B --"DBを更新（完了状態を変更）"--> D[(MyBatis\nマッパークラス)]
        D --"更新完了"--> B
```
## 1. タスクの完了機能の追加
### 1. コントローラーの機能拡張 (TaskController.java)
* 下記のソースコードを参考に、タスクの完了状態を切り替える機能を実装します。
   * */tasks/{id}/toggle* に対して`POSTリクエスト`を処理するメソッド *toggleCompletion* を定義します。
     * *TaskMapper* を利用して、指定した *id* のタスクの完了状態を反転させます。
     * 処理が完了したら、タスク一覧画面にリダイレクトします。

#### 参考用のソースコード
```java~TaskController
// ※ 以下は、変更・追加箇所のみを抜粋しています。
// ※ 既存のimport文、クラス宣言、その他のコードは省略しています。

    // 下記メソッドを追加
    @PostMapping("/{id}/toggle")
    public String toggleCompletion(@PathVariable Long id) {
        taskMapper.toggleTaskCompletion(id);
        return "redirect:/tasks";
    }
```
### 2. テンプレートファイルの機能拡張 (list.html)
タスクごとにチェックボックスを用意し、チェックすると完了状態が切り替わるようにします。
* `<form>`の *th:action* で */tasks/{id}/toggle* に POSTリクエスト を送信。
* `<input type="checkbox">` を利用し、タスクの完了状態を表現します。
  * <button data-type="skill" data-skill="7215b72f-663f-4749-a60d-a35db56b89f6" data-keyword="title"></button>を利用し、`*th:checked="${task.completed}"*`で完了状態を反映。
  * `*th:onclick="this.form.submit()"*` でチェックボックスの変更時にフォーム送信。

```html~list
<body>
    <h1>Task List</h1>
    <a href="/tasks/new">Create New Task</a>
    <ul>
        <li th:each="task : ${tasks}">
            
            <form th:action="'/tasks/' + ${task.id} + '/toggle'" method="post" style="display: inline;">
                <input type="checkbox" th:checked="${task.completed}" th:onchange="this.form.submit()" />
            </form>
            
            <span th:text="${task.name}"></span>
            <a th:href="'/tasks/' + ${task.id} + '/edit'">Edit</a>
            <form th:action="'/tasks/' + ${task.id} + '/delete'" method="post" style="display: inline;">
                <button type="submit">Delete</button>
            </form>
        </li>
    </ul>
</body>
```
#### 解説
* チェックボックス
   * `<form>` の `th:action="'/tasks/' + ${task.id} + '/toggle'" `で該当タスクの切り替えリクエストを送信。
     * `<input type="checkbox">`の`th:checked="${task.completed}"`で完了状態を表示。
     * `th:onchange="this.form.submit()"`でチェックボックスを変更すると自動でフォーム送信。

## 2. 動作確認
1. アプリケーションを起動し、ブラウザで http://localhost:8080/tasks にアクセス。
2. タスク一覧の チェックボックス をクリックし、タスクの完了状態が切り替わることを確認。

### ディレクトリ構成
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               ├── controller/
    │               │   └── TaskController.java  <-- 今回のレッスンで編集!
    │               ├── mapper/
    │               ├── model/
    │               └── TodolistApplication.java
    └── resources/
    │   ├── static/
    │   └── templates/
    │       ├── tasks/
    │       │   └── list.html  <-- 今回のレッスンで編集!
```
これで、タスクの 完了状態を切り替える機能 の実装が完了しました！
以上でTo-Doリスト管理アプリケーション作成のチュートリアルは全て完了となります。 お疲れ様でした！

14. 機能追加：タスクの完了機能の実装