SpringBootでHello World プロジェクト作成～実行

# はじめに
SpringBoot + Thymeleaf + Mavenで「Hello World」を表示させる手順を記載します。

# 開発環境
OS：windows10
IDE：eclipse(4.15.0)
Java：11
ビルドツール：Maven

# 手順
「Hello World」を表示させるまでの手順は下記です。
1. プロジェクトの作成
2. pom.xmlの編集
3. 画面の作成
4. Controllerの作成
5. 実行

# 1. プロジェクト作成
eclipseを起動します。
eclipseの[ファイル]→[新規]→[プロジェクト]を選択します。
![プロジェクト選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/7f9d50b7-2165-81b4-263f-f07224f2c729.png)
「Spring スターター・プロジェクト」を選択し、「次へ」ボタンを押下します。
![Springスタータープロジェクト選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/6979b5fa-4d35-38c3-37f0-183f877b21ba.png)
次の画面で以下を確認し、「次へ」ボタンを押下します。
・型：Maven
・Javaバージョン：11
・パッケージング：Jar
![設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/858f5a3f-ce71-9d19-ae23-9f1af3b3ee27.png)
[Web]→[Spring Web]を選択し、「完了」ボタンを押下します。
![設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/9434ac47-cb66-05e1-0916-ad631fe53e12.png)
プロジェクトが作成されました!
![作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/6be7a202-5e65-63d9-4d30-b8ebf2026cc6.png)

# 2. pom.xmlの編集

pom.xml はプロジェクトに関する情報を持つMavenの設定ファイルです。
例えば、プロジェクトのビルドに関する情報、依存ライブラリの情報、プラグインの情報などが含まれます。
今回は「Thymeleaf」を使用するのでライブラリをMavenでインストールします。
pom.xmlを開き、以下のように編集してください。

```xml:pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		
		<!-- ↓　ここから -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
		<!-- ↑　ここまで追加 -->
		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>
```

# 3. 画面の作成
プロジェクトが作成できたので、次は画面を作成していきます。
「src/main/resources/templates」で右クリックし、[新規]⇒[ファイル]を選択します。
![ファイル追加1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/46c858a8-9c70-c549-647f-3993cb737663.png)
ファイル名に「index.html」と入力し、「完了」ボタンを押下します。
![ファイル追加2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/acc591f2-095d-ebe6-b65a-620e46b34838.png)
「index.html」ファイルが追加されました。
![ファイル追加3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/31c48926-f2ea-cecb-164c-3c1654497092.png)
「index.html」ファイルを開き、以下のように記載してください。

```html:index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 <head>
   <title>Hello World</title>
   <meta charset="utf-8" />
 </head>
 <body>
   <h1>Spring Boot</h1>
   <p>
     <span th:text="${message}"></span>
   </p>
 </body>
</html>
```

これで画面の作成は完了です。

# 4. Controllerの作成
次はControllerを作成します。
「com.example.demo」パッケージ上で右クリックし、[新規]→[クラス]を選択します。
![コントローラ作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/e8392e38-946d-eda7-627b-056f7faa24b5.png)
名前に「HelloWorldController」を入力し、「完了」ボタンを押下します。
![コントローラ作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/235676de-b167-3b5d-9716-70c05c6c2027.png)
「HelloWorldController.java」ファイルを開き、以下のように記載してください。

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

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

@Controller
public class HelloWorldController {

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello World!!");
        return "index";
    }
}
```

これでControllerの作成は完了です。

# 5. 実行
次はプロジェクトを実行してみましょう。
プロジェクト上で右クリック > [実行] > [Spring Boot App] を選択します。

起動したら、ブラウザから以下のURLにアクセスしてください。
 URL：http://localhost:8080/

以下の画面が表示されることを確認してください。
![表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798422/1a5a9152-3f09-f274-beac-8551655985c6.png)