先生と生徒の会話形式で理解しよう

生徒

「Spring BootとThymeleafを使って、画面に『Hello, World』を表示するにはどうすればいいですか？」

先生

「それは良い質問ですね。Thymeleafテンプレートを使えば、HTMLにJavaの値を簡単に表示できます。まずは基本の流れを知りましょう。」

生徒

「なるほど！テンプレートって具体的にどうやって作るんですか？」

先生

「それでは、Thymeleafのテンプレートファイルを作って、画面に『Hello, World』を表示するまでの手順を説明していきます。」

1. Thymeleafテンプレートの基本とは？

Thymeleafは、JavaとHTMLを組み合わせてWeb画面を作るためのテンプレートエンジンです。Spring Bootと組み合わせることで、HTMLファイルにJavaの値を簡単に表示することができます。

テンプレートとは、画面の見た目を定義したHTMLのことです。Thymeleafでは、通常のHTMLタグにth:textなどの属性を追加して、動的に値を埋め込むことができます。

2. プロジェクトの構成とテンプレートの場所

Spring Bootのプロジェクトでは、HTMLファイルはsrc/main/resources/templatesフォルダに配置します。

このフォルダ内にあるHTMLファイルは、Thymeleafテンプレートとして自動的に読み込まれます。

ファイルの拡張子は.htmlでなければなりません。

3. コントローラークラスを作成しよう

HTMLテンプレートを表示するには、まずコントローラークラスを作成する必要があります。以下はサンプルのコントローラーです。


package com.example.demo;

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

@Controller
public class HelloController {

    @GetMapping("/")
    public String hello(Model model) {
        model.addAttribute("message", "Hello, World");
        return "hello";
    }
}

このコントローラーでは、/にアクセスされたとき、hello.htmlを返すようにしています。そして、messageという名前で「Hello, World」という文字列をテンプレートに渡しています。

4. HTMLテンプレートファイルを作成しよう

次に、src/main/resources/templatesにhello.htmlという名前のHTMLファイルを作成します。

以下はテンプレートの内容です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <h1 th:text="${message}">ここにHelloメッセージが表示されます</h1>
</body>
</html>

th:text="${message}"の部分で、Java側から渡されたmessageという値がHTMLに埋め込まれて表示されます。

5. アプリケーションを実行して確認しよう

Spring Bootアプリケーションを起動し、ブラウザでhttp://localhost:8080/にアクセスしてみましょう。

画面に「Hello, World」と表示されていれば成功です。


Hello, World

テンプレートとコントローラーの連携が正しく行われていれば、このようにJavaの値がHTML画面に出力されます。

6. よくあるミスとその対処法

「Hello, World」が表示されない場合は、以下の点を確認してみましょう。

テンプレートファイルの名前がhello.htmlになっているか
templatesフォルダの中にHTMLファイルがあるか
コントローラーのreturnで指定した名前とファイル名が一致しているか
model.addAttributeで渡した名前とテンプレート内の変数名が一致しているか

特に綴りのミスが多いので注意しましょう。

7. 表示する値を変更してみよう

次は表示するメッセージを別の文字列に変えてみましょう。例えばコントローラー側を次のように修正します。


model.addAttribute("message", "ようこそThymeleafの世界へ！");

すると、画面には以下のように表示されます。


ようこそThymeleafの世界へ！

このように、Javaで設定した値がそのままHTMLに表示されるため、画面の動的な表示が簡単にできます。

8. 今後の発展に向けて

今回は、Thymeleafテンプレートで「Hello, World」を表示する基本的な方法を学びましたが、Thymeleafはこれ以外にも、条件分岐、繰り返し処理、リンク生成など多くの便利な機能があります。

テンプレートエンジンとして非常に強力で、Spring Bootとの相性も抜群です。次は繰り返し処理や条件分岐に挑戦してみましょう。

Thymeleafテンプレートで「Hello, World」を表示しよう！初心者向けにわかりやすく解説