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

SpringBootコース

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

SpringBoot入門

ここでは、**To-Doリストの編集画面を表示し、タスクを更新できるようにするコントローラクラスとテンプレートファイル**を作成します。
今回の処理範囲は以下のとおりです。
```mermaid
graph LR
    subgraph title[今回該当する範囲（特に★）]
        B["コントローラー"] --"編集画面を返却（レスポンス）\n★To-Doリスト編集画面"--> A(["👤 クライアント"])
    end
    A --"要求（リクエスト）\n★GET /tasks/{id}/edit"--> B
    A --"更新リクエスト\n★POST /tasks/{id}"--> B
        B --"DBへ更新"--> D[(MyBatis\nマッパークラス)]
        D --"更新完了"--> B
        B --"リダイレクト\n★/tasks"--> A
```
**※今回はDB操作の解説を重視しているため、必要に応じてサービス層やリポジトリ層の導入を検討してください。**

## 1. タスクの編集機能の追加

### 1. コントローラーの機能拡張 (TaskController.java)
* 下記のソースコードを参考に、タスクの編集機能を実装します。
   * `*/tasks/{id}/edit*`に対して`GETリクエスト`を処理するメソッド `*showEditForm*`を定義します。
     * `*TaskMapper*`を利用して、指定した`*id*`のタスクを取得し、編集用のフォーム画面を表示します。
     * 取得した`*Task*`インスタンスを`Model`に追加し、テンプレート `*tasks/form.html*`に渡します。
   * */tasks/{id}* に対して`POSTリクエスト`を処理するメソッド `*updateTask*`を定義します。
     * `*@ModelAttribute*`を使用して、フォームから送信されたタスクのデータを受け取ります。
     * 受け取ったデータを元に`*TaskMapper*`を利用してデータベースのタスクを更新します。
     * 更新完了後、`*redirect:/tasks*`によりタスク一覧画面に リダイレクト し、更新内容が反映されるようにします。

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

// 下記import文を追加
import org.springframework.web.bind.annotation.PathVariable;

    // 下記メソッドを追加
    @GetMapping("/{id}/edit")
    public String showEditForm(@PathVariable Long id, Model model) {
        Task task = taskMapper.getTaskById(id);
        model.addAttribute("task", task);
        return "tasks/form";
    }

    // 下記メソッドを追加
    @PostMapping("/{id}")
    public String updateTask(@PathVariable Long id, @ModelAttribute Task task) {
        task.setId(id);
        taskMapper.updateTask(task);
        return "redirect:/tasks";
    }
```

### 2. テンプレートファイルの機能拡張 (form.html)

タスクの新規作成と編集を共通のフォームで処理できるように、`th:action`や`th:text`を活用します。
* `<h1>` の<button data-type="skill" data-skill="2a4dbdb4-d7d5-4380-b36b-5760a8ad8fc1" data-keyword="title"></button>を使い、フォームの目的（新規作成 or 編集）に応じたタイトルを表示。
* `<form>`
  * `th:action`を設定し、タスク ID の有無に応じた適切なリクエスト URL を指定。
  * <button data-type="skill" data-skill="3facef34-43ba-4072-bc70-bdee31984132" data-keyword="title"></button>に`task`を設定し、ユーザーが入力したデータと、Javaのオブジェクトを紐づける
* `<button>`の`th:text`を設定し、新規作成と編集でラベルを切り替え。
#### 参考用のテンプレート
```html~form
<body>
    
    <h1 th:text="${task.id != null ? 'Edit Task' : 'Create Task'}"></h1>
    
    <form th:action="${task.id != null ? '/tasks/' + task.id : '/tasks'}" th:object="${task}" method="post">
        <label for="name">Task Name</label>
        
        <input type="text" id="name" name="name" th:value="${task.name}" required />
        
        <button type="submit" th:text="${task.id != null ? 'Save' : 'Create'}"></button>
    </form>
</body>
```
#### 解説
1. タイトルの表示
   * `<h1 th:text="${task.id != null ? 'Edit Task' : 'Create Task'}"></h1>`
     * task.id が 存在する場合 → 「Edit Task」
     * task.id が 存在しない場合 → 「Create Task」
     * これにより、新規作成と編集の画面を同じテンプレートで切り替えることができます。
2. フォームの送信先
   * `<form th:action="${task.id != null ? '/tasks/' + task.id : '/tasks'}" method="post">`
      * task.id が 存在する場合 → POST /tasks/{id} に送信（更新処理）
      * task.id が 存在しない場合 → POST /tasks に送信（新規作成）
3. ボタンの表示
   * `<button type="submit" th:text="${task.id != null ? 'Save' : 'Create'}"></button>`. 
     * task.id が 存在する場合 → ボタンのラベルは「Save」
      * task.id が 存在しない場合 → ボタンのラベルは「Create」

## 2. 動作確認
1. アプリケーションを起動し、ブラウザで http://localhost:8080/tasks にアクセス。
2. 任意のタスクの`Edit`ボタンをクリックし、編集画面に遷移。
3. タスク編集画面で編集して`Save`ボタンをクリックし、タスクが編集されることを確認。

### ディレクトリ構成
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               ├── controller/
    │               │   └── TaskController.java  <-- 今回のレッスンで編集!
    │               ├── mapper/
    │               ├── model/
    │               └── TodolistApplication.java
    └── resources/
    │   ├── static/
    │   └── templates/
    │       ├── tasks/
    │       │   └── form.html  <-- 今回のレッスンで編集!
```
これで、To-Doリスト入力画面へ編集機能の実装が完了しました。
次は、タスクの削除機能の実装に進みます！

12. 機能追加：タスクの編集機能の実装