Spring Bootフレームワークを用いて、シンプルなレンタル管理システムを開発する課題です。


SpringBootコース

テンプレートエンジン(thymeleaf)

レンタル管理システムを作ろう

## ユーザー管理機能について
ここでは、ユーザー管理機能を作成していきます。レンタル管理システムとしては、「レンタルする人」を管理する機能になります。

ユーザー管理機能は、2種類の機能を実装します。

- 登録機能
- 削除機能

上記の機能をそれぞれ、**3層アーキテクチャ**に沿って、コントローラー、サービス、リポジトリの3種類に分けて作成していきます。

### 学習のポイント

この章では、レンタル管理システムの最初の機能として、ユーザー管理機能を実装します。ここでの実装を通じて、以下の点を学びましょう：

1. **3層アーキテクチャの基本構造**：Controller、Service、Repositoryの役割分担を実践的に理解します
2. **MyBatisによるデータベース操作**：アノテーションベースのSQLマッピングを使用して、データベースとJavaオブジェクトを連携させる方法を学びます

ユーザー管理機能は他の2つの機能（アイテム管理、レンタル管理）よりもシンプルなため、
ここで3層アーキテクチャの基本的な流れをしっかり理解しておくことが重要です。
この章で学ぶパターンは、後続の章でも繰り返し使用されます。

### 注目するポイント
また、この章では特に以下の技術的なポイントに注目しましょう
- コントローラでの`@RequestMapping`と`@GetMapping`、`@PostMapping`の使い方
- リポジトリでの`@Select`、`@Insert`、`@Delete`アノテーションによるSQL定義
- Thymeleafテンプレートでの`th:each`によるリスト表示と`th:object`によるフォームバインディング


## データベース関連の設定

1.  SQLの実行、テーブル作成

```sql~コンソールで実行するSQL
    CREATE TABLE users (
      id INT PRIMARY KEY AUTO_INCREMENT,
      name VARCHAR(50) NOT NULL,
      email VARCHAR(100) NOT NULL
    );

INSERT INTO users (id, name, email) VALUES
(1, '田中 太郎', 'taro.tanaka@example.com'),
(2, '鈴木 花子', 'hanako.suzuki@example.com'),
(3, '佐藤 次郎', 'jiro.sato@example.com');
```
2. コミットし、完了

## ユーザー関連クラスの作成
最初に、3層アーキテクチャの確認を行いましょう。

```mermaid
flowchart 
    subgraph 3層アーキテクチャ
        A[プレゼンテーション層<br><br>◆UserController]
        B[ビジネス層<br><br>◆UserService<br>◆User]
        C[(データアクセス層<br><br>◆UserRepository)]
    end
    A <-->B
    B <-->C
```

◆とついている部品が、今回作成するクラスになります。

1. Userクラスの作成
2. UserRepositoryの作成
3. UserServiceの作成
4. UserControllerの作成

の順で進めていきます。

### 1-1 .Userクラスの作成 (User.java)
下記のクラスを作成しましょう。
- 名前 : User
- パッケージ： com.example.rental.model

作成できたら、`src/main/java`ディレクトリ内に作成された`User.java`をダブルクリックして開きます。

### 1-2. Userクラスの実装

- 以下のクラス図とソースコードを参考に、フィールド、メソッドを実装しましょう。
    - IDEによっては、フィールドを記述した後は、各種メソッドを自動作成することも可能です
    - Eclipseの場合、メニューの「ソース」 > 「getterおよびsetterの生成」や、「フィールドを使用してコンストラクターを生成」からメソッドを自動で生成することができます

#### クラス図

```mermaid
classDiagram
    class User {
        - Integer id;
        - String name;
        - String email;
        + getterおよびsetter()
    } 
```

#### ソースコード

```java~User
    // src/main/java/com/example/rental/entity/User.java
    package com.example.rental.model;
    
    public class User {
        private Integer id;
        private String name;
        private String email;
    
        // Getter/Setter
        public Integer getId() { return id; }
        public void setId(Integer id) { this.id = id; }
    
        public String getName() { return name; }
        public void setName(String name) { this.name = name; }
    
        public String getEmail() { return email; }
        public void setEmail(String email) { this.email = email; }
    }
```


### 2-1 .UserRepositoryインターフェースの作成 (UserRepository.java)

下記の**インターフェース**を作成しましょう。
- 名前 : UserRepository
- パッケージ： com.example.rental.repository

