ゼロから始めるSpring Boot　その１


####目標
複数回に分けて実施予定です。

1. SpringBootとは何かをざっくり知る<font color="red">　←今回やります</font>
1. 環境構築＆Hello World!を表示させる<font color="red">　←今回やります</font>
1. パラメータやオブジェクトの受け渡しをする
1. 他の機能にも触れてみる

####参考文献
* [SystemLinkIT塾 SpringBoot入門講座](https://www.sys-link.jp/technical/SpringBoot/SpringBoot_menu.html)<br>
自分自身が初めてSpringBootを学習した際参考になりました。
* [Thymeleaf公式ドキュメント](https://www.thymeleaf.org/documentation.html)<br>
公式ドキュメントだけあって非常に充実した内容です。

#SpringBootとは
Javaのフレームワークの一種である`spring`をより簡単に書けるようにしたものです。アノテーション（`@Override`のように、@を付けた記述方法）を利用することで複雑なXML設定ファイルの記述が不要になり、非常に取っつきやすくなりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/9ec435f7-0f5e-6b38-8f62-908b2e8849a4.png" width="75%">


#環境構築
`STS（Spring Tool Suite4）`という開発環境を使用します。Javaの開発環境として有名なEclipseをベースに、Springでの開発をより便利に進めるための機能が備わっています。

１．以下のサイトでSTSをダウンロードして実行。（zipの場合は解凍）

・[STS（Spring Tool Suite）](https://spring.io/tools)
![SpringBoot_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/2d68b0df-0e30-eef7-39a3-efc896179101.png)
`sts-4.X.X.RELEASE`という名前のフォルダが作成されればOKです。


２．以下のサイトでSTSの日本語化パッチをダウンロード。（デフォルトが英語のため）
・[Pleiades日本語化プラグイン](https://mergedoc.osdn.jp/)
※ページトップの「Pleiades All in Oneダウンロード」ではなく、その一つ下にあります。
![SpringBoot_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/3a3353f7-3106-bcc8-f331-2132a32e8828.png)
３．ダウンロードした`pleiades-win`内のsetupファイルを実行。
![SpringBoot_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/7054c8a4-7c6f-9a1b-5057-8f42b4f54587.png)
以下の画面が起動するので、「日本語化するアプリケーション」に`sts-4.X.X.RELEASE`フォルダ内の`SpringToolSuite4.exe`を指定して「日本語化する」をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/794144c3-8e81-78ca-278e-253638f9095d.png" width="75%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/7e5415f9-1bc8-93d8-77b6-12788bb7afb4.png" width="75%">
STSを起動して、日本語になっていれば完了です！

#プロジェクト作成
STSを起動したら、[ファイル] - [新規] - [Springスターター・プロジェクト]を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/a734d6eb-77b7-4eb4-e2cb-73a863a697e8.png" width="75%">
この画面は特に操作せず[次へ]をクリック。
※[型]ではMavenかGradleが選べますが、このページではMavenで実施します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/94d79bdd-dc49-d9f9-cdd2-f48f924be509.png" width="75%">
[新規Springスターター・プロジェクト依存関係]では、
・[開発ツール] - [Spring Boot DevTools]
・[テンプレート・エンジン] - [Thymeleaf]
・[Web] - [Spring Web]
の3つにチェックを入れて[次へ]をクリック。
<font color="orange">依存関係についてはこのあと解説します。</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/0f6e4f21-4cb9-e99f-178d-2f326183e258.png" width="75%">
この画面は特に操作せず[完了]をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/00b80f5a-0693-dd27-11ce-e5476eb34fda.png" width="75%">
以下のようなプロジェクトが作成されれば完了です！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/701c1cf6-3681-f0f3-ccdb-bcd50a715b2e.png" width="75%">

####依存関係について
先ほど`Spring Boot DevTools`、`Thymeleaf`、`Spring Web`にチェックを入れましたが、それによってpom.xmlに以下のコードが自動で記述されます。

```xml:pom.xml
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-devtools</artifactId>
	<scope>runtime</scope>
	<optional>true</optional>
</dependency>
```
|名称|説明|
|:--|:--|
|Thymeleaf|JavaのWebページ用テンプレートエンジン。SpringではjspではなくThymeleafを推奨しています。jstlやEL式のように記述します。|
|Spring Web|SpringBootのWebアプリケーションに必要なライブラリ。|
|Spring Boot DevTools|javaファイルを更新すると自動でアプリケーションを再起動してくれる等の便利な機能が使えるようになります。|
そのため、Spirng Bootの機能を使用する場合は`プロジェクト作成時の依存関係にチェックを入れる`か、`手動でpom.xmlに記述`することになります。

ざっくりとですがpom.xmlについても補足。

|名称|説明|
|:--|:--|
|Maven|Javaのプロジェクト管理ツール。pom.xmlを参照してアプリケーションのビルド・デプロイを簡単に行えるようにする。|
|pom.xml|pomはProject Object Modelの略。プロジェクトに必要なライブラリ群やバージョン情報を記述する。|

#Hello World!（RestController編）
プロジェクトを作成すると`src/main/java/com/example/demo`配下にjavaファイルが1つ自動で生成されていると思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/2061a4c6-e844-e96a-955c-09241e0290d7.png" width="75%">
このクラスは`@SpringBootApplication`アノテーションによってSpringBootアプリケーションの起動クラスとして認識されています。
とくに手動でコードを追加する必要はありません。

####RestControllerクラス作成
それでは同フォルダにクラスを作成します。
`com.example.demo`のアイコン上で右クリックし[新規] - [クラス]を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/9d7a70ff-1bef-a698-c272-e3cb61833e05.png" width="75%">
[名前]に`DemoRestController`を入力して[完了]をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/5ffb431c-065c-e65f-b558-6fd3175854bd.png" width="75%">
作成したクラスに以下のコードを追加します。
（Eclipse操作したことない人へ・・・Ctrl+Sでファイルの保存、Ctrl+Shift+Oで自動importが可能です！）

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

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DemoRestController {

	@RequestMapping(value="/rest",method=RequestMethod.GET)
	public String hello() {
		return "Hello World!";
	}
}
```

####`@RestController`
クラスに記述。View（HTMLファイルなど）に遷移せず、メソッドの戻り値をそのままページに出力するためのコントローラクラスになります。
<details>
<summary><font color="lightgray">コントローラとは？（少し脱線するため折り畳み）</font></summary>
SpringおよびSpring Bootは`MVCモデル`という概念が存在するのですが、これは<br>
`Model`・・・検索や計算といった処理ロジックを担当する。
`View`・・・Modelの処理結果をクライアント側に表示する。
`Controller`・・・Viewから受け取った情報をModelに渡す。（逆も然り）<br>
という役割を持ったプログラムの頭文字から来ています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/16ebc06c-6584-7b2c-22ba-224a4fcf7089.png" width="75%">

</details>
####`@RequestMapping`
メソッドに記述。クライアントからのリクエストとメソッドをマッピングするための機能です。引数を指定しますが、代表的なものは以下の２つ。
`value="/URL"`・・・指定したURLからのリクエストを受け取ります。
`method=RequestMethod.GET（またはPOST）`・・・指定した送信方法からのリクエストを受け取ります。

これによって、
`http://localhost:8080/rest`にアクセス
↓
URLは`/rest`、送信方法は`GET`となる（URLを入力してページを表示する場合は自動でGETメソッドになります。なぜ？については [teratailのこの質問](https://teratail.com/questions/103203) が分かりやすいです。）
↓
この情報に一致する`hello`メソッドが呼ばれる
↓
戻り値の`"Hello World!"`がページに出力される。
といった流れが出来上がります。
***
また、`@RequestMapping`には以下のように送信方法付きのアノテーションが用意されています。簡潔に書けるため、次回からはこれを使います。
####`@GetMapping("/URL")`
`@RequestMapping(value="/URL",method=RequestMethod.GET)`と同じです。
####`@PostMapping("/URL")`
`@RequestMapping(value="/URL",method=RequestMethod.POST)`と同じです。
***
それではSpringアプリケーションを実行します。
まずは[ウィンドウ] - [ビューの表示] - [コンソール]をクリックしてコンソールを表示。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/7699152e-4215-abb7-9ab6-5cb2e6e4af13.png" width="75%">
プロジェクト上で右クリックし、[実行] - [Spring Boot アプリケーション]の順にクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/9e90e40b-f7f1-51f8-b0d1-b79a547aafd3.png" width="75%">
コンソール上でSpring Bootの起動を確認したら、、、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/356778db-8c18-d426-35af-ce55ac6c11b2.png" width="75%">
ブラウザで`http://localhost:8080/rest`にアクセスします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/d239ce07-e9fe-05ca-c18f-676cca9cf951.png" width="75%">
Hello World!が表示されました！
#Hello World!（Controller編）
RestController編ではメソッドの戻り値でHello Worldを表示させていたので、今回はHTMLファイルで表示させてみましょう。
####HTMLファイル作成
`src/main/resources/templates`上で右クリックし[新規] - [その他]を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/2850922f-e157-bdb0-415d-37be4d3cffef.png" width="75%">
[web] - [HTMLファイル]を選択して[次へ]をクリック。
※[ウィザード]に`html`と入力すると以下の画像のようにすぐ出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/2f5fd30a-d14d-e563-6f32-dcd5a9ab6c1a.png" width="75%">
[ファイル名]に`index`と入力して[次へ]をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/75ee1fce-2703-87dd-bd77-2deef1cea052.png" width="75%">
[テンプレート] - [新規HTMLファイル(5)]を選択（デフォルトで選択状態だと思います）して[完了]をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/b5f3ab69-626a-2506-9d3b-bba9d896457c.png" width="75%">
`<body>`部分に`Hello World!`を追加します。

```html:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello World!
</body>
</html>
```
####Controllerクラス作成
次に、`src/main/java/com/example/demo`上で`DemoController`クラスを作成し、以下のコードを追加します。（作成方法は[RestControllerクラス作成](#RestControllerクラス作成)と同様）

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

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

@Controller
public class DemoController {
	
	@RequestMapping(value="/",method=RequestMethod.GET)
	public ModelAndView hello() {
		ModelAndView mav=new ModelAndView();
		mav.setViewName("/index");
		return mav;
	}
}
```

####`@Controller`
クラスに記述。`@RestController`と異なり、Viewへ遷移できるコントローラクラスになります。もしこれを指定したクラスに、Viewに遷移させずに戻り値をページに表示するメソッドを定義したい場合は以下のように`@ResponseBody`をメソッドに記述すればOKです。

```java:@ResponseBodyの記述例
@RequestMapping(value="/body",method=RequestMethod.GET)
@ResponseBody
public String body() {
	return "Hello World?";
}
```
####`ModelAndView`
`Model`（オブジェクトの管理）と`View`（Webページ情報）の両方の機能を持ったクラスです。これら単体のクラスもありますが、基本的に使用するのは`ModelAndView`です。
主なメソッドは以下の通りです。

|メソッド|使い方|
|:--|:--|
|setViewName("/ファイルパス")|表示させるHTMLファイルのパスを指定します。templatesフォルダまでのパスは記述不要です。|
|addObject("パラメータ名",パラメータ)|Webページに渡すパラメータを[名前,値]のセットで格納します。（<font color="red">次回使います</font>）|
***
それでは`http://localhost:8080`にアクセスしてみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624514/25f0ad3f-e774-4faa-e7f3-646ae43d57af.png" width="75%">
Hello World!が表示されました！
HTMLなので、ページのタイトルに「Insert title here（デフォルトのタイトル）」が表示されていますね。

##おさらい
- `SpringBoot`はSpringをより使いやすくしたもの
- `Spring Tool Suite`で簡単開発
- `@RequestMapping`でURLとメソッドの紐づけ
- `@RestController`でメソッドの戻り値をページに表示
- `@Controller`でHTMLファイルをページに表示

今回はここまでです。お疲れ様でした。
次回からパラメータの受け渡しに入っていきます！