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

新人

「Webページに動的コンテンツを表示したいのですが、どうすれば良いですか？」

先輩

「Thymeleafを使うと、HTMLテンプレートに動的コンテンツを簡単に埋め込めるよ。」

新人

「具体的にはどんな方法がありますか？」

先輩

「よく使うのはth:textとth:utextだね。それぞれの違いを詳しく説明しよう！」

1. 動的コンテンツとは？

Webアプリケーションでは、ユーザーの入力やサーバーからのデータをもとに、表示内容を変える必要があります。このように、内容が固定ではなく状況によって変わるデータを動的コンテンツと呼びます。例えば、ログインしたユーザー名や最新ニュース記事の一覧などが該当します。

2. Thymeleafとは？

Thymeleaf（タイムリーフ）は、Javaアプリケーションでよく使われるテンプレートエンジンです。HTMLファイル内に特別な属性を追加することで、サーバーから受け取ったデータを簡単に表示できます。Spring Bootと組み合わせて使うことで、HTMLのテンプレートとして非常に強力なツールになります。

今回の記事では、Thymeleafで頻繁に使われるth:textとth:utextについて詳しく解説します。

3. th:utext と th:text の基本的な違い

th:textとth:utextは、どちらもThymeleafで動的コンテンツを表示するための属性ですが、HTMLの扱い方に違いがあります。

th:text：HTMLタグを無害化して表示（タグはそのままテキストとして出力）
th:utext：HTMLタグをそのまま有効にして表示（タグがHTMLとしてレンダリングされる）

それでは、具体的なコード例を見ていきましょう。

th:textの例


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>th:textの例</title>
</head>
<body>
    <p th:text="'<strong>これはテキストです</strong>'">プレースホルダー</p>
</body>
</html>

上記のコードを実行すると、ブラウザには以下のように表示されます。


<strong>これはテキストです</strong>

ポイント：th:textはHTMLタグを無効化するため、タグがそのまま表示されます。

th:utextの例


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>th:utextの例</title>
</head>
<body>
    <p th:utext="'<strong>これは太字のテキストです</strong>'">プレースホルダー</p>
</body>
</html>

実行結果は以下の通りです。


これは太字のテキストです

ポイント：th:utextはHTMLタグを有効にするため、テキストが太字で表示されます。

th:text と th:utext の使い分け

どちらを使うべきか迷うかもしれませんが、以下のように使い分けましょう。

th:text：ユーザーからの入力など、信頼できないデータを表示するとき（XSS対策になる）
th:utext：安全が確認されたHTMLデータを表示するとき

特に、外部から受け取ったHTMLをそのままth:utextで表示すると、危険なスクリプトが実行されるリスクがあるため注意が必要です。

4. th:text の使い方と実例

th:textは、ユーザーからの入力や外部から取得したデータをHTMLに埋め込む際に、安全に表示するために使われます。この属性はHTMLタグを無効化して、タグそのものをテキストとして表示するため、クロスサイトスクリプティング（XSS）などの攻撃を防ぐことができます。

例えば、次のようにコントローラからデータを渡し、テンプレートで表示します。

コントローラのコード例


@Controller
public class TextController {

    @GetMapping("/text-example")
    public String showTextExample(Model model) {
        String unsafeContent = "<strong>これはテキストです</strong>";
        model.addAttribute("content", unsafeContent);
        return "textExample";
    }
}

HTMLテンプレート（textExample.html）のコード例


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>th:textの使い方</title>
</head>
<body>
    <h1>th:text の実例</h1>
    <p th:text="${content}">ここに内容が表示されます</p>
</body>
</html>

このコードを実行すると、ブラウザには以下のように表示されます。


<strong>これはテキストです</strong>

ポイント：タグがそのまま表示され、HTMLとして解釈されません。これにより、ユーザーが悪意あるコードを入力しても安全に表示できます。

5. th:utext の使い方と実例

th:utextは、HTMLコンテンツをそのまま有効化して表示したいときに使います。例えば、記事の本文やHTMLで装飾された文字列を動的に埋め込みたい場合に便利です。ただし、外部からのデータをそのまま表示する場合はXSSのリスクがあるため、十分にデータの安全性を確認してください。

コントローラのコード例


@Controller
public class UtextController {

    @GetMapping("/utext-example")
    public String showUtextExample(Model model) {
        String safeHtmlContent = "<em>これは斜体のテキストです</em>";
        model.addAttribute("htmlContent", safeHtmlContent);
        return "utextExample";
    }
}

HTMLテンプレート（utextExample.html）のコード例


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>th:utextの使い方</title>
</head>
<body>
    <h1>th:utext の実例</h1>
    <p th:utext="${htmlContent}">ここにHTMLが表示されます</p>
