前回までで、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ページのデザインは開発者ではなく、デザイナーが担当するケースが多いことと、
可読性などを踏まえると２つを分けるのが一般的とのことです。
そこで、「コントローラ」を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を利用する準備が整いました。