Spring MVC の基本構成を理解するためのアプリケーション作成

## Excuse
- 転職した同期が突然Spring MVCのプロジェクトを全部作らされて辛そうだったので、ChatGPTと会話しながら理解できそうな簡単なデモができる記事を作る。
- 動作保証なし。
- そういえば単体テストのノウハウとかも獲得した気がするから気が向いたら書こう。。。（書かない）

## **概要**
このチュートリアルでは、Spring MVC の処理フローを理解するために、最小構成のアプリケーションを作成します。

---

## **1. 開発環境の準備**

Spring MVC を使ったアプリケーションを作成するためには、基本的な環境構築が必要です。この章では、Windows 環境での開発環境の準備とプロジェクトのセットアップ方法を解説します。

### **必要なツール**
以下のツールをインストールしてください。

#### **Java Development Kit (JDK)**
1. **推奨バージョン**
   - JDK 17 以上（Spring Boot 3.x.x を使用するため）

2. **インストール手順**
   1. [Oracle Java](https://www.oracle.com/java/technologies/javase-downloads.html) または [AdoptOpenJDK](https://adoptium.net/) にアクセスします。
   2. Windows 用のインストーラーをダウンロードし、指示に従ってインストールします。
   3. インストール後、環境変数に `JAVA_HOME` を設定します。
      - 例: `C:\Program Files\Java\jdk-17`

3. **動作確認**
   コマンドプロンプトを開き、以下のコマンドを実行します：
   ```bash
   java -version
   ```

#### **Apache Maven**
1. **Apache Maven の公式サイトにアクセス**
2. **ZipファイルをDL**
    - [Apache Maven ダウンロードページ](https://maven.apache.org/download.cgi)
    - 最新バージョンの **Binary zip archive** を選択してダウンロードします。

3. **ZIP ファイルを解凍**
    - ダウンロードした ZIP ファイルを解凍します。
    - 解凍先の推奨フォルダ例: `C:\Apache\Maven`
    - 解凍したフォルダの中に `bin` フォルダがあることを確認してください。
4. **環境変数の設定**
    - MAVEN_HOME を設定
        - Windows の「環境変数」を開きます。（「スタートメニュー」→「環境変数を編集」と検索。）
        - 「システム環境変数の編集」をクリックします。
        - 「システム環境変数」セクションで「新規」をクリックします。
            - 変数名: `MAVEN_HOME`
            - 変数値: Maven を解凍したパス（例: `C:\Apache\Maven`）
        - PATH に追加
            - 環境変数の「Path」を選択し、「編集」をクリックします。
            - 新しいエントリを追加し、以下を入力します：
               - `%MAVEN_HOME%\bin`
5. **動作確認**
    -  コマンドプロンプトを開きます（`cmd` を検索して実行）。
    -  次のコマンドを実行します：
       ```bash
       mvn -v
        ```
    -  正常にインストールされている場合、以下が表示されます。
        ```
        Apache Maven 3.x.x (バージョン番号)
        Maven home: C:\Apache\Maven
        Java version: 17.0.x, vendor: Oracle Corporation
        ```

#### **IDE (統合開発環境)**
   - 推奨ツール
     - [IntelliJ IDEA](https://www.jetbrains.com/idea/)（Community Edition で十分です）
     - [Eclipse IDE](https://www.eclipse.org/downloads/)
     - VSCodeでもいいですがInttelliJ IDEA Community Editionを業務では使っています

#### **Web ブラウザ**
   - Google Chrome や Firefox など、最新のブラウザを用意してください。

環境構築編は多分こんなもんです。

---

## 2. Spring MVCの動き概要
### **アプリケーションの開始方法**
1. **エントリポイントを実行**
   - **エントリポイント**（`main` メソッド）とは、アプリケーションの実行が開始される場所のことです。
   - Spring Boot では、エントリポイントである `DemoApplication` クラスの `main` メソッドを実行することで、アプリケーション全体を初期化し、リクエストを待ち受ける状態にします。

2. **アプリケーションの状態**
   - 組み込み Web サーバー（Tomcat）が起動し、指定されたポート（デフォルト: 8080）でリクエストをリッスンします。
   - 起動後、ブラウザから指定した URL にアクセスすることで、リクエストを送ることができます。


### **処理フロー**
1. **リクエスト受信**
   - ユーザーがブラウザで名前を入力し、サーバーにリクエストを送信。
   - リクエストパラメータをコントローラーが受け取る。

2. **データの処理**
   - コントローラーがリクエストパラメータを取得し、`Model` に格納。
   - 格納されたデータをビューに渡す準備をする。

3. **ビューのレンダリング**
   - **レンダリング**とは、テンプレートやプログラムから画面に表示するためのデータ（HTMLなど）を生成する処理のことです。
   - Spring MVC では、ビュー（HTML テンプレート）が `Model` のデータを使用して動的に生成されます。
   - 最終的にレンダリング結果がユーザーにレスポンスとして返されます。

このように、アプリケーションを起動することでリクエスト待ち受け状態を作り、リクエストが来たときにコントローラーがデータ処理とビューへのデータ引き渡しを行う構成を学べます。

---

## **3. 実装**

### **1. プロジェクトのセットアップ**
#### **プロジェクト作成方法**
1. Spring Initializr を使用してプロジェクトを作成します。
   - [Spring Initializr](https://start.spring.io/) にアクセス。
   - 設定を以下のようにします：
     - **Project**: Maven
     - **Language**: Java
     - **Spring Boot Version**: 3.x.x
     - **Dependencies**: Spring Web, Thymeleaf
   - プロジェクトをダウンロードして解凍後、IDE（IntelliJ IDEA や Eclipse）にインポートします。

2. 手動で作成する場合は、以下の依存関係を `pom.xml` に追加します。

```xml
<dependencies>
    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Thymeleaf -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

```

### **2. 実装ファイルの作成**
以下のフォルダ構成を作成して、それぞれのファイルを実装します。

```
src/main/java/com/example/demo/
  - DemoApplication.java
  - controller/GreetingController.java
src/main/resources/
  - templates/greeting.html
  - application.properties
```
#### **エントリポイントの作成**
`DemoApplication.java`:
```
package com.example.demo;

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

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args); // アプリケーションを起動
    }
}

```

**コントローラ作成**
`controller/GreetingController.java`:
```java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class GreetingController {

    @GetMapping("/greeting")
    public String greeting(
        @RequestParam(name = "name", required = false, defaultValue = "Tetsuya") String name,
        Model model
    ) {
        model.addAttribute("name", name); // Model にデータを格納
        return "greeting"; // ビュー名を返す
    }
}

```

**ビューの作成**
`templates/greeting.html`
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Greeting</title>
</head>
<body>
    <h1>Hello, <span th:text="${name}">User</span>!</h1>
    <form action="/greeting" method="get">
        <input type="text" name="name" placeholder="Enter your name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

```

- **設定ファイルの作成**
```properties
# サーバーポート（任意で変更可能）
server.port=8080
```

---

## **4. 簡単なデモ**
1. アプリケーションの起動
    - IDE で DemoApplication クラスを実行します。
    - 起動ログに Tomcat started on port(s): 8080 が表示されれば成功です。
2. ブラウザで動作確認
    - ブラウザでアクセス
        - http://localhost:8080/greeting にアクセス。
        - 動作確認
    - 初回表示：Hello, Tetsuya! と表示されます。
        - 入力フォームに名前を入力（例: "Tetsuya"）し、「Submit」をクリック。
        - 動的にレンダリングされた画面に Hello, Takuma! と表示されます。

3. デモ結果の確認ポイント
    - リクエスト URL のパラメータが反映されることを確認。
    - URL を直接変更（例: http://localhost:8080/greeting?name=Alice）しても、Hello, Alice! と表示されます。
    - フォームを利用した名前の入力と表示の流れを確認。

---

## 5. まとめ
- エントリポイントでアプリケーションを起動し、リクエストをリッスンする状態にします。
- コントローラーがリクエストパラメータを受け取り、ビューにデータを渡す処理を確認できます。
- ビュー（HTML）が動的にレンダリングされ、クライアントにレスポンスとして返されます。