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

SpringBootコース

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

SpringBoot入門

ここでは**To-Doリスト入力画面を表示するための、コントローラクラスとテンプレートファイル**を作成します。
ここで作成する/関連する範囲は以下のとおりです。
```mermaid
graph LR
    subgraph title[今回該当する範囲（特に★）]
        B["コントローラー"] --"画面を返却（レスポンス）\n★To-Doリスト入力画面"--> A(["👤 クライアント"])
    end
    A --"要求（リクエスト）\n★GET /tasks/new"--> B
    A --"登録リクエスト\n★POST /tasks/new"--> B
        B --"DBへ登録"--> D[(MyBatis\nマッパークラス)]
        D --"登録完了"--> B
        B --"リダイレクト\n★/tasks"--> A
```

**※今回はDB操作の解説を重視してる為、必要に応じてサービス層やリポジトリ層の導入を検討してください。**

## 1. コントローラクラスの機能拡張
### 1. TaskController.javaの機能拡張
* 下記のソースコードを参考に、<button data-type="skill" data-skill="654f1ed1-db53-485f-8b45-daf92ab3fb5a" data-keyword="title"></button>を実装します。
  * `*/tasks/new*`に対して`GETリクエスト`を処理するメソッド`*showCreateForm*`を定義します。
    * 新規タスクを作成するための フォーム画面 を表示します。
    * 空の`*Task*`インスタンスを`Model`に追加し、テンプレート`*tasks/form.html*`に渡します。
  * `*/tasks*`に対して`POSTリクエスト`を処理するメソッド`*createTask*`を定義します。
    * <button data-type="skill" data-skill="b28d8489-32f4-4c23-92cb-14353ad18dc5" data-keyword="title"></button>を使用して、フォームから送信されたタスクのデータを受け取ります。
    * `*TaskMapper*`を利用して、受け取ったタスクをデータベースに登録します。
    * 登録完了後、`*redirect:/tasks*`によりタスク一覧画面に リダイレクト し、作成したタスクが表示されるようにします。
#### 参考用のソースコード
```java~TaskController
// ※ 以下は、変更・追加箇所のみを抜粋しています。
// ※ 既存のimport文、クラス宣言、その他のコードは省略しています。

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

    // 下記メソッドを追加
    @GetMapping("/new")
    public String showCreateForm(Model model) {
        model.addAttribute("task", new Task());
        return "tasks/form";
    }

    // 下記メソッドを追加
    @PostMapping
    public String createTask(@ModelAttribute Task task) {
        taskMapper.insertTask(task);
        return "redirect:/tasks";
    }
```

## 2. テンプレートファイルの作成
### 1. form.htmlの作成

以下の名前とパスで、新規htmlファイルを作成する。
* 名前: `*form.html*`
* ファイルパス: `*todolist/src/main/resources/templates/tasks/*`

作成後、`todolist/src/main/resources/templates/tasks`ディレクトリ内に作成された`form.html`をダブルクリックして開く。

### 2. form.htmlの実装
下記のHTMLテンプレートを参考に、実装します。
1. `<html>`タグにThymeleafの名前空間を指定。
2. `<form>`の<button data-type="skill" data-skill="ff349c7c-9e98-4ce4-9573-5632dacc374a" data-keyword="title"></button>で、タスクのIDに応じた適切なリクエストURLを設定。

#### 参考用のテンプレート
```html~form
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Create/Edit Task</title>
</head>
<body>
    <h1>Create Task</h1>
    <form th:action="@{/tasks}" method="post">
        <label for="name">Task Name</label>
        <input type="text" id="name" name="name" th:value="${task.name}" required />
        <button type="submit">Create</button>
    </form>
</body>
</html>
```
### 3. 解説
1. 名前空間宣言
   * `<html xmlns:th="http://www.thymeleaf.org">`
     * `xmlns:th`属性を指定することで、Thymeleafの属性（`th:text`や`th:each`など）を使用可能にします。
2. フォームの送信先
   * `<form th:action="@{/tasks}" method="post">`
     * `@{/tasks}` を指定し、新規作成の POST リクエストを `/tasks` に送信します。

## 3. 動作確認

作成したアプリケーションを実行し、ブラウザで動作を確認します。

1. アプリケーションを起動し、http://localhost:8080/tasks/new にアクセス。

2. 以下の画面が正しく表示されることを確認します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/f766786e-6702-4c8a-a786-e8a7b96dd1ae.png)
### ディレクトリ構成
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               ├── controller/
    │               │   └── TaskController.java  <-- 今回のレッスンで編集!
    │               ├── mapper/
    │               ├── model/
    │               └── TodolistApplication.java
    └── resources/
    │   ├── static/
    │   └── templates/
    │       ├── tasks/
    │       │   └── form.html  <-- 今回のレッスンで作成!
```
これで、To-Doリスト入力画面のコントローラとテンプレートの実装が完了しました。
次は、機能追加の実装に進みます！


10. To-Doリスト入力画面：コントローラとテンプレート（画面）の実装