<th:text>と通常のHTMLの違いを理解しよう

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

新人

「SpringでThymeleafを使って画面に値を出力するとき、HTMLの中に直接書くのと、th:textを使うのって何が違うんですか？」

先輩

「いいところに気付いたね。実はth:textと通常のHTMLには大きな違いがあるんだ。」

新人

「そんなに違うんですか？ちょっとわかりにくくて…」

先輩

「じゃあ、HTMLの基本から確認して、それとth:textの違いを比べてみようか。」

1. 通常のHTMLでの表示方法とは？

HTMLでは、表示したいテキストをそのままタグの中に書いておけば、ブラウザに表示されます。たとえば、「こんにちは」という文字を表示したければ、次のように書きます。


<p>こんにちは</p>

これがいわゆる「静的なHTML」です。つまり、開発者があらかじめ記述したテキストだけが画面に出力される仕組みです。データが変化しない場合や、固定のメッセージを表示したいときに使います。

しかし、Webアプリケーションでは、ユーザー名や日付、商品名など、毎回変わる動的なデータを表示したいことが多くあります。そこで登場するのが、SpringとThymeleafを組み合わせたth:textという仕組みです。

2. th:textを使うことでどのような違いがあるか

SpringでWebアプリケーションを開発する際には、@Controllerクラスを使ってサーバーサイドでデータを処理し、そのデータをテンプレート（HTML）に渡します。そのテンプレート内で動的にデータを表示したいときに使うのが、th:textです。

th:textは、HTMLのタグに対して「表示内容を置き換える」ためのThymeleaf専用の属性です。これを使うことで、Java側から渡された変数の値を画面上に表示することができます。

それでは、実際にSpringの@ControllerとThymeleafのテンプレートで、th:textを使った動的表示の流れを見ていきましょう。

【GreetingController.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 GreetingController {

    @GetMapping("/greeting")
    public String showGreeting(Model model) {
        model.addAttribute("name", "佐藤太郎");
        return "greeting";
    }
}

このコントローラクラスは、Spring BootをpleiadesでGradleプロジェクトとして作成したものを前提としています。Thymeleafはプロジェクト作成時に依存関係としてチェックを入れて追加しています。

Modelに"name"というキーで「佐藤太郎」という文字列を渡しています。そしてテンプレートファイルgreeting.htmlでnameの値を表示します。

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


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>挨拶ページ</title>
</head>
<body>
    <p th:text="'こんにちは、' + ${name} + 'さん！'">ここに名前が入ります</p>
</body>
</html>

このようにth:textを使うことで、HTML上に「こんにちは、佐藤太郎さん！」と表示されます。

【実行結果】


こんにちは、佐藤太郎さん！

もしこれを通常のHTMLで書いた場合、次のように文字列をベタ書きするしかありません。


<p>こんにちは、佐藤太郎さん！</p>

このHTMLでは、毎回同じ内容が表示されるため、たとえばユーザー名が変わったときに自動で切り替えることができません。th:textを使えば、Javaの変数に応じて表示内容が変化するため、より柔軟なWebアプリケーションの画面を作成できます。

また、th:textを使用すると、セキュリティ的にも安全な方法でデータをHTMLに出力できます。Thymeleafは内部的にHTMLエスケープを行ってくれるため、XSS（クロスサイトスクリプティング）などの攻撃を防ぐ助けにもなります。

3. th:textが必要になる具体的な場面とは？

Webアプリケーションでは、ユーザーごとに異なる情報を表示する場面が非常に多くあります。たとえば、ログインユーザーの名前、購入履歴、最新のお知らせ、商品リストなどは毎回内容が変わる動的なデータです。

こうした動的なデータは、HTMLに直接書くことができません。毎回内容が変わるので、サーバー側で処理した結果をHTMLに反映する必要があります。ここで活躍するのがth:textです。

たとえば、以下のような画面でth:textを使うことが多いです：

ログイン後の「〇〇さん、ようこそ」メッセージ
商品の価格や説明文
一覧画面のループ処理
最新ニュースの本文

一度作ったテンプレートに変数を埋め込むだけで、内容を動的に変えられるのが、th:textの強みです。これにより、テンプレートの再利用性が高まり、保守もしやすくなります。

4. Springの@ControllerとThymeleafでどのように値を渡すか

SpringアプリケーションでThymeleafテンプレートに値を渡すには、@Controllerクラスの中でModelオブジェクトにデータを追加し、それをHTMLテンプレート内でth:textなどを使って表示します。

以下は、複数の値をテンプレートに渡す基本的なサンプルコードです。

【MessageController.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 MessageController {

    @GetMapping("/message")
    public String showMessage(Model model) {
        model.addAttribute("user", "田中花子");
        model.addAttribute("notice", "お知らせがあります。");
        return "message";
    }
}

この例では、2つの文字列をModelに格納しています。それぞれ"user"と"notice"という名前でテンプレートに渡されます。

【message.html（テンプレートファイル）】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>メッセージ画面</title>
</head>
<body>
    <p th:text="'こんにちは、' + ${user} + 'さん！'">こんにちは、ゲストさん！</p>
    <p th:text="${notice}">ここにお知らせが表示されます。</p>
</body>
</html>

Modelで設定した"user"と"notice"の値が、それぞれth:textによってHTMLの表示内容に反映されます。テンプレート側にはプレースホルダとして代替テキストを書いておくこともできるため、サーバーから値が渡らなかった場合の表示も考慮できます。

5. HTMLでの表示との違いを比較するコード例

ここでは、通常のHTMLでのベタ書きと、th:textを使った動的な書き方を並べて比較してみましょう。違いを明確に理解することで、どの場面でth:textが必要かが見えてきます。

【通常のHTMLの例（ベタ書き）】


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>静的なページ</title>
</head>
<body>
    <p>こんにちは、佐藤太郎さん！</p>
    <p>本日のお知らせは「本日メンテナンスがあります」です。</p>
</body>
</html>

このようなHTMLでは、表示する内容を変更したい場合、毎回HTMLファイルを直接修正しなければなりません。動的な対応ができないため、効率も悪くなります。

【Thymeleafのth:textを使った例（動的表示）】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>動的なページ</title>
</head>
<body>
    <p th:text="'こんにちは、' + ${user} + 'さん！'">こんにちは、ゲストさん！</p>
    <p th:text="'本日のお知らせは「' + ${notice} + '」です。'">お知らせが入ります</p>
</body>
</html>

このテンプレートを使えば、Modelに設定したデータによって表示内容が変化します。Springの@Controllerと連携することで、HTMLをそのままテンプレートとして再利用できるのが最大のメリットです。

さらに、th:textは自動的にエスケープ処理を行ってくれるため、XSS対策もできて一石二鳥です。

6. th:textを使うときの注意点（エスケープ処理、タグの扱いなど）

Thymeleafでth:textを使うときには、いくつか注意しておくべきポイントがあります。特に初心者がつまずきやすいのが、HTMLタグの扱いやエスケープ処理についてです。

th:textは、文字列をそのままテキストとして表示するため、HTMLタグのような記号（たとえば <b> や <script>）も画面に文字として出てしまいます。これはセキュリティ上の理由で、HTMLのエスケープ処理が自動で行われるからです。

以下は、HTMLタグを含む変数をth:textで出力した例です。

【Controller側のコード】


model.addAttribute("htmlText", "<b>重要なお知らせ</b>");

【テンプレート側のコード】


<p th:text="${htmlText}">ここに表示されます</p>

この場合、ブラウザには次のように表示されます。


<b>重要なお知らせ</b>

しかし、この表示は太字にはなりません。なぜなら、<b>タグがHTMLとしてではなく、テキストとして扱われているからです。

HTMLタグをそのまま適用して表示したい場合は、th:utextという属性を使います。これについては次の章で詳しく説明します。

7. th:textと他のThymeleaf属性との組み合わせ例

Thymeleafにはth:textのほかにも、さまざまな属性が用意されています。ここでは代表的なth:utextやth:ifとの使い方を紹介します。

【th:utextでHTMLタグを有効にする】

th:utextを使うと、変数内のHTMLタグをエスケープせずに、そのまま適用して表示できます。たとえば次のようなコードになります。


<p th:utext="${htmlText}">ここにHTMLを出力</p>

この場合、${htmlText}に含まれている<b>タグなどが有効になり、太字などのスタイルが適用されます。ただし、XSSなどの脆弱性に注意が必要です。信頼できる内容以外には使わないようにしましょう。

【th:ifで条件によって表示を切り替える】

もうひとつよく使われるのがth:ifです。これは、条件によって表示するかどうかを切り替えるための属性です。


<p th:if="${notice != null}" th:text="${notice}">お知らせメッセージ</p>

このコードは、noticeがnullでない場合のみ、お知らせのメッセージを表示します。nullや空文字のときは何も表示されません。

このようにth:textは他の属性と組み合わせることで、より柔軟なテンプレートの制御が可能になります。

8. なぜSpring開発においてth:textを正しく理解することが重要なのか

SpringでWebアプリケーションを開発する際には、テンプレートエンジンとしてThymeleafを使うことが一般的です。その中心的な役割を果たすのがth:textです。

th:textを正しく理解して使えるようになると、次のようなメリットがあります：

Javaで作ったデータを画面にわかりやすく表示できる
テンプレートの再利用性が高まり、メンテナンスが簡単になる
自動的にエスケープ処理がされるため、セキュリティ対策も強化される
動的に変化する情報をリアルタイムに表示できる

特にth:textは、Springの@ControllerとModelオブジェクトを使ったデータ連携において欠かせない要素です。

テンプレート上でJavaコードを直接書かずに、安全かつ明確にデータを表示できることは、初心者にとっても学習しやすく、実践での応用にもつながります。

SpringのThymeleafテンプレートにおけるth:textの使い方をしっかり理解しておくことは、今後の開発をスムーズに進めるための土台になります。

<th:text>と通常のHTMLの違いを理解しよう｜Spring + Thymeleafの基本