eclipseでSpring Bootを使い、Web開発環境構築をする。

[この](https://qiita.com/inokazum/items/dfd9bccac235e0b62dfc)記事の続き

## 構築の流れ
- [プロジェクト作成](https://qiita.com/inokazum/items/89239417bffd88328455#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90)
- [テストプログラムを作成・実行する](https://qiita.com/inokazum/items/89239417bffd88328455#%E3%83%86%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E4%BD%9C%E6%88%90%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)

## プロジェクト作成
1. eclipseを起動し、```パッケージ・エクスプローラー```の```新規 Spring スターター・プロジェクトの作成```を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/93687b37-e98c-648b-20db-69d90e6b3114.png)

1. 別ウィンドウで、```新規Springスターター・プロジェクト```が表示されるので、```次へ(N)```を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/084d20a0-d1e0-74bb-5b65-3df1c18b08b8.png)

1. 2の手順後、画面が遷移し、```新規Springスターター・プロジェクト依存関係```が表示されるので、下記の設定に合わせて、```次へ(N)>```を押下する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/e2d2b19b-c787-7fc0-d75e-de9f0f48e6d2.png)

1. サイト情報が表示されればOK。```完了(F)```を押下して終了する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/e3f81ef5-3817-ce80-5e6e-464653336bf1.png)

最初の、eclipseの画面に戻った際に、```demo```というプロジェクトができているはず。
これで、プロジェクトの作成は完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/9d4a46bd-245d-a9aa-d0d5-15fe3764f09e.png)


## テストプログラムを作成・実行する
作成された```demo```ディレクトリを展開し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/461249fc-efc2-e271-ca86-dbd535376452.png)

src/main/javaをさらに展開すると、```com.exsample.demo```が現れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/54ee416a-34a3-055b-34cb-4b455d4ef211.png)

表示された```com.exsample.demo```を右クリックし、
```新規(W)```→ ```パッケージ```を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/ec394710-bb64-2493-899b-e156aa1ae5a1.png)

```新規javaパッケージ```の設定Windowが表示されるので、名前の```com.exsample.demo```以下に```.controller```を追記し、```com.example.demo.controller```としておく。```完了(F)```を押下で完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/64c9ad36-c7a7-3af0-ce02-e036073da45d.png)

eclipseの画面に戻ると、下記のようなcontrollerパッケージが作成されているはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/2855517b-8585-9a15-ec64-9f6925e23a17.png)

作成された、controllerパッケージを右クリック。
```新規(W)```→```クラス```を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/b4963b64-2edf-0628-3c89-1183ef14e00e.png)

```新規Javaクラス```の設定Windowが表示されるので、名前を```DemoController.java```と設定し、完了を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/a2a469a9-6469-f012-696f-84ef4546cd0d.png)

現段階で、ファイル階層は下記のようになっているのが正。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/f596456b-b175-4049-b6a4-d0f261b2ddb6.png)

作成したDemoController.javaをダブルクリックし、エディターを開き、下記をコピペ

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

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

@Controller
public class DemoController {
    
    @GetMapping("/demo")
    private String display(){
        return "/index.html";
    }
}

```

次に、ディレクトリのウィンドウに戻り```src/main/resources```を展開。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/33c79f89-721e-e488-e4e1-c8b7e34b6a65.png)

表示された```static```を右クリックし、
```新規(W)```→```HTMLファイル```を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/be85c423-9872-5540-ff47-46399902a31f.png)

名前を、```index.html```に変更し、```完了(F)```を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/96f15091-aa14-a5f4-2387-1a3d98473368.png)

上記完了後のファイル階層は下記が正。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/f90a9706-7126-9c2c-8d00-9a25b0983b33.png)

作成した、index.htmlの内容は以下をコピぺしておく。
```html:index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>
```

最後に、最上階層のフォルダ(demo[boot])を右クリックし、
```実行(R)```→　```4 Spring Boot アプリケーション```を選択し、実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/443e5219-13d3-2400-42dd-9e1d1e689e66.png)

上記実行でeclipse内のコンソールが下図のようになるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/40009fcc-af91-b1cf-c0e9-ba7fac36170f.png)

任意のブラウザ(chrome,Edgeなど)で、
http://localhost:8080/demo
にアクセス。
※```http://localhost:8080/demo/``` では失敗するので要注意

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/edcb25d8-8d4b-3183-255d-9aca37d004c3.png)

これで、環境構築はひと段落...