SpringBootコース

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

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

ここでは、開発対象となるWebアプリケーションの概要を確認していきます。

## アプリケーションの概要
ユーザーがタスクの新規作成、表示、編集、削除といったCRUD操作できるアプリケーションを作成します。
以下のような画面が含まれます。

- **一覧画面**
  - 登録された全タスクがID順に表示される。  
  - 各タスクに対して「編集」「削除」ボタンを配置。

- **入力/編集画面**  
  - タスク新規作成時や既存タスク編集時に利用。  
  - フォームにはタスク名（必須・最大10文字）の入力および送信ボタンが用意され、バリデーションエラー時にメッセージ（例：「タスク名は必須です」）を表示。

```mermaid
graph TD;
    A[一覧画面] -- "1. 新規作成・編集" --> B[入力/編集画面]
    B -- "作成・更新" --> A
    A -- "削除" --> A
```

##  完成図(参考) スクリーンショット
### 1. 新規作成or編集
#### 新規作成
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ea269c77-47d7-4831-aa56-419df5c4a922.png)
#### 編集
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/1281df25-3050-4bca-adab-b547bf134f8b.png)
### 2. 登録or保存
#### 作成
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/a434e9fb-47a5-4f74-bcc3-b17c87c2a739.png)
#### 保存
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c6b9841e-f6bf-49f4-9415-e9bee269bd72.png)
### 3. 完了or削除
#### 完了
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/da72cd5f-d1c6-41db-8b52-87e571e7bc6b.png)
#### 削除
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/0966cf50-970d-4f0f-807e-a0adac51f744.png)

## メイントピック機能
このレッスンで実装する検索機能の流れを以下に示します。
```mermaid
graph TB
    subgraph title[今回作成する範囲]
        B["コントローラー"] --"画面を返却（レスポンス）\n一覧画面or入力・編集画面"--> A(["👤 クライアント"])
    A --"要求（リクエスト）\n新規作成/編集/削除/完了"--> B
        B --"CRUD操作"--> D[(MyBatis\nマッパークラス)]
        D --"処理結果"--> B
    end
```

- **基本機能（CRUD）**  
  - **Create（作成）**: 新しいタスクを登録する  
  - **Read（読み取り）**: 登録済みタスクの一覧表示  
  - **Update（更新）**: タスク内容の編集と完了状態の切替  
  - **Delete（削除）**: タスクの削除

- **バリデーション機能**  
  - タスク名は必須であり、かつ最大10文字以内に制限。  
  - バリデーションエラー時はフォーム再表示とエラーメッセージの出力を実施。

- **画面遷移と連携**  
  - 各画面間の遷移（一覧 → 新規/編集 → 一覧戻り）
  - MyBatisマッパーを用いたDB連携、ThymeleafでのHTMLテンプレートレンダリングにより、各操作をシームレスに実現。


## プロジェクト構成
本レッスンで登場するファイルの一覧です。
### 初期状態
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               └── TodolistApplication.java
    └── resources/
        │    ├── static/
        │    └── templates/
        └── application.properties 

```
###  完成状態
```
src/
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── todolist/
    │               ├── controller/
    │               │   └── TaskController.java   ← コントローラ（リクエストとレスポンスの制御）
    │               ├── mapper/
    │               │   └── TaskMapper.java       ← DBアクセス用のMyBatisマッパー
    │               ├── model/
    │               │   └── Task.java             ← DBテーブルに対応するモデル
    │               └── TodolistApplication.java  ← Spring Boot アプリ起動クラス
    └── resources/
        │    └── templates/
        │       └── tasks/
        │              └── form.html              ← タスク作成/編集画面のテンプレ
        │              └── list.html              ← タスク一覧画面のテンプレート
        ├── application.properties                ← DB接続や各種設定
        └── schema.sql                            ← DBスキーマ作成用DDL

```
ここまで確認出来たら、次からはいよいよアプリケーションの作成を開始していきます！