</body>
</html>

実行結果は以下の通りです。


これは斜体のテキストです

ポイント：HTMLタグが有効になり、テキストが斜体で表示されます。表示するHTMLが信頼できる場合にのみ使用してください。

6. th:text と th:utext の使い分け方

th:textとth:utextをどのように使い分ければよいかは、表示するデータの安全性と用途によって異なります。

th:textを使うべきケース

ユーザーが入力したコメントやレビューを表示するとき
外部APIや外部システムから取得したデータを表示するとき
セキュリティを最優先に考慮する必要があるとき

th:utextを使うべきケース

管理者が入力した安全なHTMLコンテンツを表示したいとき
記事本文や装飾が必要なテキストをそのまま表示したいとき
内部で生成されたHTMLが信頼できる場合

注意：th:utextを使用する際は、外部からのデータを必ずサニタイズするか、信頼できるデータのみを使用してください。誤って悪意あるコードが挿入されると、XSS攻撃の原因になります。

7. th:text と th:utext を使用する際の注意点

Thymeleafで動的コンテンツを埋め込む際に、th:textとth:utextを使い分けることは重要ですが、それぞれを使用する際にいくつかの注意点があります。

th:text を使うときの注意点

HTMLタグが表示されることを理解する：HTMLタグをそのまま表示したい場合には適しません。
信頼できないデータには積極的に使用：ユーザーが入力したデータや外部APIからのデータに使うと、XSS攻撃の防止に役立ちます。

th:utext を使うときの注意点

XSS対策を忘れずに：信頼できないデータをそのまま表示すると危険です。
信頼できるHTMLコンテンツのみ表示：管理者入力や事前にサニタイズ済みのデータに使用しましょう。
ユーザーからの直接入力は避ける：悪意のあるコードが実行される可能性があります。

セキュリティを確保するため、th:utextを使用する場合は、必ずデータの安全性を確認してください。

8. 実践！簡単なWebアプリケーションに動的コンテンツを埋め込んでみよう

それでは、実際にThymeleafを使った簡単なWebアプリケーションを作成して、th:textとth:utextの使い方を実践してみましょう。

プロジェクト作成と設定

pleiadesを使って新しいSpring Bootプロジェクトを作成し、依存関係としてSpring WebとThymeleafを追加します。ビルドツールはGradleを選択してください。

ステップ1: コントローラの作成

新しいコントローラを作成し、動的コンテンツを表示するエンドポイントを用意します。


@Controller
public class DemoController {

    @GetMapping("/demo")
    public String showDemo(Model model) {
        String safeText = "<strong>これは安全なテキストです</strong>";
        String htmlContent = "<em>これはHTMLが有効なテキストです</em>";

        model.addAttribute("safeText", safeText);
        model.addAttribute("htmlContent", htmlContent);

        return "demo";
    }
}

ステップ2: HTMLテンプレートの作成

次に、resources/templates/demo.htmlに以下のHTMLコードを作成します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>動的コンテンツの実践</title>
</head>
<body>
    <h1>動的コンテンツの実践</h1>

    <h2>th:textの使用例</h2>
    <p th:text="${safeText}">ここにテキストが表示されます</p>

    <h2>th:utextの使用例</h2>
    <p th:utext="${htmlContent}">ここにHTMLが表示されます</p>
</body>
</html>

ステップ3: 実行結果

アプリケーションを起動し、ブラウザでhttp://localhost:8080/demoにアクセスすると、以下のように表示されます。

th:textの結果


<strong>これは安全なテキストです</strong>

th:utextの結果


これはHTMLが有効なテキストです

ポイント：th:textはタグをエスケープして表示し、th:utextはHTMLとして解釈して表示します。

9. th:utext と th:text のポイント復習

この記事では、Thymeleafを使った動的コンテンツの埋め込み方法について詳しく解説しました。th:textとth:utextはどちらも便利ですが、使用目的とデータの信頼性に応じて使い分けることが重要です。

重要なポイントの振り返り

th:textはHTMLタグをエスケープして安全に表示します。外部からのデータやユーザー入力にはこちらを使用。
th:utextはHTMLタグを有効化します。装飾付きのテキストを表示する際に便利ですが、信頼できるデータのみ使用。
セキュリティの観点から、th:utextの使用時は必ずデータの安全性を確認しましょう。
簡単なWebアプリケーションで実践し、挙動の違いを確認することが理解を深める近道です。

今回の内容を理解することで、動的コンテンツの安全な埋め込み方法が身につき、Webアプリケーション開発においてより実践的なスキルが習得できます。次回は、より高度なThymeleafの機能についても解説予定です！

