SpringのThymeleafで${}を使った変数の表示方法を初心者向けに解説！

${}で変数を表示する基本的な記述方法

新人と先輩の会話形式で理解しよう

新人

「SpringでWebアプリケーションを作っているんですが、HTMLの画面にJavaの値を表示する方法ってあるんですか？」

先輩

「あるよ。SpringではThymeleafっていうテンプレートエンジンを使って、${}でJavaの変数をHTMLに表示できるんだ。」

新人

「へぇー！その${}ってどうやって使うんですか？Controllerとかで何か準備がいるんでしょうか？」

先輩

「その通り。じゃあ、Springの@Controllerで変数を渡して、それをThymeleafで表示する基本的な仕組みを説明していくね。」

1. Webアプリケーションで変数を表示するとは？

Webアプリケーションで変数を表示するとは、サーバーサイドのJavaで持っているデータを、HTMLの画面上に出力することを指します。たとえば、ログイン中のユーザー名や商品の名前、価格などをHTML上に表示したいとき、Javaの変数の値を画面に反映させる必要があります。

このような動的な画面を作るために、SpringではThymeleafというテンプレートエンジンを使うのが一般的です。Thymeleafを使えば、Javaのコードで定義した変数をHTML内に埋め込むことができ、柔軟で拡張性の高いWeb画面を作ることができます。

SpringとThymeleafの連携は、初心者がWebアプリ開発を学ぶうえで最も基本となる重要なポイントです。特に${}の使い方を理解することで、画面とデータの連携がスムーズになり、開発効率も大幅にアップします。

開発環境としては、今回はpleiadesを使い、ビルドツールはGradleを使用する前提で解説します。プロジェクト作成時に、Thymeleafの依存関係をpleiades上のチェックで追加しておくと、すぐに使えるようになります。

2. Thymeleafにおける${}の基本的な使い方

Thymeleafにおける${}は、Springの@Controllerで渡された変数をHTMLテンプレート内で表示するために使う記法です。基本的な流れとしては、Modelオブジェクトを使って変数をHTMLに渡し、th:text属性の中で${変数名}のように記述することで、画面上に表示できます。

それでは、具体的な例を見てみましょう。以下は、Springの@Controllerからユーザー名を渡して、それをThymeleafのHTMLに表示する基本的なサンプルコードです。

【SampleController.java】


package com.example.demo.controller;

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

@Controller
public class SampleController {

    @GetMapping("/welcome")
    public String showWelcomePage(Model model) {
        model.addAttribute("username", "山田太郎");
        return "welcome";
    }
}

このコントローラでは、Modelにusernameというキーで「山田太郎」という文字列を追加しています。そして、welcome.htmlというテンプレートファイルを表示しています。

【welcome.html（テンプレート）】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ようこそ画面</title>
</head>
<body>
    <h1 th:text="'こんにちは、' + ${username} + 'さん！'">こんにちは、ゲストさん！</h1>
</body>
</html>

このHTMLでは、th:text属性を使って「こんにちは、山田太郎さん！」という文を表示しています。${username}が、Java側から渡された変数の値「山田太郎」に置き換えられます。

このように${}の中に変数名を書くことで、Javaの値をHTMLに埋め込むことができます。

【画面表示結果】


こんにちは、山田太郎さん！

Thymeleafの${}は、変数の中身を参照するための基本記法であり、今後さまざまな画面表示に活用されていきます。

たとえば、商品名、価格、ログインユーザー、日付など、多くの場面で${}による変数表示は不可欠です。

また、Spring Bootプロジェクトをpleiadesで作成する際には、Thymeleafの依存関係も忘れずに追加しましょう。Gradleプロジェクトであれば、以下のような記述がbuild.gradleに含まれているはずです。


dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

この依存関係があることで、SpringとThymeleafの連携がスムーズに行えるようになります。テンプレートファイルはsrc/main/resources/templatesフォルダに配置するのがルールです。

このように、${}の基本的な使い方をしっかりと理解しておくことは、SpringのWebアプリ開発において非常に重要です。次回は、複数の変数やリストを画面に表示する方法など、もう少し応用的な内容にもチャレンジしていきましょう。

3. コントローラでデータをModelに格納し、HTMLで${}を使って表示する流れ

Springアプリケーションでは、画面に表示したいデータをModelというオブジェクトに格納して、Thymeleafのテンプレートに渡す仕組みになっています。たとえば、ユーザー名やメッセージなどをコントローラ側で用意し、それをHTMLに表示する際に${}を使って取り出します。

この流れを簡単にまとめると、以下のようになります。

コントローラクラスに@Controllerアノテーションを付ける
ハンドラメソッドでModelオブジェクトを引数に受け取る
model.addAttribute()を使って値を追加する
HTMLテンプレートで${変数名}を記述する

この一連の動作を通して、SpringのサーバーサイドからテンプレートエンジンであるThymeleafにデータを受け渡し、最終的にブラウザに表示することができます。

