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

生徒

「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とSpring Bootの基本を振り返る

この記事では、Spring BootとThymeleafを組み合わせて、画面に「Hello, World」を表示するまでの一連の流れを、初心者にもわかりやすい形で学びました。 Thymeleafテンプレートは、HTMLをそのまま活用しながら、Java側で用意した値を画面に表示できる点が大きな特徴です。特別な記法を大量に覚えなくても、HTMLタグに属性を少し追加するだけで、動的なWebページを作成できます。

Spring Bootでは、コントローラークラスが画面表示の起点となり、URLと処理内容を結び付ける役割を担います。その中でModelを使って値を渡し、Thymeleafテンプレート側で受け取って表示するという構成は、Webアプリケーション開発の基本パターンです。この流れを理解しておくことで、ログイン画面や入力フォーム、一覧画面など、さまざまな画面作成に応用できるようになります。

テンプレートとコントローラーの関係

Thymeleafを使った開発で特に重要なのは、コントローラーで指定するテンプレート名と、実際のHTMLファイル名が一致していることです。また、Modelに追加した属性名と、テンプレート内で参照する変数名も正確に合わせる必要があります。この二つがずれていると、画面に何も表示されなかったり、エラーが発生したりします。

今回の「Hello, World」の例は非常にシンプルですが、Webアプリケーションの仕組みを理解するうえでは、とても大切な第一歩です。小さな成功体験を積み重ねることで、Spring BootとThymeleafの構造が自然と身についていきます。

サンプルプログラムで理解を深める

ここで、今回学んだ内容を整理するための簡単なサンプルをもう一度確認してみましょう。コントローラークラスとHTMLテンプレートの役割を意識しながら読むと、理解がより深まります。


@Controller
public class SampleController {

    @GetMapping("/sample")
    public String sample(Model model) {
        model.addAttribute("message", "Thymeleafの基本を理解できました");
        return "sample";
    }
}

このクラスでは、URLにアクセスしたときに文字列をModelに設定し、テンプレートに渡しています。処理の流れは、これまで紹介してきた内容と同じで、非常にシンプルです。


<h1 th:text="${message}">メッセージがここに表示されます</h1>

テンプレート側では、th:textを使ってJavaから渡された値を表示します。この基本形を理解していれば、表示する文字列を変えたり、複数の値を扱ったりすることも難しくありません。

今後の学習につなげるポイント

Thymeleafでは、条件によって表示を切り替える機能や、一覧データを繰り返し表示する機能もよく使われます。例えば、ログイン状態によってメニューを切り替えたり、データベースから取得した一覧を表形式で表示したりする場面です。今回学んだ「値を表示する」という基本を土台に、少しずつ機能を広げていくことが大切です。

Spring BootとThymeleafの組み合わせは、学習コストが低く、実務でもよく使われています。基本構造をしっかり理解しておけば、実際の開発現場でも応用が利きやすくなります。

先生と生徒の振り返り会話

生徒

「最初は難しそうだと思っていましたが、コントローラーとHTMLの役割が分かれていると考えると、意外と理解しやすかったです。」

先生

「その気づきはとても大切ですね。Spring BootとThymeleafは役割分担がはっきりしているので、構造を意識すると混乱しにくくなります。」

生徒

「Modelで値を渡して、th:textで表示する流れがよく分かりました。これなら表示する内容を自由に変えられそうです。」

先生

「その通りです。次は条件分岐や繰り返し処理に挑戦すると、さらにWebアプリらしい画面が作れるようになりますよ。」

生徒

「まずは今回の内容をしっかり復習してから、少しずつステップアップしていきます。」