Springboot＋MyBatisの環境構築/HelloWorldの出力

Javaを触ってみるローカル環境をつくりました。環境構築のたびにドキュメントを探すのは大変なので、備忘録として環境構築手順を残しておきます。SpringbootとMyBatisを使うような構成です。環境構築をして、HelloWorldをブラウザに表示させるところまでを記載します。

開発環境は以下の通りです。

| JDK | 言語|フレームワーク|ビルドツール|テンプレートエンジン
|:-----------:|:------------:|:------------:|:------------:|:------------:|
| Amazon Corretto 17|Java 17|Spring boot|Maven|Thymeleaf |

 
|データベース管理システム | O/Rマッパー |
|:-----------:|:------------:|
|MySQL| MyBatis| 

|統合開発環境（IDE） | データベース管理ツール|
|:-----------:|:------------:|
|STS| MySQL Workbench| 



# JDKのインストール
JDKとは「Javaでの開発をするのに必要なツールがまとまっているもの」です。「Java Development Kit」の略です。今回は「[Amazon Corretto](https://docs.aws.amazon.com/ja_jp/corretto/latest/corretto-17-ug/what-is-corretto-17.html "Amazon Corretto")」を使います。バージョンは17です。無償で使うことができます。また、JDK1つとっても様々で、他には「Oracle JDK」「OpenJDK」などがあります。


## JDKのインストール
まず、JDKのインストールをしましょう。

https://docs.aws.amazon.com/corretto/latest/corretto-17-ug/downloads-list.html

↑のリンクを開くと↓のような画面が表示されます。

![amazonCorretto1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/30ce1d30-9928-43fe-a085-957d34fb5b76.png)

windowsの方は「~~ windows-jdk.msi」をクリックし、ダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/d4c8519d-2fac-e086-c160-54ecf2fd999e.png)

ダウンロードすると↓のような画面がいくつか出てくるので、「Next」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/81dd975d-c554-5311-e475-369929071800.png)

これでインストールは完了です。エクスプローラーの「C:\Program Files\Amazon Corretto」にインストールした「Amazon Corretto」が入っているようですね。また、環境変数の設定は不要です。「環境変数のシステム環境設定」をみるとpathも通っています。環境変数とは何か気になる方は[こちら](https://eng-entrance.com/java-install-env "ちゃんとできてる？Javaの環境変数の設定方法")。

## インストールができているか確認

コマンドプロンプトを開いて、↓のコマンドからJavaのバージョンを確認します。

```
java -version
```

Amazon corretto のバージョンが表示されたら、インストールがちゃんとできています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/06f594a9-f2fb-ad56-80b0-98693d444194.png)

# STSのインストール
続いてSTSのインストールをしていきましょう。

https://spring.io/tools

↑のリンクを開くと↓のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/8390896f-86d5-573c-2458-b9e061588de0.png)

Windowsの方は「WINDOWS」をクリックし、ダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/76495ee6-0a27-70ce-03b6-a76782bbc281.png)

ダウンロード後、フォルダを解凍し任意の場所に配置します。解凍したフォルダを開いて、正しく解凍できているか確認しましょう。
これで、STSのインストールは完了です。

## STSの起動
続いて、STSを起動していきます。エクスプローラーから「SpringToolSuite4」をダブルクリックします。ちなみに、僕は環境構築をする際は、C直下に「tools」というフォルダを作って、STSなど環境構築に必要なものをまとめて格納するようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/4c4d383e-d591-79f0-b0c0-d2f21e13c740.png)

起動すると、workspaceを選ぶ画面が表示されます。workspaceとは、アプリケーションのソースファイルや設定ファイルが格納される保存フォルダです。変えても大丈夫ですし、デフォルトのものでもOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/8baf2838-77d2-bf2e-910a-c90815709bc8.png)

↑の画面で「Launch」をクリックすると、STSを起動できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/7929de85-8d42-9ae9-e593-9be29e48b819.png)

## STSの日本語化
STSを日本語化しましょう。以下より、日本語化用のファイルをダウンロードします。

https://mergedoc.osdn.jp/

↑のリンクを開くと↓のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/f059c207-8d92-1352-a6f8-4b6bf037082e.png)

プラグインをダウンロードしたいので、↓の部分から使っているOSに沿ってダウンロードします。私はwindowsを使っているので、「Windows」を選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/fdb754a1-4543-a012-651c-2b91b68224e5.png)

次の画面では広告も混じっているのですが、「Preparing to download Eclipse Pleiads plugin」のURLを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/c6ef2a0c-7401-6d2f-8c90-80a19e73cc12.png)

ダウンロード後、zipファイルを解凍します。解凍したフォルダの中にある「setup.exe」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/9b2b92ff-a6a8-3128-f8a1-aa44df477b96.png)

「日本語化するアプリケーション」で先ほどダウンロードした「STS（SpringToolSuite4.exe）」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/517e63d8-7823-085a-ff00-eefb300b8777.png)