作成できたら、`src/main/java`ディレクトリ内に作成された`UserRepository.java`をダブルクリックして開きます。

### 2-2. UserRepositoryインターフェースの実装

- 下記のソースコードを参考に、作成
  - インターフェースに`@Mapper`を指定しておく (DIの管理対象になる)
  - アノテーションでSQLを記述することができる
  - パラメータは、SQL内のプレースホルダー #{  } にバインドされる
    - `findById(Integer id)`の例 ： 実引数で渡された`id`が`WHERE ID = #{id}`の`#{id}`に格納される
    - `insert(User user)`の例 : `user`のフィールド`name`と`email `がそれぞれプレースホルダー`#{name}`および`#{email}`にバインドされる
```java~UserRepository
    package com.example.rental.repository;
    
    import com.example.rental.entity.User;
    import org.apache.ibatis.annotations.*;
    
    import java.util.List;

     @Mapper
    public interface UserRepository {
    

        @Select("SELECT * FROM users")
        List<User> findAll();
    
        @Select("SELECT * FROM users WHERE id = #{id}")
        User findById(Integer id);
    
        @Insert("INSERT INTO users (name, email) VALUES (#{name}, #{email})")
        void insert(User user);
    
        @Delete("DELETE FROM users WHERE id = #{id}")
        void delete(Integer id);
    }
```
- それぞれの機能で用いるメソッドを用意しておく
  - `findAll` : ユーザー一覧機能
  - `findById` : ユーザーの特定(主キーでの1件取得は、様々な場面で利用できる)
  - `insert` : ユーザー登録機能
  - `delete` : ユーザー削除機能

### 3-1 .UserServiceクラスの作成 (UserService.java)

下記のクラスを作成しましょう。
- 名前 : UserService
- パッケージ： com.example.rental.service

作成できたら、`src/main/java`ディレクトリ内に作成された`UserService.java`をダブルクリックして開きます。

### 3-2. UserServiceクラスの実装
- 下記のソースコードを参考に、作成
  -  クラスに`@Service`を指定しておく (DIの管理対象になる)
  - `UserService`に関しては特別な役割はなく、単なる仲介役にとどまる
    - 将来的にユーザー関連のビジネスロジックが追加されるときは、このクラスに記述するとよい

```java~UserService
package com.example.rental.service;

import com.example.rental.entity.User;
import com.example.rental.repository.UserRepository;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {

    private final UserRepository userRepository;

    //RepositoryのインスタンスはDI(依存性注入)される
    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    public User getUserById(Integer id) {
        return userRepository.findById(id);
    }

    public void saveUser(User user) {
        userRepository.insert(user);
    }

    public void deleteUser(Integer id) {
        userRepository.delete(id);
    }
}
```

- `Repository`の機能に対応するメソッドを実装する

| **UserService メソッド**| **UserRepository メソッド**  | **説明**  |
|-|-|-|
| `getAllUsers()`  | `findAll()` | すべてのユーザー情報を取得する  |
| `getUserById(Integer id)`| `findById(Integer id)`  | 指定されたIDのユーザー情報を取得する|
| `saveUser(User user)`| `insert(User user)` | ユーザー情報を保存する |
| `deleteUser(Integer id)` | `delete(Integer id)`| 指定されたIDのユーザー情報を削除する|


### 4-1 .UserControllerクラスの作成 (UserController.java)

下記のクラスを作成しましょう。
- 名前 : UserController
- パッケージ： com.example.rental.Controller

作成できたら、`src/main/java`ディレクトリ内に作成された`UserController.java`をダブルクリックして開きます。

### 4-2. UserControllerクrasuの実装

- 下記のソースコードを参考に、作成
  - ユーザー側の操作を意識して、各メソッドを作成する

| **ユーザーの操作**| **UserControllerのメソッド**  | **説明**  |
|-|-|-|
| ユーザー一覧画面の表示  | listUsers(Model model) | すべてのユーザー情報を取得する |
| 新規ユーザー登録画面の表示 | showCreateForm(Model model) | 登録用フォームを表示する |
| 新規ユーザー登録フォームの送信 | createUser(User user) | ユーザー情報を保存する |
| ユーザー削除ボタンの押下 | deleteUser(Integer id) | 指定されたIDのユーザー情報を削除する |