まとめ

動的コンテンツの基礎とThymeleaf活用の重要性

この記事で扱った動的コンテンツの表示方法は、Webアプリケーション開発で欠かせない基本要素です。とくに、ユーザーごとに異なる情報を正しく表示する処理や、データベースから取得した値を画面に反映する仕組みは、どの開発現場でも重要視されます。JavaとSpring Bootを用いた開発では、その動的表示を実現するためにThymeleafが非常に便利な役割を担っています。今回紹介したth:textとth:utextは、Thymeleafの基礎として最初に覚えておくべき中核的な機能であり、用途に応じて適切に選択することで、より安全で見やすいWebページを作成できます。

とくに、ユーザー入力を画面に表示する場合や外部データを扱う場合には、XSS対策としてHTMLタグを無害化してくれるth:textが重要な役割を果たします。一方で、管理者向けの画面やデザイン付きのニュース記事など、信頼できるHTMLデータをそのまま表示したい場面ではth:utextが便利です。このように二つの属性の違いを把握して活用することで、表示内容を意図した通りにコントロールできます。

動的コンテンツ表示の具体例を振り返る

実際のコード例を通して、同じHTMLタグを扱っても、th:textではタグが文字列として表示され、th:utextではタグが有効化されるという違いを確認しました。これらの挙動は、Webページの安全性やレイアウトに大きな影響を与えるため、適切な選択が求められます。以下に、記事で扱った内容を踏まえたサンプルを再掲します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>まとめのサンプル</title>
</head>
<body>
    <p th:text="'&lt;em&gt;保護された強調テキスト&lt;/em&gt;'">プレースホルダー１</p>
    <p th:utext="'&lt;em&gt;装飾された強調テキスト&lt;/em&gt;'">プレースホルダー２</p>
</body>
</html>

上記の例では、一つ目の行がタグを文字としてそのまま表示し、二つ目の行はタグを有効にして実際に装飾が反映されます。Thymeleafを使いこなすためには、この動作の違いを深く理解しておくことが非常に大切です。とくに、Spring Bootと組み合わせた開発では、テンプレート内で扱うデータの性質を見極めながら適切な属性を選択することが、正確で安全なWebページ作成につながります。

th:text と th:utext を正しく使うためのポイント

開発現場では、ユーザーが入力したコメント、投稿内容、フォーム値などを画面に戻すことがよくあります。その際、信頼できないデータをth:utextで描画すると、意図しないスクリプトが実行されてしまう危険性が生じます。そのため、そのようなデータは必ずth:textを用いて安全に表示することが推奨されます。一方、管理側で用意した静的なHTMLコンテンツや、サーバーで生成された安全なマークアップを表示する場合は、th:utextを使用することで見栄えを崩さずに動的な表現を実現できます。

また、Spring BootとThymeleafを組み合わせることで、View層のテンプレート管理がより直感的に行えるため、画面とロジックの切り分けがしやすくなります。これは大規模なアプリケーションでも有効で、保守性や再利用性の向上にもつながります。テンプレートに記述される表示ロジックは明確で、Thymeleafの構文に慣れることで開発スピードも大きく向上します。

Thymeleaf活用の次のステップ

今回学んだth:textとth:utextの理解は、Thymeleafの第一歩です。今後は、条件分岐を扱うth:if、繰り返しを扱うth:each、値の加工を行うユーティリティオブジェクトなども順に学んでいくと、より高度な画面処理が可能になります。動的コンテンツを自由自在に表現できるようになることで、ユーザーの行動に応じたページ生成や、商品一覧、コメントリスト、動的なレイアウトの変更など、幅広い開発に対応できるようになります。

また、セキュリティを考慮しながら表示内容を制御する力も磨かれ、実務で強い開発者へ成長できます。画面表示は一見すると簡単に思えますが、その裏には安全性や利便性を両立させるための多くの工夫があります。今回の基礎を大切にしつつ、これからの学習でもThymeleafの魅力をさらに深めていきましょう。

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

生徒：「th:text と th:utext の違いがよくわかりました。データの信頼性によって使い分けることが大切なんですね。」

先生：「その通りだよ。安全に表示するなら th:text、装飾を含んだHTMLを描画したいなら th:utext を使う、と覚えておくと良いね。」

生徒：「テンプレートの扱い方がわかると、画面作りが一気に楽しくなりそうです！」

先生：「Thymeleafは慣れるととても強力だから、次は条件分岐やループ処理にも挑戦してみるといいよ。」

生徒：「もっと色々な表現方法を試して、動的なページを作れるようになりたいです！」

先生：「その意欲が大事だね。今日身につけたことが次のステップにしっかりつながっていくよ。」