SpringBootコース

MyBatisを使ったデータベース有のSpringBootアプリケーション

SpringBoot + MyBatisでTODOリストアプリ作成 (1)

ここでは**To-Doリスト一覧画面を表示するための、コントローラクラスとテンプレートファイル**を作成します。
ここで作成する/関連する範囲は以下のとおりです。

```mermaid
graph LR
    subgraph title[今回該当する範囲（特に★）]
        B["コントローラー"] --"画面を返却（レスポンス）\n★To-Doリスト一覧画面"--> A(["👤 クライアント"])
    end
    A --"要求（リクエスト）\n★/tasks"--> B
        B --問い合わせ--> D[(MyBatis\nマッパークラス)]
        D --検索結果--> B
```
**※他にもクラスをたくさん作成して、機能ごとにコードを分けることもできますが、
今回は簡単なアプリなので、１つのControllerクラスにデータベースとのやり取りのコードを記述します。**

## 1 コントローラクラスの作成
### 1. TaskController.javaの作成
* 新規作成より、**クラス**を選択
* 新規Javaクラスで
   * 名前: `*TaskController*`
   * ソース・フォルダー: `*todolist/src/main/java*`
   * パッケージ：`*com.example.todolist.controller*`  

作成後、`src/main/java/com/example/todolist/controller`ディレクトリ内に作成された`TaskController.java`をダブルクリックして開きます
### 2. TaskController.javaの実装
* 下記のソースコードを参考に、実装します。
   * クラス定義の上に<button data-type="skill" data-skill="4048d5d0-c718-45a5-a1ca-7ff0b35a9b22" data-keyword="title"></button>と<button data-type="skill" data-skill="a4810d47-32ba-4a51-b99e-41f0649d4efe" data-keyword="title"></button>アノテーションを記述。
   * <button data-type="skill" data-skill="1364d8d6-e481-4ec2-8e1f-0b5791714922" data-keyword="title"></button>を用いてTaskMapperをインジェクション(参照: <button data-type="skill" data-skill="ad750f7f-1775-4e40-aec2-48060d29209a" data-keyword="title"></button>)し、データベース操作を行うための準備をします。
   * URL`*/tasks*`に対してGETリクエスト(<button data-type="skill" data-skill="654f1ed1-db53-485f-8b45-daf92ab3fb5a" data-keyword="title"></button>)を処理するメソッド`*listTasks*`を定義。
     * このメソッドでは、`TaskMapper`を利用してデータベースからすべてのタスクを取得します。
     * 取得したタスクのリストを`*tasks*`という名前で<button data-type="skill" data-skill="b25f0613-3c81-49dc-bb27-f28c72845d47" data-keyword="title"></button>に<button data-type="skill" data-skill="2b7d7806-37cd-4506-88a1-2ec6da6d0117" data-keyword="title"></button>で追加し、テンプレート`tasks/list.html`に渡します。
   * 最終的にリスト画面のテンプレート`*tasks/list.html*`を返却します。

#### 参考用のソースコード
```java~TaskController
package com.example.todolist.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.todolist.mapper.TaskMapper;
import com.example.todolist.model.Task;

@Controller
@RequestMapping("/tasks")
public class TaskController {

    @Autowired
    private TaskMapper taskMapper;

    @GetMapping
    public String listTasks(Model model) {
        List<Task> tasks = taskMapper.getAllTasks();
        model.addAttribute("tasks", tasks);
        return "tasks/list";
    }
}

```
## 2. テンプレートファイルの作成
### 1. list.htmlの作成
* 新規作成より、htmlファイルを選択。
* 新規htmlファイルで
   * 名前: `*list.html*`
   * ファイルパス：`*todolist/src/main/resources/templates/tasks*`

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

### 2. list.htmlの実装
* 下記のHTMLテンプレートを参考に、実装します。
   1. html要素にThymeleafの<button data-type="skill" data-skill="e0f77325-8a85-4136-9a66-2add130393b5" data-keyword="title"></button>を指定します。
      * これにより、テンプレート内で**th:text**や**th:each**などのThymeleafの属性を使用可能になります。
   2. タスク一覧を\<ul\>タグ内で繰り返し表示するために、Thymeleafの<button data-type="skill" data-skill="c111e876-422b-4eff-839f-39ad3ff600fe" data-keyword="title"></button>属性を利用します。
      * **th:each**はコレクション（リストやマップのこと。今回は`tasks`）内の各要素を繰り返し処理します。
      * 繰り返し処理内で、各タスクのプロパティを<button data-type="skill" data-skill="2a4dbdb4-d7d5-4380-b36b-5760a8ad8fc1" data-keyword="title"></button>属性で表示します。
   3. 各タスクの編集リンクを表示します。
      * 編集リンクにはタスクのIDを埋め込んだURLを生成するため、**th:href**<button data-type="skill" data-skill="3eaf85ce-8f1b-49b3-ae91-a1b637deb801" data-keyword="title"></button>を使用します。


#### 参考用のテンプレート
```html~list
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>タスク一覧</title>
</head>
<body>
    <h1>タスク一覧</h1>
    <a href="/tasks/new">タスク新規作成</a>
    <ul>
        <li th:each="task : ${tasks}">
            <span th:text="${task.name}"></span>
            <a th:href="'/tasks/' + ${task.id} + '/edit'">編集</a>
        </li>
    </ul>
</body>
</html>

```
### 3. 解説
1.	名前空間宣言
    * `<html xmlns:th="http://www.thymeleaf.org">`
      * xmlns:th属性を宣言することで、Thymeleaf固有の属性を使用可能にします。
2. タスク一覧の繰り返し処理
    * `<li th:each="task : ${tasks}">`
      * tasksはサーバーサイドでモデルに追加されたリストです。
      * taskは繰り返し処理内で各タスクを参照する変数として利用します。
3. リンク生成
    * `<a th:href="'/tasks/' + ${task.id} + '/edit'">Edit</a>`
      * task.idを埋め込んだURLを生成し、該当タスクの編集ページへのリンクを作成します。

## 3. 動作確認

作成したアプリケーションを実行し、ブラウザで動作を確認します。
1. アプリケーションの起動
BootダッシュボードやIDEからプロジェクトを起動します。
2. ブラウザでアクセス
ブラウザのアドレスバーに`*http://localhost:8080/tasks*`と入力し、以下の画面が表示されることを確認します。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/6d351600-7a57-4ebc-8a6e-f469f0ffcb09.png)

### ディレクトリ構成
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               ├── controller/
    │               │   └── TaskController.java  <-- 今回のレッスンで作成!
    │               ├── mapper/
    │               ├── model/
    │               └── TodolistApplication.java
    └── resources/
    │   ├── static/
    │   └── templates/
    │       ├── tasks/
    │       │   └── list.html  <-- 今回のレッスンで作成!
```
これで、To-Doリスト一覧画面のコントローラとテンプレートの実装が完了しました。次は新規作成画面の実装に進みます！