4. 具体的なコード例（ControllerとHTMLの対応関係）

それでは、実際に複数のデータをModelに格納してHTMLで表示する例を紹介します。今回は、ユーザー名だけでなく、メッセージや日付といった情報も画面に表示する例を用意しました。

【MultiDataController.java】


package com.example.demo.controller;

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

import java.time.LocalDate;

@Controller
public class MultiDataController {

    @GetMapping("/info")
    public String showInfo(Model model) {
        model.addAttribute("username", "佐藤花子");
        model.addAttribute("message", "ようこそ、Springアプリへ！");
        model.addAttribute("today", LocalDate.now());
        return "info";
    }
}

この@Controllerでは、3つのデータをModelに格納しています。それぞれusername、message、todayというキーを使ってHTMLへ渡されています。

【info.html（テンプレート）】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>情報ページ</title>
</head>
<body>
    <h1 th:text="'こんにちは、' + ${username} + 'さん'">こんにちは、ゲストさん</h1>
    <p th:text="${message}">ここにメッセージが表示されます</p>
    <p th:text="'本日の日付は ' + ${today} + ' です。'">日付</p>
</body>
</html>

このテンプレートファイルでは、${}を使って、コントローラから渡された3つの変数をそれぞれ表示しています。th:text属性の中で文字列と変数を結合して表示することも可能です。

【画面表示結果】


こんにちは、佐藤花子さん
ようこそ、Springアプリへ！
本日の日付は 2025-07-09 です。

このように、Modelに追加されたデータをHTML上で${}で取り出すことで、Javaで用意した内容を画面に反映できます。これはSpringアプリケーションの基本的な構造の一つであり、非常に多くの場面で利用される仕組みです。

5. よくある初心者のつまずきポイントとその解決方法

SpringとThymeleafで${}を使って変数を表示する際、初心者がよくつまずくポイントがいくつかあります。ここでは代表的なものを取り上げて、その原因と解決方法を解説します。

【つまずきポイント1】HTMLが表示されない、もしくは空白になる

これは、Modelに値をセットしていなかったり、キーの名前が間違っていたりするケースです。たとえば、Java側でusernameという名前でデータを追加したのに、HTMLで${userName}と記述してしまうと、値が正しく取り出せません。

解決策としては、Java側とHTML側で使用するキーの名前を一致させることが重要です。また、表示するHTMLファイル名が正しいか、templatesディレクトリに正しく配置されているかも確認しましょう。

【つまずきポイント2】テンプレートファイルが読み込まれない

Springでは、HTMLテンプレートをsrc/main/resources/templatesに配置する必要があります。このルールに従わずに、別の場所にファイルを置いてしまうと、テンプレートが読み込まれずエラーになります。

必ず正しい場所にHTMLファイルを配置し、ファイル名に拡張子.htmlが付いているかどうかも確認しましょう。

【つまずきポイント3】Thymeleafの依存関係が不足している

GradleプロジェクトでThymeleafを使用するには、build.gradleに適切な依存関係を追加する必要があります。pleiadesでプロジェクトを作成する際に、Thymeleafをチェックしていなかった場合、必要なライブラリが含まれないことがあります。

その場合は、以下のように手動で依存関係を追加しましょう。


dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

依存関係を追加後は、プロジェクトを再ビルドし、Thymeleafが正しく機能するか確認してください。

【つまずきポイント4】文字列の連結がうまくいかない

Thymeleafで文字列を連結する際、+を使うことができますが、Javaのコードと異なり、構文エラーになりやすい箇所です。括弧やクォートの位置に注意して、必ず正しい構文で記述するようにしましょう。

また、必要であればth:utextやth:ifなど、他の属性と組み合わせることで、より柔軟なテンプレート処理が可能になります。

このようなつまずきポイントを理解しておくことで、Springアプリケーションの開発中に不必要なエラーを避け、効率よく学習や実装を進めることができます。初心者のうちはエラーに対して焦らず、一つずつ原因を切り分けて確認することが成功への近道です。

6. リストやオブジェクトを画面に表示する応用例（ループやプロパティ参照）

ここからは、${}の応用として、Springでリストやオブジェクトの中身をThymeleafテンプレート上に表示する方法を解説します。実際のWebアプリケーションでは、ユーザー一覧や商品リストなど、複数のデータを繰り返し表示するケースがよくあります。

Thymeleafでは、th:eachという属性を使うことで、ループ処理を簡単に記述できます。Java側でListやMapをModelに渡しておき、HTML側でth:eachを使って順番に取り出して表示する形になります。

今回は、Userというクラスのリストを画面に表示するサンプルを見てみましょう。

【User.java】


package com.example.demo.model;

public class User {
    private String name;
    private int age;

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public int getAge() {
        return age;
    }
}

【UserListController.java】


package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.List;

