たなかのJava日記

どんなことをやったか(学んだか)、どこで詰まったか(わからなかったか)、どこで工夫したかの記録です。Dayで始まる記事は1日遅れで更新されることが多いです。

【Spring Boot】HTMLとJavaを分けて構成する①

前回までで、Webブラウザからのタスクの追加と一覧表示ができるようになりました。
しかし、HomeControllerクラスには大きな問題があります。

package jp.gihyo.projava.tasklist;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.time.LocalDateTime;

@Controller
public class HomeController {
    @RequestMapping(value="/hello")
    @ResponseBody()
    String hello() {
        return """
                <html>
                    <head><title>Hello<title></head>
                    <body>
                        <h1>Hello</h1>
                        It works!<br>
                        現在時刻は%sです。
                    </body>
                </html>
                """.formatted(LocalDateTime.now());
    }
}


それはJavaクラスにHTMLが直接記述されていることです。

これにより2点ほど問題が発生します。

1,Webページのデザインを少し変えたい場合など、Javaソースコードを修正しなければならない
2,Javaを知らなければ、デザインを組むことも出来ない

実際の開発現場では、Webページのデザインは開発者ではなく、デザイナーが担当するケースが多いことと、
可読性などを踏まえると2つを分けるのが一般的とのことです。

そこで、「コントローラ」をJavaプログラムで、
「ビュー」をHTMLのコードで別々に分けて構成することにします。


そうすることによって、処理の流れとしては以下のようになります。

HTTPリクエストを受け取る

Javaで処理を行う

処理を行った結果(データ)をHTMLへ渡す

HTMLでデータを受け取ったら該当の箇所へ埋め込む

埋め込んだ結果をHTMLレスポンスとして返す

結果がWebブラウザに表示される


ただ分けて構成を変更しても、その二つは別々のものです。
これらを組み合わせるツールが、テンプレートエンジンと呼ばれるものです。
Spring Frameworkと組み合わせて使えるテンプレートエンジンとしてはいくつかありますが、
Spring Bootと相性が良く、人気があるのがThymeleafです。
今回は、タスク管理アプリケーションのビュー部分をThymeleafを導入し改良していきます。

Thymeleafを導入の前に、
繰り返しになりますが、作成するタスク管理アプリケーションの仕組みを復習します。

まず、フォームやテーブルのタグなどの部分はHTMLテンプレートとして用意します。
そして、TaskItemオブジェクトで管理されているタスク情報についてはプログラムで生成し、
テンプレートと組み合わせてHTTPレスポンスとして返すような仕組みになります。

では、早速Thymeleafが使えるようにpom.xmlを修正します。

Mavenを使用している場合は、pom.xmlに依存関係の設定を追加するだけです。
それだけで、Spring Bootプロジェクトに導入することができます。

pom.xmlのdependenciesタグの中に、以下のように依存関係を追加します。

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


追加後は必ずMavenモジュールの再ロードを行ってください。
これでThymeleafを利用する準備が整いました。