MyBatisお試し #1

## 概要
- 業務でMyBatisを使用することがあったので理解度向上のために自宅でも色々触ってみる
- 下記のような操作が可能なアプリを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757184/d25c23c7-7d5d-0f52-ecf4-e9dcde43b561.png)

## ソースコード

https://github.com/yamashun38/MyBatis

## Springの起動準備
1. プロジェクト作成
1. コントローラの作成
1. ビューの作成

### プロジェクト作成
| 項目 | 値 |
|:-|:-|
| Project Type  | Gradle  |
| Springバージョン  | 3.4.0  |
| プロジェクト名  | mybatis  |
| Javaバージョン  | 17  |
| Spring依存関係  | Spring Web<br>Spring Boot DevTools<br>MyBatis Framework<br>Thymeleaf<br>Lombok<br>H2 Database  |

#### build.gradle
※執筆時点では少しいじってしまっていたので少し異なるかもしれないけどだいたいこんな感じ

```gradle:build.gradle
plugins {
	id 'java'
	id 'org.springframework.boot' version '3.4.0'
	id 'io.spring.dependency-management' version '1.1.6'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.4'
	runtimeOnly 'com.h2database:h2'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.4'
}
```

### コントローラの作成
- `src/main/java/com/example/mybatis`配下に`controller`パッケージを作成
- `MybatisController`クラスを作成

```java:MybatisController.java
package com.example.mybatis.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MybatisController {

    @GetMapping("/mybatis")
    public String allUsers() {
        return "index";
    }
}
```

- コントローラのため`@Controller`を付与
- `@Getmapping`により`localhost:8080/mybatis`へアクセスした際に`allUsers`メソッドを呼び出し、`index.html`を呼び出すよう指定

### ビューの作成
- ビューとなるHTMLを、`src/main/resources/template`配下に`index.html`を作成

```html:index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyBatis学習ページ</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
</head>
<body>
    <h1>MyBatis学習ページ</h1>
    <p>これから学習していきます</p>
</body>
</html>
```

- `html`タグでThymeleafをインポート
- いったん画面表示できることを確認するため仮でメッセージを用意

#### application.yml
- `prefix`でThymeleafを使用するHTMLが格納されているディレクトリを指定

```yml:application.yml
spring:
  application:
    name: mybatis
  thymeleaf:
    prefix: file:src/main/resources/templates/
```

:::note info
拡張子は.propertiesでも.ymlでもどちらでも問題ないため好みでOK
:::

### 動作確認
- Springを起動し[localhost:8080/mybatis](localhost:8080/mybatis)へアクセスすると下記の通りメッセージが表示されることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757184/d1e44230-1c06-4ad3-9372-7b82debf9c4b.png)

## データベースの用意
- 今回はJVM内で起動するインメモリデータベースであるH2 Databaseを使用

### テーブル作成
- `src/main/resources`配下に`schema.sql`を作成し今回使用するテーブルを作成するDDLを記述
- ユーザIDは自動採番としたいため`AUTO_INCREMENT`を指定
    - 筆者の環境だとなぜか`AUTO_INCREMENT`の部分でエラーが出てしまっているが問題なく起動できるため無視
    - 原因わかる方いたらコメントいただけると助かります。。。

```sql:schema.sql
CREATE TABLE USERS(
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    age INT,
    address VARCHAR(50)
);
```

### データ準備
- `src/main/resources`配下に`data.sql`を作成し、上記で作成したテーブルにデータを追加
- IDは自動採番のため指定しない

```sql:data.sql
INSERT INTO USERS(username, age, address) VALUES('John', 18, 'America');
INSERT INTO USERS(username, age, address) VALUES('Pole', 20, 'Itary');
INSERT INTO USERS(username, age, address) VALUES('Daisuke', 25, 'Japan');
INSERT INTO USERS(username, age, address) VALUES('Mike', 17, 'Canada');
```

### application.yml
- `application.yml`内にデータベース関連の記述を追記

```yml:application.yml
  datasource:
    driver-class-name: org.h2.Driver
    url: jdbc:h2:mem:users;DB_CLOSE_ON_EXIT=TRUE
    username: yamashun
    password:
    initialization-mode: always
  h2:
    console:
      enabled: true
```

- `driver-class-name`でH2データベースを使用することを宣言
- `jdbc:h2:mem:<テーブル名>`で今回使用するテーブル名を指定
- `username`は任意の値を指定
- `password`も任意の値を指定
- `initialization-mode`を`always`とすることでアプリケーション開始時にデータベースの初期化を実施
- `console`を`TRUE`とすることでH2データベースのコンソール([localhost:8080/h2-console](localhost:8080/h2-console))の使用が可能になる

### 動作確認
- Springを起動し[localhost:8080/h2-console](localhost:8080/h2-console)へアクセスすると下記の通りH2データベースのコンソール画面が表示されることを確認
- `Driver Class`、`JDBC URL`、`User Name`、`Password`の4つの項目が`application.yml`で指定した値になっていることを確認しConnectを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757184/743c3a58-62e7-286c-4603-74e97f894857.png)

- USERSを押下すると`USERS`テーブルのデータを全件取得するクエリが表示されるため、Runを押下し実行
- `data.sql`で追加したデータが表示されることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757184/c5e020aa-b8f6-57a3-a585-b32f40151717.png)

## メイン画面の実装
- ユーザの照会や登録、削除などの操作が可能なメイン画面をまずは実装する

### コントローラ

```java:MybatisController.java
    /**
     * メイン画面表示
     */
    @GetMapping("/main")
    public String mybatis() {

        return "main";
    }
```

- [localhost:8080/main](localhost:8080/main)にアクセスするとmain.htmlを表示するよう設定

### ビュー

```html:main.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>メイン画面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>
    <div class="container mt-3">
        <h1>メイン画面</h1>
        <div class="d-flex flex-column align-items-start">
            <a th:href="@{/allUsers}" class="mb-2">ユーザ一覧</a>
            <a th:href="@{/userRegist}" class="mb-2">ユーザ登録</a>
            <a th:href="@{/userSearch}" class="mb-2">ユーザ検索</a>
            <a th:href="@{/userSearch}" class="mb-2">ユーザ情報変更</a>
            <a th:href="@{/userDelete}" class="mb-2">ユーザ削除</a>
        </div>
    </div>
</body>

</html>
```

- Bootstrapで一部見た目を整えているが今回の学習内容とはあまり関係ないため割愛

### メイン画面表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757184/e1f7d992-ac9c-6642-69fe-2ed71c0e906e.png)

## Next

https://qiita.com/yamashun38/items/7731d5ca3da41250fc31