Spring bootで簡単なWebアプリを作ってみる(画面遷移作成)

こんにちは。船井総研デジタルのいっちーです。
前回の記事では、プロジェクトの初期構築を行いました。

https://qiita.com/fsd_itchy/items/fe27a217f5398c09febd

今回は、画面遷移を作っていきたいと思います。

# 画面遷移を設計する

このシステム内で発生する画面遷移と、そのきっかけになるイベントを洗い出していきます。

## メイン画面

![mainscreen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/44e0ba20-7568-6bbc-3f2e-1a251aecb638.png)


| No | イベント | 遷移先 | リクエスト | 備考 |
| ---- | ---- | ---- | ---- | ---- |
| 1 | 初期表示 | メイン画面 | GET | システム初期表示 |
| 2 | つぶやくボタン押下 | メイン画面 | POST | 投稿時にエラーが発生した場合、エラーメッセージを表示して表示中のページを維持する。投稿に成功したら1ページ目に戻す。 |
| 3 | 前のページボタン押下 | メイン画面 | GET | 前のページが無い場合、1ページ目に遷移する。 |
| 4 | 次のページボタン押下 | メイン画面 | GET | 次のページが無い場合、最終ページに遷移する。 |
| 5 | ねぎ登録ボタン押下 | ねぎ登録画面 | GET | - |

:::note info
通常は、前のページ/次のページが無い場合、ボタンをそのものを非活性にする、という設計にすることが多いと思いますが、今回は実装をシンプルにするためこのような設計としました。
:::

## ねぎ登録画面

![registerscreen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/51cd017e-0284-e2ec-4fcc-1eb629c92f92.png)


| No | イベント | 遷移先 | リクエスト | 備考 |
| ---- | ---- | ---- | ---- | ---- |
| 1 | 初期表示 | ねぎ登録画面 | GET | - |
| 2 | 登録ボタン押下 | ねぎ登録画面 | POST | 登録時にエラーが発生した場合、エラーメッセージを表示する。 |
| 3 | 修正ボタン押下 | ねぎ登録画面 | POST | 修正時にエラーが発生した場合、エラーメッセージを表示する。 |
| 4 | 削除ボタン押下 | ねぎ登録画面 | POST | 削除時にエラーが発生した場合、エラーメッセージを表示する。 |
| 5 | 戻るボタン押下 | メイン登録画面 | GET | - |

# 画面遷移を実装する

## Controllerクラスを実装する
設計した画面遷移定義に基づいて、Controllerクラスを実装します。Controllerクラスは、リクエストに基づいて処理を行い、遷移先の画面を返します。多くの場合、実際の処理は次回以降作成していくServiceクラスで行い、ControllerクラスはServiceクラスの処理結果だけ受け取って、それによって遷移先の画面を返す、という構成(MVC+S)にすることが多いと思います。
クラスに`@Controller`アノテーションを付与することで、そのクラスがControllerクラスであるとみなされます。

<details><summary>Controllerクラス</summary>

```java:src/main/java/com/example/negitter/controller/NegitterController.java
@Controller
public class NegitterController {
    /**
     * 初期表示
     * 
     * @return メイン画面
     */
    @GetMapping("/")
    public String index() {
        return "negitter";
    }

    /**
     * ねぎ登録画面に遷移
     * 
     * @return ねぎ登録画面
     */
    @GetMapping("/register")
    public String register() {
        return "register";
    }

    /**
     * 前のページに遷移/次のページに遷移/ねぎ登録画面から戻る
     * 
     * @return メイン画面
     */
    @GetMapping("/negitter")
    public String negitter() {
        return "negitter";
    }

    /**
     * つぶやきを登録
     * 
     * @return メイン画面
     */
    @PostMapping("/negiit")
    public String negiit() {
        return "negitter";
    }

    /**
     * ねぎを登録
     * 
     * @return ねぎ登録画面
     */
    @PostMapping("/registerNegi")
    public String registerNegi() {
        return "register";
    }

    /**
     * ねぎを修正/削除
     * 
     * @return ねぎ登録画面
     */
    @PostMapping("/updateNegi")
    public String updateNegi() {
        return "register";
    }

}
```

</details>

## ThymeleafテンプレートにPost/GetMappingへの紐付けを埋め込む

Thymeleafテンプレートに、Controllerクラスに定義したPost/GetMappingへの紐付けを埋め込みます。

<details><summary>メイン画面</summary>

```diff_html:src/main/resources/templates/negitter.html
(略)

-<a id="registerNegiBtn" class="btn btn-light" href="register.html">ねぎを登録</a>
+<a id="registerNegiBtn" class="btn btn-light" href="register.html" th:href="@{/register}">ねぎを登録</a>

(略)

-<a class="btn btn-light">前のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">前のページへ</a>

(略)

-<a class="btn btn-light">次のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">次のページへ</a>

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/negiit}">

(略)
```

</details>

<details><summary>ねぎ登録画面</summary>

```diff_html:src/main/resources/templates/register.html

(略)

-<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html">戻る</a>
+<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html" th:href="@{/negitter}">戻る</a>

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/registerNegi}">

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/updateNegi}">

(略)

```

</details>

# 動作確認
画面遷移の定義が実装できたら、ビルドして画面遷移できるかどうか確かめてみましょう。

## APコンテナ停止
動作確認は、VSCode上で行います。APコンテナとポートが被っているので、APコンテナを停止します。

```
$ docker stop ap
ap
```

## Tomcat起動
VSCodeの「実行とデバッグ」から、Tomcatを起動します。

![テスト実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/a408c618-af9c-e334-38c4-435264cb9a15.png)

ブラウザから[http://localhost:8080/negitter](http://localhost:8080/negitter)にアクセスして、メイン画面が表示されたら成功です。

![動作確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3280429/439604da-1740-aa7d-27f3-2e71c8cc6de7.png)

一通り画面遷移を試してみて、想定通りの遷移をするかどうか確認しておきましょう。

# まとめ
今回は、Controllerクラスを仮組みして、画面遷移の確認まで行いました。
次回は、Serviceクラスを作って、実際にDBに登録したデータを取れるようにしていきます。

それではまた。