Thymeleafのth:utextを初心者向けに完全ガイド！動的なHTML表示を徹底解説
生徒
「ThymeleafでHTMLタグを動的に表示する方法が知りたいです！」
先生
「Thymeleafにはth:utextという属性があり、HTMLエスケープを無効にしてタグをそのまま反映させることができます。」
生徒
「th:textとの違いは何でしょうか？」
先生
「th:textは自動的にエスケープ処理を行うのに対し、th:utextはエスケープを行わず、HTMLのタグもそのまま適用されます。」
1. th:utextとは？
th:utextは、Thymeleafで「サーバー側から渡されたHTMLを、そのまま画面に反映したい」ときに使うための属性です。ふつうはth:textを使うと、HTMLの特殊文字（例えば<や>）は自動的にエスケープされ、タグではなく文字として表示されます。そのため、「<strong>太字</strong>」という文字列は、そのまま文字列として画面に出てきます。
一方で、th:utextを使うと、このエスケープ処理を行わず、「<strong>太字</strong>」という文字列を本物のHTMLタグとして解釈し、太字で表示してくれます。テンプレートエンジンであるThymeleafに、「これはただの文字じゃなくて、HTMLとして扱ってね」と指示するイメージです。まずは、ごく簡単なサンプルで違いを見てみましょう。
<p th:text="${message}">通常テキスト</p>
<p th:utext="${message}">HTMLとして表示</p>
ここで、コントローラーからmessageに"こんにちは<strong>Thymeleaf</strong>の世界！"という文字列を渡したとします。th:textの方は「こんにちは<strong>Thymeleaf</strong>の世界！」という記号つきの文字列がそのまま見えますが、th:utextの方はThymeleafの部分だけが太字になって表示されます。このように、同じデータでも、属性を変えるだけで「ただのテキスト」として見せるのか、「HTMLタグを含んだリッチな表示」として見せるのかを切り替えられるのが、th:utextの基本的な役割です。
2. th:utextの基本的な使い方
ここでは、th:utextが実際にどのように使われるのかを、初心者でも分かる形で見ていきます。ポイントは「サーバーから渡したHTMLタグをそのまま反映できる」という点です。まずは、ごくシンプルな例から確認してみましょう。
@Controller
public class SampleController {
@GetMapping("/sample")
public String showSample(Model model) {
model.addAttribute("message", "ようこそ、<strong>Thymeleaf</strong>の世界へ！");
return "sample";
}
}
上のコードでは、messageにHTMLタグ入りの文字列をセットしています。本来、タグはそのままだと「ただの文字」として表示されてしまいますが、th:utextを使うとHTMLとして解釈されます。
<span th:utext="${message}">デフォルトメッセージ</span>
この書き方をすると、<strong>で囲まれた部分が実際に太字で表示されます。HTMLをそのまま反映できるため、強調表示や段落タグなど、ちょっとした装飾を動的に加えたいときに便利です。仕組み自体はシンプルですが、画面の見せ方に柔軟性を持たせられるため、初心者の方でもすぐに活用しやすい機能です。
3. th:utextのエスケープ処理と注意点
th:utextはエスケープ処理を無効化してHTMLタグをそのまま適用しますが、使い方には注意が必要です。ユーザーが入力したデータをth:utextで表示する際は、XSS（クロスサイトスクリプティング）などのセキュリティリスクがあるため、信頼できるデータのみを表示するようにしましょう。
4. th:utextとth:textの違い
th:utextとth:textの違いは、エスケープ処理が行われるかどうかです。th:textはデフォルトでエスケープされるため、ユーザー入力を表示する際に安全です。一方、th:utextはエスケープされないため、HTMLタグをそのままレンダリングしたい場面で使います。以下に、th:utextとth:textを使い分けた例を示します。
<p th:text="${textMessage}">通常のメッセージ</p>
<p th:utext="${htmlMessage}">HTMLメッセージ</p>
このコードでは、textMessageはテキストのみをエスケープして表示し、htmlMessageはHTMLとしてそのまま表示します。
5. 実際にth:utextを使ってみよう
次に、th:utextを使った実際の画面表示の例を見てみましょう。以下のコードで、th:utextを使ってHTMLタグ付きのメッセージを動的に表示するページを作成します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf th:utext Example</title>
</head>
<body>
<h1 th:utext="${welcomeMessage}">Welcome!</h1>
</body>
</html>
Java側でHTML付きのwelcomeMessageを渡すと、エスケープ処理されずにそのまま表示されます。
6. th:utextを使う場面の例
例えば、管理者が登録したお知らせや製品情報など、信頼できるHTMLを表示する場合にth:utextを利用できます。ユーザーの入力をth:utextで表示することは避け、信頼できるデータを表示する用途に限定しましょう。
7. th:utextを使ったサンプルコード
以下に、th:utextを使って動的にHTMLを表示するサンプルコードを示します。
@Controller
public class ExampleController {
@GetMapping("/example")
public String examplePage(Model model) {
model.addAttribute("htmlContent", "<strong>Welcome to the Site!</strong>");
return "example";
}
}
上記のコードに対応するHTMLファイルの内容は次の通りです。
<p th:utext="${htmlContent}">デフォルトメッセージ</p>
ここでは、htmlContentに含まれる<strong>タグが反映され、文字が太字で表示されます。
8. まとめ
本記事では、Thymeleafのth:utextの使用方法、th:textとの違い、セキュリティの注意点、そして実際の使用例について詳細に解説しました。th:utextは動的なHTMLコンテンツをエスケープせずに表示するため、タグ付きのメッセージをそのまま画面に反映できます。この機能は、例えば管理者が作成したお知らせやHTML構造を含むメッセージの表示に非常に役立ちます。しかし、ユーザー入力を表示する場合には、必ずth:textを用いてエスケープ処理を行うことが重要です。
では、次のようなth:utextを活用した実装例を確認してみましょう。この記事で紹介した基本例に基づいて、Javaのコントローラーから渡されるHTMLコンテンツを動的に反映させる方法を再度まとめます。
@Controller
public class AnnouncementController {
@GetMapping("/announcement")
public String showAnnouncement(Model model) {
model.addAttribute("htmlMessage", "<p>最新情報: <strong>新しい製品をリリースしました！</strong></p>");
return "announcement";
}
}
対応するHTML側のコードです。th:utextを使うことで、HTMLタグをエスケープせずに表示することができます。
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:utext="${htmlMessage}">デフォルトメッセージ</div>
</body>
</html>
このコードの実行結果として、「最新情報: 新しい製品をリリースしました！」という太字のメッセージが表示されます。th:utextを使用することで、HTML構造がそのまま適用され、デザイン性を高めた表示が可能になります。
生徒
「先生、th:utextとth:textの使い分けがしっかり理解できました！動的なHTML表示でth:utextが便利ですが、セキュリティ面でも気をつけなければならないんですね。」
先生
「その通りです。th:utextは非常に強力ですが、信頼できるデータだけに使用することが大切です。th:textでエスケープ処理をすることで、ユーザー入力において安全性が確保されます。」
生徒
「なるほど、th:utextは管理者が設定したHTMLメッセージや、動的なコンテンツの表示に役立ちますね。」
先生
「その通り。例えば、商品説明やお知らせのような信頼できるコンテンツにはth:utextが適しています。ユーザー入力を表示する際には、th:textを使って安全性を確保しましょう。」
生徒
「ありがとうございました！この記事でth:utextを使った動的HTML表示についてしっかり学べました！」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Thymeleafのth:utextとth:textの違いは何ですか？
Thymeleafのth:textはエスケープ処理を行いHTMLタグをそのまま表示しませんが、th:utextはエスケープ処理をせずにHTMLタグをそのままレンダリングします。
th:utextを使う際に注意すべきことは何ですか？
th:utextを使う場合、XSS（クロスサイトスクリプティング）のリスクがあるため、信頼できるデータのみを表示するようにしてください。ユーザーが入力したデータには使用を避け、必ず安全なデータをレンダリングしましょう。
動的なHTMLコンテンツを表示する場面でth:utextはどう役立ちますか？
管理者が登録したお知らせや、動的に生成されるHTMLコンテンツを表示する際に役立ちます。HTMLタグを含むコンテンツをそのまま適用することで、視覚的にリッチな表現が可能です。
HTMLフォームから送信されたデータにth:utextを使っても安全ですか？
HTMLフォームから送信されたデータを直接th:utextで表示するのは推奨されません。XSS攻撃を防ぐために、th:textを使用してエスケープ処理を行うことが安全です。
th:utextの基本的な使い方を教えてください。
JavaのコントローラーでHTMLを含む文字列をモデルに渡し、Thymeleafテンプレート内でth:utextを使用してその文字列をレンダリングします。
th:utextを使うときにバインドするデータを動的に生成する方法はありますか？
JavaのコントローラーでHTMLを含む文字列を動的に生成し、モデルに追加します。そのモデルデータをth:utextにバインドしてHTMLを表示できます。
th:utextを使うべき場面と使うべきでない場面を教えてください。
信頼できるデータを表示する場合にはth:utextを使用します。一方、ユーザーからの入力や外部から取得した未検証のデータにはth:utextを使用せず、th:textを使用してください。
th:utextを使ったサンプルコードを簡単に教えてください。
以下は簡単な例です。<p th:utext="${htmlContent}"></p>と記述することで、htmlContentに設定したHTML構造をそのまま表示できます。
th:utextと同じようなHTMLレンダリング機能を持つ他のテンプレートエンジンはありますか？
他のテンプレートエンジンでも似たような機能があります。例えば、JSPのタグにescapeXml="false"を指定することで、エスケープ処理を無効にしてHTMLをレンダリングすることができます。
セキュリティを保ちながら動的なHTMLを表示するためのベストプラクティスは何ですか？
動的なHTMLを表示する場合、信頼できるデータのみをレンダリングし、ユーザーが入力したデータは必ずエスケープ処理を行うべきです。また、可能であれば、サーバーサイドでデータを検証して安全性を確保してください。
職業訓練講師が直伝！Thymeleaf実践。Spring Bootと連携する「保守性・UX最大化」の画面構築術。
累計120万PV超の技術メディア運営チームが贈る、商用開発基準の特別カリキュラム
職業訓練講師が直伝！Thymeleaf実践。Spring Bootと連携する「保守性・UX最大化」の画面構築術。
Spring Boot標準のテンプレートエンジンとして、Java開発の現場で不可欠なThymeleaf。本講座では、HTMLの構造を維持する「ナチュラルテンプレート」の利点を活かし、Controllerとのセキュアなデータ連携や、コンポーネント化による圧倒的な保守性を60分で濃縮習得します。
60分集中ワークショップ内容
【つくるもの】
Spring Boot 3.xと連動した「実務型ダッシュボード画面」を構築。フォームバリデーション連携、フラグメント（共通部品）化、ユーティリティオブジェクトによる高度なフォーマット処理など、現場で即戦力として評価される実装コードを組み上げます。
【開発環境】
Spring Boot 3.x / DevTools環境を使用。「LiveReload」による高速開発セットアップや、Thymeleaf特有のデバッグ技法など、実務10年PLが実践する「開発ストレスをゼロにする」プロの知恵を伝授します。
この60分で得られる3つの革新スキル
classの動的切り替えやリンク生成（@{}）を自在に操り、ロジックとデザインを美しく分離します。
th:replace / th:insert を駆使し、修正に強いスケーラブルなUIコンポーネント設計を学びます。
ログインユーザーの権限に応じたボタンや項目の制御など、実務で必須のセキュリティ連携を習得します。
※本講座は、Spring Bootの基本を知り、さらに「表現力豊かな商用UI」を作りたい方向けの「フルスタックUI実装講座」です。フロントとバックを繋ぐ橋渡し役として、市場価値を高めたい方を職業訓練講師が全力でバックアップします。
20名規模のプロジェクトリーダー（PL）が、トラブルを防ぐ実装ノウハウを直接伝授します。
