Springを使用してプログラムを勉強してみよう

:::note warn
まだまだ作成途中です。
随時ブラッシュアップしていくので良案もらえると励みになります。
:::

# 目次
1. [Springとは](#1springとは)
1. [開発ツールのインストール](#2開発ツールのインストール)
1. [プロジェクトの作成](#3プロジェクトの作成)
1. [SpringでWEB画面を作成してみよう](#4-springでweb画面を表示してみよう)
1. [作成した画面をWEB画面を表示してみよう](#5-作成した画面をweb画面を表示してみよう)
1. Modelで取得した値を表示してみよう

## 1.Springとは
Springとは、Javaのフレームワークの一種です。
フレームワークはJavaを開発する際の土台として機能するソフトウェアのことを指します。
~~要は拡張機能です。~~
フレームワークを使用することにより、開発コストの削減、バグの削減、チーム内での考えを統一できるメリットがあります。

Springでは主にMVCモデルを使用しており、MVCモデルをベースに開発を進めていきます。

### MVCモデルにおけるMとは
**M**はModel(処理)の略称で、WEB画面表示時に、動的に表示させたい値や、項目のことです。
プログラムを通して表示させたい値はModelで取得、使いやすいように加工する処理を記述する際に使用します。
例えば、DBに保存されている値を取得する時にはModelを通してから取得し、表示したい項目を加工してからWEB画面へ表示させる役割を持っています。

### MVCモデルにおけるVとは
**V**はView(画面)の略称で、WEB画面表示に必要な、HTML、CSS、JSのことです。
後述する、**Thymeleaf**はWEB画面とSpringを紐づけるテンプレートエンジンなので、Viewに当てはまります。

今見ているこの画面もHTMl、CSS、JSを使用して表示されているのでViewに該当します。

### MVCモデルにおけるCとは
**C**はController(制御)の略称で、URLを受け取り、**Model**で動的に表示したい値を取得し、加工した値を**View**に渡すという橋渡しの役割を担っている縁の下の力持ちです。

## 2.開発ツールのインストール
開発ツールとは、システムの開発に必要な機能を持ったアプリケーションを指します。
開発をするために必要な補助機能が備わっているため、これがないと始まりません、
[以下のサイト](https://itsakura.com/java-sts-install)がわかりやすく解説しているので、参考にインストールしてみましょう。

https://itsakura.com/java-sts-install

## 3.プロジェクトの作成
開発ツールのインストールができたら次にプロジェクトの作成をしていきます。
２章でインストールした開発ツール(以下STS)を開き、図1の`新規Springスタータープロジェクトの作成`(赤枠内)をクリックします。

クリックすると、図２の画面が表示されます。
今回は何も変更せずに`次へ`をクリックします。

次へをクリックすると図３が表示されるので、左下の一覧の中から`テンプレート・エンジン`>`Thymeleaf`を選択し、`次へ`をクリックします。


次の画面が表示されたら`完了`をクリックします。
しばらく待ち、図４のように、パッケージ・エクスプローラーに`demo`というプロジェクトが表示されたらプロジェクトの作成完了です。
次の章ではWeb画面の実装をしてみましょう。


### 図１
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/f13e3c2c-bd08-9ee5-7709-b48d2b2adf6a.png'>
</div>
</details>

### 図２
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/89584bb4-2771-3021-6608-2cb2747a02fe.png'>
</div>
</details>

### 図３
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/f21273b6-8cef-ed21-4a91-429ccfd01b33.png'>
</div>
</details>

### 図４
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/19f96dd6-5b3b-daf1-762d-7cfe5d98750b.png'>
</div>
</details>

## 4 SpringでWEB画面を表示してみよう
プロジェクトの作成が完了したらついにプログラミングのお時間です。
この章では、MVCモデルの**View**と**Controller**を使用します。

まずは、**View**に当たる、HTMLを作成していきます。
１．図５のようにパッケージエクスプローラーの`demo`>`src/main/resource`> 右クリック >`新規`>`ファイル`を順番にクリックしていきます。

２・クリック後、図６のようにファイル名欄に`index.html`を入力し`完了`をクリックします。

### 図5
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/87b8207c-a39e-cddd-2bfa-cd6ff4dbe5ed.png'>
</div>
</details>

### 図6
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/b263e19e-3fb5-f19f-034a-63e52d33ff76.png'>
</div>
</details>

３．完了をクリック後、`index.html`作成され、表示されるので、以下のコードを参考にし、`index.html`へ記述していきます。

```html:index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div>
	<span>Hellow Horld!</span>
</div>
</html>
```
ここで重要なのは、html要素にに`xmlns:th="http://www.thymeleaf.org"`を挿入することです。
`xmlns:th`を使用することにより、`Thymeleaf`特有の属性を使用できるようになります。
これで一旦、VIewの作成は完了です。

<br>

次に、**Controller**に当たる、Javaを作成していきます。
１．図７のようにパッケージエクスプローラーの`demo`>`src/main/java`> 右クリック >`新規`>`ファイル`を順番にクリックしていきます。

２・クリック後、図7のように名前欄に`DemoController`を入力し`完了`をクリックします。

### 図7
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/bd9b7556-048a-d43f-b235-6d01ac24a83e.png'>
</div>
</details>

### 図8
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/0698d04c-c7cd-a52c-0401-b0124ed3a6df.png'
>
</div>
</details>

３．完了をクリック後、`DemoController.java`作成され、表示されるので、以下のコードを参考にし、`DemoController.java`へ記述していきます。
```java:DemoController.java
package com.example.demo;

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

@Controller
public class DemoController {
	@GetMapping("/")
	public String index() {
		
		return "index";
	}
}
```
ここで重要なのは、3つあり、
6行目の **`@Controller`**
8行目の **`@GetMapping("/")`**
9行目の **`public String index() {`** と11行目の **`return "index";`** のセット
の3点です。

**`@Controller`**
このJavaがMVCモデルの**Controller** であることを示しており、URLからの接続を管理する役割を担っています。

**`@GetMapping("/")`**
どのURLが来たら、その直下に記述されているメソッドを処理するかを判定する管理を担っています。

`@GetMapping("/")`　の場合、()内の　`/` (カレントパス)で接続された時に直下のメソッドを処理する。
というURLとメソッドのマッピングをしています。

**`public String index() {`** と **`return "index";`**
ここが**一番重要**です。
9行目の `public String index() {` だけ見ると、`index` という文字列を返しているように見えますが、**`@Controller`** と組み合わせることにより、`return`している文字列と同じ名前のHTMLをWEB画面に描画させる機能があります。
これにより、　`/` (カレントパス)で接続した場合に、先ほど作成した`index.html`を描画するという処理ができます。

## 5 作成した画面をWEB画面を表示してみよう
ここまで作成できたら、Springを起動して実際にWEB画面を表示してみましょう。
図９のようにBootダッシュボードの`local`> `demo[devlop]`> 右クリック >`(再)起動`を順番にクリックしていきます。

`demo[devlop]`の左側のアイコン化 **⇧**になった後、`demo[devlop]`をダブルクリックします。
ダブルクリック後、図１０の画面が表示されたら、ViewとControllerのマッピングが成功しています。
これで、４章までに作成したプログラムが正常に表示できました。
次の章ではModelを使用して、WEB画面に動的に項目表示をします。


### 図9
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/5265c1de-d59c-179e-e77f-31648c9587c2.png'>
</div>
</details>

### 図10
<details>
<summary>クリックで展開</summary>
<div>
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140815/c168b9b3-8bb5-238a-6c7e-8d5b91f1e77f.png'>
</div>
</details>

## Modelで取得した値を表示してみよう
Coming Soon...

## 参考にさせていただいたサイト
[Spring Tool Suite 4(STS)をインストールする手順](https://itsakura.com/java-sts-install)