Eclipse で Spring Boot + Thymeleaf . (その１）

## はじめに
Spring Boot + Thymeleaf のサンプルプログラムをEclipseで作ってみよう。

## 開発環境
Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162
spring-boot-2.0.2.RELEASE
thymeleaf-3.0.9.RELEASE

## 手順
１．Eclipse Pleiades All in One のインストール
    のちのち他言語でも使いたいので、フルバージョンをインストールします。
　　「Ultimate」：Java以外でも開発可能（C/C++、Python...）
　　「Full Edition」：コンパイラや実行環境を含む

２．STSのインストール

３．プロジェクトの作成

４．サンプルプログラム"従業員表示"作成
　　　M（Model）: Form (Javaクラス)
　　　C（Controller） : Controller  (Javaクラス)
　　　V（View） : html(template)

５．動作確認

## １．Eclipse Pleiades All in One のインストール
### URL

```
http://mergedoc.osdn.jp/
```

### インストール手順
#### 1. 「Eclipse 4.7 Oxygen」クリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/ea025208-792c-346e-c5ed-c6f504d37dc4.png)

#### 2. ミラー・サーバを変更する ( 3.でタイムアウトしてしまう場合があるので。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/03fbf6cb-4240-bd14-db7e-f058d2dc47c6.png)

#### 3. Windws 64bitの「Ultimate」「Full Edition」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/88dc6026-a1ef-316c-3d84-618f0c61afac.png)

#### 4.ダウンロードファイルを作業フォルダーに解凍する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/7a55f705-26ec-4f1e-ec74-c1671ded7b93.png)


## ２．STSのインストール

#### 1. 「eclipse.exe」をダブルクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/506ca415-4dbd-389e-4f76-0d73ee9e7fe5.png)

#### 2. 「起動」ボタンをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/98ad5dca-8162-5857-d3f2-aef21a7e1392.png)

#### 3. Pythonは使用しないので「選択をすべて解除」ボタンをクリックし、「選択された変更を適用」ボタンをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/9a4cd3a3-2da7-8495-6577-2a93eae54581.png)

#### 4. 「ヘルプ」「Eclipseマーケットプレース」メニュ選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/931270de-7e70-22fc-bf8f-0fc19b9f7e7b.png)

#### 5. 「検索」に"STS"と入力し、Enterキー押下後、「インストール」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a7cfaec1-fcfa-4f52-3fd5-269a471852a4.png)

#### 6. 「確認」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/ad72517c-a928-085c-305c-293d433eb0ac.png)

#### 7. 「使用条件の条項に同意します」を選択し、「完了」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/0401228c-93fc-789a-a304-38c0f6c80dd9.png)

#### 8. 「インストール」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/58ccab2b-283b-c35a-bc59-6043b273b8d8.png)

#### 9. 「今すぐ再起動」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a6295537-64f1-58c5-3f18-43cf2f6d6c9b.png)

## ３．プロジェクトの作成
### ３－１．Springパースペクティブを開く

#### 1. 「ウィンドウ」「パースペクティブ」「パースペクティブを開く」「その他」メニュ選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/4fdcd052-c801-d3e8-0c60-eb0ae5ccf8ca.png)

#### 2. 「Spring」を選択し「開く」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/f9952b0c-b8e0-c554-08e9-625eb8efef5f.png)

#### 3. 「ようこそ」を閉じ、「C/C++」「PHP]「Python」「Perl」「Ruby」も閉じておく

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a338b3ed-c8f3-33b4-61cf-8f6978a9c994.png)

#### 4. Springをクリックし、Springパースペクティブを開く

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/becd4559-c97f-7824-ae8a-9d71fa922b66.png)


### ３－２．Springプロジェクト作成

#### 1. パッケージ・エクスぷローラー上の右メニュで「新規」「Springスターター・プロジェクト」メニュ選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/390cb7c9-b599-cba7-aac8-33c1d6c8ca84.png)

#### 2. プロジェクト名、その他を入力し、「次へ」ボタンクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/55acc844-c400-acdc-7e85-29c3dabb0550.png)

#### 3. 依存関係の選択「DevTools」「Lombok」「Thymeleaf」「Web」を選択し、「完了」クリック（「JPA」「PostgreSql」は後ほどDBのサンプルプログラム作成で使用。）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/52374fc3-21b8-e772-2d29-f09fbeeb18b7.png)

#### 4. 「JPA」「PostgreSql」を選択した場合は、application.propertiesに以下を追加
``` application.properties
spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=admin
spring.datasource.driverClassName=org.postgresql.Driver

# disable driver's feature detection
spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false

# without detection you have to set the dialect by hand
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect
```

## ４．サンプルプログラム"従業員表示"作成

### ４－１．Model（Form）作成

#### 1. 「ファイル」->「新規」->「クラス」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/745bfa52-040d-baf4-1ef4-4930ff077492.png)

#### 2. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/c01c4627-1add-9265-0b4d-e70759372c70.png)

#### 3. コード作成
``` java:EmployeeForm.java
package com.example.demo;

import lombok.Data;

@Data
public class EmployeeForm {

    private String id            = "";
    private String name          = "";
    private String email         = "";

}
```

### ４－２．Controller作成

#### 1. 「ファイル」->「新規」->「クラス」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/745bfa52-040d-baf4-1ef4-4930ff077492.png)

#### 2. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/f1ecd313-8d8b-3663-6b0e-03f12f17cbd8.png)

#### 3. コード作成
``` java:EmployeeController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EmployeeController {

    @RequestMapping("/show")
    public ModelAndView show(ModelAndView mav) {
    	EmployeeForm form = new EmployeeForm();
    	form.setId("1");
    	form.setName("Ken");
    	form.setEmail("ken@mail.coml");

    	mav.addObject("employeeForm", form);
    	mav.setViewName("employee");

        return mav;
    }

}
```

### ４－３．View（HTML）作成

#### 1. 「ファイル」->「新規」->「その他」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cad13e80-8708-82a1-d43f-2faf9fc95e65.png)

#### 2. 「HTMLファイル」を選択し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/fdd6dcd9-2c00-f922-ea43-94c786ca466b.png)

#### 4. 「フォルダー」と「ファイル名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/820ab063-2f41-2bd1-7664-d5cde5532275.png)


#### 5. コード生成

``` html:employee.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>
<h1>Hello, Spring Boot!</h1>

<form th:action="@{/show}" th:object="${employeeForm}" method="post">
	<table>
		<caption>
			<strong>従業員検索</strong>
		</caption>
		<thead>
			<tr>
				<th>ID</th>
				<th>NAME</th>
				<th>EMAIL</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td th:text="*{id}"></td>
				<td th:text="*{name}"></td>
				<td th:text="*{email}"></td>
			</tr>
		</tbody>
	</table>

    <p>Name (optional): <input type="text" th:field="*{name}" />
       <em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
    <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>

```

## ５．動作確認

#### 1. ショートカットキー「Alt+Shift+X」＋ B　でSpring Bootアプリ実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/181574be-f2a4-039e-b87c-c98f24d81624.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/bf573af7-6f31-6134-fd71-c7d9f62ba9d3.png)

#### 2. ブラウザのurlに、``` http://localhost:8080/show ``` と入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/f38df9fd-d792-d1bf-c7c9-7666e0e5977d.png)