```java~UserController

package com.example.rental.controller;

import com.example.rental.entity.User;
import com.example.rental.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/users")
public class UserController {

    private final UserService userService;

    //ServiceのインスタンスはDI(依存性注入)される
    public UserController(UserService userService) {
        this.userService = userService;
    }

    // ユーザー一覧表示
    @GetMapping
    public String listUsers(Model model) {
        model.addAttribute("users", userService.getAllUsers());
        return "user-list";
    }

    // 新規登録フォーム表示
    @GetMapping("/new")
    public String showCreateForm(Model model) {
        model.addAttribute("user", new User());
        return "user-form";
    }

    // 新規登録
    @PostMapping
    public String createUser(@ModelAttribute User user) {
        userService.saveUser(user);
        return "redirect:/users";
    }

    // 削除
    @GetMapping("/delete/{id}")
    public String deleteUser(@PathVariable Integer id) {
        userService.deleteUser(id);
        return "redirect:/users";
    }
}
```

### 5-1. ユーザー登録フォームのテンプレート作成  (user_form.html)

下記のHTMLを作成しましょう。

- 名前: user_form.html
- ファイルパス：src/main/resources/templates/

として**完了**をクリックし、

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


### 5-2.   ユーザー登録フォームのテンプレート実装 (`user_form.html`)
- 下記のHTMLファイルを参考に、作成
  - リクエストがコントローラーのメソッド`createUser()`に対応するように指定する。(**"/users"へPost**)できるようにフォームを作成する。

  - User.javaのフィールドに対応したコントロールを記述する
    - `User#id` : `*{id}`
    - `User#name` : `*{name}`
    - `User#email` : `*{email}`


```html~user_form
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ユーザー登録</title>
</head>
<body>
<h1>ユーザー登録</h1>
<form th:action="@{/users}" method="post" th:object="${user}">
    <input type="hidden" th:field="*{id}" />
    <label for="name">名前:</label>
    <input type="text" id="name" th:field="*{name}" required />
    <br/>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" th:field="*{email}" required />
    <br/>
    <button type="submit">保存</button>
</form>
<a href="/users">ユーザー一覧に戻る</a>
</body>
</html>
```

### 5-1. ユーザー一覧のテンプレート作成  (user_list.html)

下記のHTMLを作成しましょう。

- 名前: user_list.html
- ファイルパス：src/main/resources/templates/

として**完了**をクリックし、

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


### 5-2.   ユーザー一覧のテンプレート実装 (`user_list.html`)
- 下記のHTMLファイルを参考に、作成
  - 各リンクと対応する`Controller`のメソッドを確認しながら実装する

| **HTMLの表記** | **リクエストURL** | **対応するメソッド** |
|-|-|-|
| `<a href="/users/new">新規ユーザー登録</a>` | `/users/new` (GET) | `showCreateForm(Model model)` |
| `<a th:href="@{/users/delete/{id}(id=${user.id})}">削除</a>` | `/users/delete/{id}` (GET) | `deleteUser(@PathVariable Integer id)`|

```html~user_list
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ユーザー一覧</title>
</head>
<body>
<h1>ユーザー一覧</h1>
<a href="/users/new">新規ユーザー登録</a>
<table border="1">
    <thead>
        <tr>
            <th>名前</th>
            <th>メールアドレス</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
        <td th:text="${user.name}"></td>
        <td th:text="${user.email}"></td>
        <td>
            <a th:href="@{/users/delete/{id}(id=${user.id})}"
               onclick="return confirm('削除しますか？')">
                削除
            </a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
```


## User管理機能の動作確認

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

1. アプリケーションの実行

**Bootダッシュボード(下図参照)**より localサーバー内の**__rental[devtools]__**を選択し、左上の開始ボタンをクリックする。

**[TODO: 画像差し替え]**
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/8261bd7e-c863-4c05-b24c-96c15caafff6.png)

2. ブラウザからアクセスする

ブラウザ（ChromeやSafariなど）のアドレスバーに *http://localhost:8080/users* と入力し、以下の画像のような結果となることを確認する。

**[TODO:画像]**

ユーザー一覧の表示が確認出来たら、以下の操作を行い、確認する
- 新規登録リンクから、新規登録画面が表示されるか
- 任意の新規ユーザー登録を行い、データーベース(H2Consoleで確認する)に変化があるか
  - ユーザー一覧に表示されるかも確認する
- 任意のユーザー削除を行い、データベース(H2Consoleで確認する)に変化があるか
  - ユーザー一覧から消えるかも確認する

---

これで、ユーザー管理機能の関連クラス、および画面が完成しました。



5. ユーザー管理機能の実装