反省：初めて触るSpring Boot 

![Screenshot 2022-10-28 at 12.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/ce6ba72b-63c6-cb6e-3313-2c1f12e207c4.png)
 Whitelabel Error Page (404)だと...??!!!

## はじめに
Spring Boot を使ってWebアプリを作成したく、
Javaを勉強しSpring Bootを使い
初めてHello Worldを実行しようとした、その時だった。。。

## 開発環境
- Java 19
- Spring Boot 2.7.5 maven project
- macOS Ventura (CPU:Intel)



## Spring Bootとは
Springプロジェクト群をパッケージ化し、シンプルに活用できるフレームワーク


## 環境構築
Spring Boot Tools を追加
![a-28 at 14.10.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/b110245c-034f-ff77-d75f-d1d2e61db178.png)

Spring Initializr Java Support を追加
![a-28 at 14.09.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/794e3de5-267d-a760-f428-a7ab9a9f15cf.png)

Maven Projectを選択
![a-28 at 14.07.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/a947e4a5-eba4-e47f-a09e-1015a2babfdb.png)

Spring Boot Version 2.7.5を選択
![a-28 at 14.07.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/7829585c-62f3-aebb-9f80-a70a9682b3ec.png)

使用言語 Javaを選択
![a-28 at 14.08.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/c62d4b97-f3bf-ca63-0c13-acba624386ed.png)

Group Idは初期のcom.example
![a-28 at 14.08.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/c2bde068-b22f-d7f3-5d2a-f2c8023b52b5.png)

Artifact Idも初期のdemo
![a-28 at 14.09.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/f5247b81-cdcc-ae0a-407b-473db784d418.png)

Packageing typeはJarを選択
![ff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/fb27d11c-189e-c70c-c854-664c42679961.png)

Javaのversionは19
![ff2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/513cb795-dc9e-dea5-c7f1-405fe3fb729a.png)

toolを全て入れます。Spring Webは必須で
![ff3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/7566a15a-ba09-77af-94e5-63b3fa0f3d41.png)


以下の様な構成になる
![Screenshot 2022-10-28 at 14.17.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/f0b3a88e-6f11-5e4d-8fa4-06bd93381a13.png)

## コード
src/main/java/com/exmaple/demo/HelloWorld.java
```java:HelloWorld.java
package com.example.demo;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloWorld {
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}
```

src/main/resources/templates/hello.html
```html:hello.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1>
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>
```
## 実行結果
下記のコマンドで実行
```command
./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています
```
始まりました。
![Screenshot 2022-10-28 at 14.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/d441e4f6-075b-1fec-e46d-e029c83a45f0.png)

http://localhost:8080にアクセスします。
![a-28 at 12.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/13bba655-d79c-6d0d-9904-b1ad20dc63ed.png)


え？ファ？うん？ほぅ！！！！ほぅほぅ！！ムキィィィィ！！

## 原因
これは、ファイルのパスの位置は特に問題ないです。
404ということもあり、ソースコードが眼中にない様な感じなのです。
何が問題なのでしょうか。

Spring Bootを使っている方からすると、笑ってしまう
そう! このJavaのソースコードです。

#### 実はこのコード、とりあえずHTMLに値を入れて動かしたいために無理やり書いた結果、この様なコードを書いてしまったのです。

## 解決方法
Spring群のパッケージ、ツールの内容をしっかりと把握・理解して書くことです。
今回、このコードで実行に成功したコードを書きます。
そこには、Spring Bootを動かすための大事なライブラリ等が追記されます。

#### 依存関係問題
HTMLを埋め込むためにThymeleafというテンプレートエンジンを使用するコードになっています。ですので
pom.xmlに追記する必要があります。
```xml:pom.xml
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
        
    <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
```

#### tyhmeleaf設定

thymleafを使用るためにhtmlファイルを使用する設定
src/main/resources/application.properties
```sh:application.properties
#thymeleafを使用する
spring.thymeleaf.mode=HTML
```

#### Javaコード

個人的にわからないところをコメントアウトで追記したコードです。

src/main/java/com/exmaple/demo/HelloWorld.java
```java:HelloWorld.java
package com.example.demo;

import org.springframework.boot.SpringApplication; //

//tymeliefを使用する /src/templates/application/spring.thymeleaf.mode=HTML

import org.springframework.ui.Model; //Spring MVC thymeleafを使用するライブラリ addAtrributeを使ってvalueの値を代入

import org.springframework.web.bind.annotation.GetMapping; //GETリクエストされた際の

//import org.springframework.web.bind.annotation.RequestMapping; //数種のRequestのマッピング
//import org.springframework.web.bind.annotation.RequestMethod; //　RequestMappingの引数の中で使える. リクエストの受付種類を method =　 RequesrtMethod.GET/POST



import org.springframework.boot.autoconfigure.SpringBootApplication; //	Webページアプリ用,メソッドの戻り値が遷移先のview
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController; //APIサーバーなどに使われる、XML JSON



@SpringBootApplication //このアノテーションで Spring Bootのアプリだと宣言します。
@Controller
public class HelloWorld {
    public static void main(String[] args) {
        SpringApplication.run(HelloWorld.class, args);
        }
    
    //リクエスト URL に対して、どのメソッドが処理を実行するか定義するアノテーション。GETでアクセスされたリクエストの場合
    //@RequestMapping(value = "/", method = RequestMethod.GET)

    //
    @GetMapping("/")
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}

```

下記の関数でtitleという変数に代入してHTMLに渡すことができます
```java
model.addAttribute("title", "Hello World");
model.addAttribute("message", "Welcome to my site");
```

src/main/resources/templates/hello.html
```html:hello.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1> <!-- titleにHellowWorldが代入されている -->
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>
```

## 実行結果
下記のコマンドで実行
```command
./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています
```
![っっf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1212967/1287f88a-1214-a74a-5e27-f04a909ff0f7.png)

よっしゃ！！
これでSpring Boot × tyhmeleafの環境構築が完成です。


## 最後に
Pythonの様にこれやればあれやればどうにか動くと思わないほうがいいと思いました。
仕組みをしっかり知ってこれからもJava と Springの勉強に励んでいきます。

## 参考資料
[Spring Boot 入門 - リファレンスドキュメント](https://spring.pleiades.io/spring-boot/docs/current/reference/html/getting-started.html)

[Spring Quickstart Guide](https://spring.io/quickstart)