@Controller
public class UserListController {

    @GetMapping("/users")
    public String showUserList(Model model) {
        List<User> users = Arrays.asList(
            new User("高橋一郎", 25),
            new User("中村二郎", 30),
            new User("山口三子", 28)
        );
        model.addAttribute("userList", users);
        return "user-list";
    }
}

このコントローラでは、Userオブジェクトのリストを作成し、それをModelにuserListとして追加しています。次に、テンプレートHTMLでこのリストを表示してみましょう。

【user-list.html（テンプレート）】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー一覧</title>
</head>
<body>
    <h1>登録ユーザー一覧</h1>
    <ul>
        <li th:each="user : ${userList}" th:text="${user.name} + '（年齢：' + ${user.age} + '歳）'">
            ユーザー名
        </li>
    </ul>
</body>
</html>

th:eachは、ループ処理を行うための属性で、リストの中身を1つずつ取り出してuserという変数で使えるようにしています。そして、${user.name}や${user.age}といった形でプロパティにアクセスします。

【画面表示結果】


高橋一郎（年齢：25歳）
中村二郎（年齢：30歳）
山口三子（年齢：28歳）

このように、ThymeleafではJavaのリストを簡単にHTMLに展開できるため、動的な一覧表示などを効率的に実装できます。Springアプリケーションでは、検索結果やユーザー管理、商品一覧など、さまざまな画面でこの仕組みが使われています。

7. ${}を使うときの注意点とベストプラクティス

${}の使い方はシンプルですが、注意すべき点もいくつか存在します。正しく理解しておかないと、画面に何も表示されなかったり、予期せぬエラーが発生することがあります。ここでは実践的な観点から、よくある注意点とベストプラクティスを紹介します。

【注意点1】変数がnullの場合の扱い

${}で参照する変数がnullの場合、Thymeleafではエラーにはなりませんが、何も表示されません。意図しない空白になることがあるため、th:ifを使って表示を制御する方法が推奨されます。


<p th:if="${username != null}" th:text="'こんにちは、' + ${username} + 'さん！'">こんにちは！</p>

【注意点2】エスケープ処理に注意する

Thymeleafではth:textによって出力される文字列はHTMLエスケープされます。もしHTMLタグをそのまま出力したい場合はth:utextを使いますが、XSS（クロスサイトスクリプティング）などのセキュリティリスクがあるため、慎重に使用する必要があります。


<p th:utext="${htmlMessage}"></p>

【注意点3】変数名の一致とスコープの意識

Java側のmodel.addAttribute()で設定した名前と、HTML側での${}の変数名は完全に一致させる必要があります。名前を間違えると、値が画面に表示されません。また、th:eachでループ内の変数を定義した場合、そのスコープ内でのみ使える点にも注意しましょう。

これらのポイントを押さえることで、Thymeleafと${}を使ったテンプレート作成がより安定し、安全で効果的になります。

8. なぜ${}の理解がSpringアプリ開発で重要なのか

Springフレームワークを使ってWebアプリケーションを構築する際、画面とJavaの間でデータをやり取りする機能は非常に重要な役割を果たします。その橋渡し役として活躍するのが、Thymeleafと${}によるデータバインディングです。

画面に動的な情報を表示するには、単純なHTMLだけでは限界があります。ユーザー名、商品の価格、日付、通知メッセージなど、毎回異なる情報を表示する必要があるため、Javaで生成したデータをHTMLに取り込む仕組みが必要になります。そこで登場するのが${}記法なのです。

この記法を正しく理解し活用できることで、静的なページではなく、動的に情報を反映するリアルタイム性のあるWebアプリケーションを作成できるようになります。また、ユーザーの入力を受け取り、結果を表示するといった、双方向のインタラクションにも対応可能になります。

さらに、${}の使い方は今後学ぶフォームバインディングや入力検証、テーブルの動的生成、条件分岐などにもつながる基礎的な技術です。ここをしっかりと身につけておくことで、Spring Bootによる実践的なWebアプリケーションの開発にスムーズに進めるようになります。

初心者がつまずきやすいポイントではありますが、今回紹介したように、基本的な仕組みと使い方、注意点を押さえておけば、難しくはありません。ぜひ実際にコードを書いて試しながら、理解を深めていきましょう。

SpringのThymeleafで${}を使った変数の表示方法を初心者向けに解説！

1. Webアプリケーションで変数を表示するとは？

2. Thymeleafにおける${}の基本的な使い方

3. コントローラでデータをModelに格納し、HTMLで${}を使って表示する流れ

4. 具体的なコード例（ControllerとHTMLの対応関係）

5. よくある初心者のつまずきポイントとその解決方法

6. リストやオブジェクトを画面に表示する応用例（ループやプロパティ参照）

7. ${}を使うときの注意点とベストプラクティス

8. なぜ${}の理解がSpringアプリ開発で重要なのか

関連記事: