【図解】SpringBoot プロジェクトの立ち上げ

## Spring Bootを利用したプロジェクトの立ち上げ
開発環境が整った後のプロジェクトの立ち上げについての記事を書くよ。

### 事前準備
* eclipseをダウンロードしておく
* PostgreSQLをインストールして、利用可能な状態にしておく

以上が整っていれば、プロジェクトを立ち上げられるよ。

## いざ、立ち上げへ
まずはEclipseを立ち上げて、`ファイル -> 新規 -> プロジェクト`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/c785f5e2-598a-f41b-3696-b4ffcdfdeb44.png)

そして、`Spring Boot -> Springスターター・プロジェクト`を選択し`次へ`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/f0f194fe-8064-44ff-7c7a-4ad832634796.png)

ここで`名前`を設定（今回は`qiita_test`とした）し、その他詳細設定をするよ。
今回はこのまま`次へ`を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/652d6177-5cc5-94dc-9da7-45eee8de0216.png)

今回は赤枠のようなツールを利用して`完了`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/9b887a3d-50b7-d426-a116-b5490bb1da20.png)

以上でSpringBootでの各種設定は完了だよ。
プロジェクトの作成が完了したら、以下のようにプロジェクトが作成できているはずだよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/40ccfdcf-32db-e2cb-4acf-0ee4f1a97d06.png)


## MVCモデルを使って、とりあえず画面だけ出るようにする
とりあえず画面を出すには、`application.properties`、`Controllerクラス`と`htmlファイル`の作成をするよ。

### application.propertiesの設定
以下のようにマスキングした部分に必要な情報を入力してね。
```
# DB接続情報
spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql:****** 
spring.datasource.username=******
spring.datasource.password=******
# SQL実行出力
spring.jpa.show-sql=true
# schema.sqlとdata.sqlの自動実行
spring.sql.init.mode=always
```

### Controllerの作成
`src/main/java -> com.example.demo`配下に`Controller`パッケージを作成するよ。
まずは`com.example.demo`までいって、右クリックし、`新規 -> パッケージ`を選択し、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/99c4343e-ad88-aed3-1335-3d115fe5afa5.png)

名前を`Controller`として作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/f3c7eaa1-9346-ee55-dbad-9b1f76428cda.png)

パッケージを作成したら、作成したパッケージを右クリックして、`新規 -> クラス`を選択し、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/22c9d600-d34c-a36a-5952-264dfa373097.png)

名前を`HelloController`とし、`完了`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/eaa9207f-faf4-0556-e0a6-a702e09994d7.png)

作成した`HelloController.java`を以下のように記載してね。
```java
package com.example.demo.Controller;

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

@Controller
public class HelloController {
	@RequestMapping(method = RequestMethod.GET)
	public String index() {
		return "hello";
	}
}
```

### htmlファイルの作成
次にhtmlファイルの作成を行うよ。`src/main/resources -> templates`を右クリックし、`新規 -> その他 ->`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/56cb5195-303c-1ad1-fa73-790811cc54d8.png)

さらに`HTMLファイル`を選択し、`次へ`。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/53e8212c-4044-ae48-c0c6-7488bb9841a4.png)

ファイル名を`hello.html`とし、`完了`。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/3b14a964-3325-4d8d-3b29-b2870333872b.png)

以下のように`hello.html`を修正してね。
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>Hello! Spring Boot!!</p>
</body>
</html>
```
### Spring Bootの起動
htmlファイルの設定まで完了したら、とうとう起動するよ。

作成したプロジェクト`qiita_test`を右クリックし、`実行 -> Spring Boot App`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/3dbb9091-5a2c-cc76-0f0a-a19198689672.png)

起動できたら、ブラウザで`localhost:8080`に接続して、画面を確認しよう。
以下の様に出力されていれば、無事完了だよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678424/03a1474d-f489-0226-1622-2c5c1b8a4ebf.png)

## まとめ
Spring Bootでプロジェクトの作成をしたよ。
あとは自分が好きなようにプロジェクトを作成してみよう。