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

生徒

「Thymeleafのth:textやth:utextって何ですか？」

先生

「th:textはHTMLにテキストを表示する基本的な属性で、th:utextはHTMLタグをそのまま出力できる属性なんです。」

生徒

「なるほど、似ているけど少し違うんですね。具体的にどう使うのか知りたいです！」

先生

「よし、Thymeleafのth:textとth:utextの使い方を基本から順番に解説していこう！」

1. Thymeleafとは？

Thymeleafは、Spring Bootアプリケーションでよく使われるテンプレートエンジンです。HTMLファイルをテンプレートとして使い、動的にデータを埋め込むことができます。JavaでWebアプリを作るときに便利なツールとして、初心者にも人気があります。

2. th:textの基本的な使い方

th:textは、サーバーサイドで用意した値をHTMLに反映させるときに使います。エスケープ処理が自動で行われるため、セキュリティ面でも安心です。

例えば、以下のように書くとサーバーサイドから受け取った変数の値がブラウザに表示されます。


<span th:text="${message}">ここにメッセージが入ります</span>

もしmessageに「こんにちは、Thymeleaf！」という文字列が入っていれば、ブラウザでは以下のように表示されます。


こんにちは、Thymeleaf！

3. th:utextの基本的な使い方

次にth:utextについて説明します。これは、サーバーサイドで受け取ったHTMLタグをそのまま表示させたいときに使います。th:textと違い、HTMLタグがエスケープされずにそのまま出力されるので、動的にHTMLを埋め込みたい場合に便利です。


<div th:utext="${htmlContent}">ここにHTMLが入ります</div>

たとえばhtmlContentに「<strong>重要なお知らせ</strong>」が入っていれば、ブラウザで以下のように表示されます。


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

このように、HTMLタグがそのまま出力されるので、スタイルや装飾を動的に適用したい場合に役立ちます。

Spring FrameworkやThymeleafを使った Webアプリ開発の全体像をやさしく理解したい人には、この入門書が定番です。

Spring Framework超入門をAmazonで見る

※ Amazon広告リンク

4. th:textとth:utextの違いに注意しよう

th:textとth:utextは、どちらもサーバーサイドの値をHTMLに反映させる機能を持っていますが、出力の仕方に大きな違いがあります。th:textはエスケープ処理をするので、HTMLタグはそのままでは表示されず、文字列として出力されます。一方でth:utextは、HTMLタグがそのままブラウザで解釈されるので、見た目が変わったり装飾が適用されたりします。

そのため、th:utextを使うときは、サーバーサイドから受け取るデータが安全なHTMLであることを確認しておく必要があります。信頼できないデータをth:utextで表示すると、クロスサイトスクリプティング（XSS）攻撃のリスクがあります。

5. 実際のサンプルコード

それでは、th:textとth:utextの両方を使ったサンプルコードを見てみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf サンプル</title>
</head>
<body>
    <h1>Thymeleafの基本構文サンプル</h1>
    <p th:text="${plainText}">ここにテキストが入ります</p>
    <p th:utext="${htmlText}">ここにHTMLが入ります</p>
</body>
</html>

サーバーサイドで以下のように値を設定した場合の表示結果を見てみましょう。


plainText = "こんにちは、Thymeleaf！"
htmlText = "<em>強調表示されたメッセージ</em>"

ブラウザ上では以下のように表示されます。


こんにちは、Thymeleaf！
<em>強調表示されたメッセージ</em>

6. ポイント整理

ここまで、th:textとth:utextの基本的な使い方を紹介しました。初心者でも理解しやすいようにポイントをまとめておきます。

th:textはテキストをHTMLに安全に表示する属性。
th:utextはHTMLタグをそのまま出力する属性。
どちらもサーバーサイドの値をHTMLに埋め込むときに便利。
th:utextはXSSリスクがあるので、信頼できるデータにだけ使おう。

Thymeleafを使うときには、常に「どんなデータを表示しようとしているか」を意識して、適切な属性を選んで使うようにしましょう。

まとめ

Thymeleafの基本構文を振り返ろう

この記事では、Spring Bootと組み合わせてよく利用されるテンプレートエンジンであるThymeleafについて、特に基本構文であるth:textとth:utextの使い方を中心に解説してきました。 ThymeleafはHTMLをそのままテンプレートとして扱えるため、Webアプリケーション開発において非常に扱いやすく、 Java初心者から実務経験者まで幅広く利用されています。

th:textは、サーバーサイドで用意したデータを安全にHTMLへ表示するための基本的な属性です。 HTMLタグを自動的にエスケープしてくれるため、意図しないタグの実行や画面崩れを防ぐことができ、ユーザー名やメッセージ、説明文など、通常のテキスト表示に最適です。多くのThymeleafテンプレートでは、このth:textが最も頻繁に使われる構文と言えるでしょう。

一方でth:utextは、HTMLタグを含んだ文字列をそのまま画面に反映させたい場合に利用します。 strongタグやemタグなどを動的に出力したい場合には非常に便利ですが、エスケープ処理が行われないため、使用するデータの安全性を十分に確認する必要があります。特に外部入力をそのまま表示する場合には注意が必要であり、用途を限定して使うことが重要なポイントになります。

th:textとth:utextを使い分ける考え方

Thymeleafを使った画面開発では、「表示する内容が単なる文字列なのか、それともHTMLとして解釈したいのか」という視点でth:textとth:utextを使い分けることが大切です。基本的にはth:textを選択し、どうしてもHTMLとして表示する必要がある場合のみth:utextを使用する、という考え方を身につけることで、安全で保守性の高いテンプレートを作成できます。

また、ThymeleafはHTMLファイルとしてそのままブラウザで開いても破綻しにくい構造になっているため、デザイン確認やレイアウト調整がしやすい点も特徴です。 th:textやth:utextといった基本構文を正しく理解することで、 Spring Bootと連携したWebアプリケーション開発の基礎がしっかり固まります。

基本構文を確認するサンプル

ここで、記事内容を踏まえたシンプルなサンプルをもう一度確認してみましょう。テキスト表示とHTML表示の違いを意識しながら読み返すことで、 th:textとth:utextの役割がより明確になります。


<p th:text="${message}">テキスト表示</p>
<p th:utext="${htmlMessage}">HTML表示</p>

このように、同じ変数出力でも属性を切り替えるだけで表示結果が大きく変わります。実際の開発では、画面設計やセキュリティを意識しながら、適切な属性を選択することが重要になります。

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

生徒

「th:textとth:utextの違いが、ようやくはっきり分かりました。普段はth:textを使って、必要なときだけth:utextを使えばいいんですね。」

先生

「その理解で大丈夫だよ。まずは安全な表示を優先して、 th:textを基本に考えるのがThymeleafではとても大切なんだ。」

生徒

「HTMLタグをそのまま表示できるのは便利ですが、データの中身を意識しないと危ないことも分かりました。」

先生

「そうだね。th:utextは強力だけど慎重に使う必要がある。その判断ができるようになると、Webアプリケーション開発の理解が一段深まるよ。」

生徒

「まずは基本構文をしっかり身につけて、 Thymeleafで画面を作ることに慣れていきたいです。」

先生

「それが一番の近道だね。 th:textとth:utextを正しく使えるようになれば、 Spring BootとThymeleafを使った開発がぐっと楽しくなるよ。」

Thymeleafの基本構文（th:text, th:utext）の使い方を徹底解説！