Thymeleaf 「タイムリーフ」とは、Spring Bootにおいて HTMLファイルをテンプレートとして扱い、Javaのデータを安全に組み込むための標準技術です。今回は、Java側から渡したデータをHTMLに埋め込んで、ブラウザに表示させてみましょう。簡単な3ステップで完了します。
Thymeleafによる画面表示
Thymeleaf を用いてJava側から渡したデータをHTMLに埋め込んで、ブラウザに表示させる方法についてお伝えします。ここからは以下の記事を実施した後の手順です。詳しくは以下の別記事をご参照ください。
- pom.xml にThymeleafを追加する
- データを埋め込むHTMLファイルを作る
- HTMLを呼び出すコントローラーを作る
- 起動とブラウザでの確認
pom.xml にThymeleafを追加する
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>pom.xml を開いて、上記の記述をしてください。保存すると、Mavenが自動的にThymeleafに必要なJarファイルをインターネットから集めてくれます。
データを埋め込むHTMLファイルを作る
src/main/resources/templates というフォルダが最初から用意されているので、そこを右クリックします。
[新規] -> [HTML ファイル] を選択し、ファイル名に profile.html と入力して [完了] を押します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ユーザープロフィール</title>
</head>
<body>
<h1>会員情報（Thymeleaf版）</h1>
<!-- th:text を使うことで、Javaから渡されたデータに置き換わります -->
<p>会員ID: <span th:text="${userId}">U000</span></p>
<p>お名前: <span th:text="${userName}">ゲスト様</span></p>
<hr>
<p>これはサーバー側でHTMLを組み立てて表示しています。</p>
</body>
</html>HTML ファイルに上記内容を書き込みます。
th:text=”${…}” という属性が Thymeleaf の記述法です。 このHTMLファイルは、そのままダブルクリックしてブラウザで開くと、デザイン確認用に「U000」や「ゲスト様」という文字が表示されます。しかし、Spring Boot (サーバ) を通して開くと、その部分が Java の本物のデータにカチッと上書きされてブラウザに届きます。デザイナーとエンジニアが同じHTMLファイルを共有して作業できるため、現代で非常に重宝されています。
HTMLを呼び出すコントローラーを作る
com.example.demo パッケージを右クリックして [新規] -> [クラス] を選択します。
クラス名に PageController と入力して [完了] を押します。
package com.example.demo;
import org.springframework.stereotype.Controller; // ※ @RestController ではないことに注意
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller // ① 画面（HTML）を返すときは、無印の @Controller を使います
public class PageController {
@GetMapping("/profile")
public String showProfile(
@RequestParam(name = "name", defaultValue = "名無しさん") String name,
Model model) { // ② Modelオブジェクトを使って、HTMLにデータを渡します
// Java側でデータを用意
var id = "U" + System.currentTimeMillis() % 1000;
// model.addAttribute("キー名", 値) でHTML側にデータを預けます
model.addAttribute("userId", id);
model.addAttribute("userName", name + " 様");
// ③ 返り値として、表示したいHTMLのファイル名（拡張子なし）を文字列で指定します
// これにより src/main/resources/templates/profile.html が呼び出されます
return "profile";
}
}上記のように、データをHTMLに引き渡すためのJavaコードを書きます。
起動とブラウザでの確認
DemoApplication.java を [実行] -> [Java アプリケーション] で起動します。
Spring Boot が起動したら、ブラウザで (http://localhost:8080/profile?name=山田太郎) にアクセスして、上記画像のように表示されることを確認してください。
コメント