「日本語化する」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/6791758d-7b4d-7e06-47e0-e2da160c62e5.png)

OKをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/4250ccef-f17b-2944-38e3-ca94d5429895.png)

STSを再起動します。（環境構築で何かを設定したりプラグインを入れたら、再起動するとよいです。）日本語化されていてばOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/6edcffeb-4740-035b-2767-567fc4f914d9.png)


# MySQLのインストール
MySQLのインストールは別記事に記載しました。

WindowsにMySQLをインストールする

https://qiita.com/aki_number16/items/bff7aab79fb8c9657b62

# DB作成・接続設定
coming soon

# Springbootでプロジェクトを作成＋HelloWorldを出力
つくった環境でSpringbootでHelloWorldを入力し、ちゃんと動くか確認しましょう。

## プロジェクトの作成
まずはじめに、プロジェクトを作成していきます。STSの「ファイル」→「新規」→「プロジェクト(R)」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/f4d48ec7-15f7-b604-22e9-ce4b07c1fbe9.png)


「Spring Boot」→「Springスターター・プロジェクト」を選択して「次へ(N)」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/06cec9b2-d152-5f11-6192-71c91e21641f.png)


細かく設定をしていきます。今回は以下のように設定しました。
名前→「practice」
タイプ→「Maven」
パッケージング→「War」
そのほかの項目はデフォルトのまま、「次へ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/8202212f-dd74-af60-608b-bef2816caac3.png)


さらに設定を続けましょう。
開発者ツール→「Lombok」
SQL→「Mybatis Framework」「Mysql Driver」
テンプレート・エンジン→「thymeleaf」
web→「Spring web」
上記を選択して「完了」をクリックします。これでプロジェクトが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/1f7b6dd6-1106-0851-e121-892fa08f8737.png)

# HelloWorldを出力する
Springbootを使って「HelloWorld」を画面に表示してみましょう。ディレクトリ構成はこちらです。
```
ディレクトリ構成
practice
└─src/main/java
            └─com.example.demo.controller
                                  └─HelloWorldController.java

└─src/main/resources
            └─templates
                   └─index.html
```

Java側では、GETリクエストを受け取り、modelに変数「message」を加えてindex.htmlを返すメソッドを作成しました。「@Controller」のアノテーションを忘れずにつけておきたいですね。

```java:HelloWorldController.java
package com.example.demo.controller;

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

@Controller
public class HelloWorldController {
	
    @GetMapping(value = "/HelloWorld")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello World");
        return "index";
    }
}
```

html側では、Java側から渡ってきた文字列を表示するような記載をしています。
※htmlファイルの作成の方法は本稿の一番下に追記しました（2023年8月11日）
```html:index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>HelloWorld</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1><span th:text="${message}"></span></h1>
  </body>
</html>
```

コードをかけたら、起動してブラウザ側で「HelloWorld」を表示させてみましょう。
プロジェクト名（スクショではpractice）の上で右クリックして、「実行」＞「Spting bootアプリケーション」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/b7d0aef3-13e4-e846-660a-416a36c340b4.png)

Googlechromeなどブラウザから、「http://localhost:8080/HelloWorld」
でアクセスして、↓のような画面になれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/7c472a7e-475f-e027-2554-bce97fdcf194.png)

参考文献のサイトの記事を参考にながら、少し自分なりに変えて環境構築を行ってみました。誰かの役に立ったら嬉しいです。

最後まで読んでいただいた方、ありがとうございました。



# 参考文献
■ITを分かりやすく解説（2022年12月）「EclipseでSpring Bootの環境構築 | 分かりやすく図解で説明」, https://medium-company.com/spring-boot%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89/ 2023年7月30日アクセス.
■ITを分かりやすく解説（2022年12月）「Spring Boot＋Thymeleafで”Hello World”を作成する」, https://medium-company.com/spring-boot-thymeleaf/ 2023年7月30日アクセス.

# htmlファイルの作成（2023年8月11日追記）
htmlファイルを作成する方法を追記します。

パッケージ・エクスプローラーの「src/main/resources」配下にある「templates」の上で右クリックします。
「新規」＞「その他」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/6e98a12c-257e-a4a3-6453-61bc00384817.png)

「一般」＞「ファイル」を選んで、「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/8e411d6f-3bc5-adaa-a7e1-dd9dd0a0b7ae.png)


「親ファイルを入力または選択（E）」の項目で、ファイルの作成先を確認（または入力）して、「ファイル名」にファイル名(index.html)を入力します。htmlファイルを作成したいので、拡張子（.html）もつけるのがポイントです。

ちなみに、今回は「HelloWorldController.java」の「helloWorld」メソッドの返り値（"index"）と名前を合わせる必要があります。
ファイル名を入力し、「完了」を押下します。
```
        return "index";
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605915/89605aa7-439b-3865-efaf-fa4c6395d6b9.png)