SpringBoot + JPA + Thymeleafで簡単なCRUDを作る①～HelloWorldまで～

## 内容

- SpringBootで簡単なCRUDアプリを作る
- 今回は雛形を作って動作確認まで

## 雛形作成

### SpringInitializrを使う

- [ここ](https://start.spring.io/)でzipを落としてもいいけど今回はSTSプラグインから作成
- Eclipseの場合STSプラグインはヘルプの中のEclipseマーケットプレイスからダウンロードできる

### 手順

- 雛形作成

<img width="530" alt="スクリーンショット 2017-10-25 0.47.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/92823a83-dee4-457d-01be-d56cdaece4e6.png">

- サンプルなのでアプリ名はなんでもいい

<img width="547" alt="スクリーンショット 2017-10-25 1.10.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/9f565444-e925-e02a-65ea-ae9f885114db.png">

- ビルドツールはmavenとgradleどちらもよく使われているが今回はmavenを選択
    - 今回作る範囲ではどちらを選んでもさほど変わらない

<img width="551" alt="スクリーンショット 2017-10-25 0.49.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/2d8beb91-f0b5-2930-b823-6580405115bf.png">

- 必要なライブラリを選択すると同梱した状態で雛形ができる
- 今回は以下の5つを選択(後からでも追加可能)
    - Devtools・・・ホットデプロイとかできるようになる
    - JPA・・・JavaとDBをつなぐORMapper
    - H2・・・インメモリのDB
    - Thymeleaf・・・テンプレートエンジン
    - Web・・・エンドポイント(URL)を簡単に作れる

## アプリの起動

- 雛形の生成が終わったらまずは動作確認
- アプリの起動はBootダッシュボードを使うと便利

<img width="415" alt="スクリーンショット 2017-10-25 0.57.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/fab6dd92-ff3c-9c9b-4483-a54283196e16.png">

- Bootダッシュボードが表示されてない場合は以下の手順で追加できる

<img width="607" alt="スクリーンショット 2017-10-25 22.03.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/8df4432a-154b-9af4-8faa-5748ff672f0b.png">
<img width="310" alt="スクリーンショット 2017-10-25 22.05.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/2699487d-e509-d2fe-b414-7360daca37fc.png">


- 起動するとコンソールにこんな感じの出力がされる

<img width="1030" alt="スクリーンショット 2017-10-25 0.59.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/398cc060-7b7d-c100-be6f-89ad5bdba54a.png">

- 最後にstartedと出ていれば正常に起動が完了している
- アプリの起動は以下のコマンドでターミナル上で実行することもできる
    - `mvn spring-boot:run`

## 雛形で生成されたファイルの確認

### BaseballApplication.java

```java:src/main/java/com/example/baseball/BaseballApplication.java
package com.example.baseball;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BaseballApplication {

    public static void main(String[] args) {
        SpringApplication.run(BaseballApplication.class, args);
    }
}
```

- このmainメソッドがアプリのエントリーポイントになり、Springアプリを起動している

### application.properties

```properties:src/main/resources/application.properties

```

- この時点では空のファイル
- アプリに関する設定を記述する

### BaseballApplicationTests.java

```java:src/test/java/com/example/baseball/BaseballApplicationTests.java
package com.example.baseball;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

@RunWith(SpringRunner.class)
@SpringBootTest
public class BaseballApplicationTests {
    @Test
    public void contextLoads() {
    }
}
```

- テストコードの雛形
- テストは以下のメニューから実行できる

<img width="575" alt="スクリーンショット 2017-10-25 1.26.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/d1254f03-29d3-3ea1-0429-a5e62f566099.png">

## HelloWorldをブラウザから確認

- http://localhost:8080/ にアクセスするとHelloWorldと表示されるようにする

### 手順

- 作るファイルは2つ
- 1つ目はユーザからのアクセスを受け取ってテンプレートを返すファイル
- 2つ目はユーザに返すテンプレート

#### HelloWorld.java
- `com.example.baseball`に`HelloWorld.java`を作成する

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

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

@Controller // ①
public class HelloWorld {
    @GetMapping("/") // ②
    public String hello() {
        return "hello"; // ③
    }
}
```

- ①：`@Controller`をつけることでこのClassがユーザからのアクセスを受け取ることができる
- ②：`@GetMapping("/")`とすると、httpメソッドがGETでURLが`/`のアクセスがあるとこのメソッドが呼ばれるようになる
    - ()の中のパスは、`http://localhost:8080`に続く内容を表す
    - 例えば`@GetMapping("/users")`だと`http://localhost:8080/users`にマッピングされる
- ③：`src/main/resources/templates/`配下の`hello.html`をユーザに返す
    - Stringを返しているだけなのになぜそんな動きをするかというと、このClassに`@Controller`がついているから

#### hello.html

- `src/main/resources/templates/`に`hello.html`を作成する

```html:src/main/resources/templates/hello.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>baseball</title>
  </head>
  <body>
    <h1>HelloWorld</h1>
  </body>
</html>
```

### 動作確認

- http://localhost:8080/ にアクセスすると以下の画面が表示される

<img width="496" alt="スクリーンショット 2017-10-25 1.50.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/92c39557-1002-56bd-4978-09225b5a1316.png">

### ホットデプロイ

- ファイルを追加/修正をアプリを起動した状態で行うと、変更が保存される度に自動的にアプリが再起動される
- 雛形生成時にdevtoolsを入れたからこのような動きをする

![hotreload2.gif](https://qiita-image-store.s3.amazonaws.com/0/175213/03355728-6d8a-fa4f-2756-21705e499850.gif)

### 次回

- 続きは[こちら](https://qiita.com/ozaki25/items/3b348874b6db5ab4f04f)