【徹底比較】Thymeleafの th:text と [[ ]] の違いとは？メリット・デメリットを解説！
山崎講師こんにちは。ゆうせいです。
ThymeleafはSpring Bootのテンプレートエンジンとして広く使われていますが、変数をHTMLに展開するときに th:text を使う方法 と [[ ]] を使う方法 があります。
「どっちを使えばいいの？」
「メリット・デメリットはあるの？」
そんな疑問を持っている方のために、両者の違いをわかりやすく解説していきます！
th:text と [[ ]] の基本
まず、それぞれの基本的な使い方を見てみましょう。
th:text の使い方
Thymeleafでは、th:text を使うと、指定した変数の値を HTMLのテキストノード に置き換えることができます。
<p th:text="${message}">このテキストは置き換えられます</p>
もし、message に "こんにちは！" がセットされていれば、出力されるHTMLは以下のようになります。
<p>こんにちは！</p>
[[ ]] の使い方
[[ ]] を使うと、Thymeleafの 式評価 により変数を展開できます。
<p>[[${message}]]</p>
これも、message に "こんにちは！" がセットされていれば、出力結果は同じになります。
<p>こんにちは！</p>
「じゃあ、どっちを使っても同じじゃない？」と思うかもしれませんが、実は それぞれにメリット・デメリットがある んです。
th:text のメリット・デメリット
✅ メリット
- セキュリティ（XSS対策）が自動で適用される
th:textを使うと、変数の値が HTMLエスケープ されます。
例えば、messageに"<script>alert('XSS!');</script>"のような危険な値が入っていたとしても、自動的にエスケープされ、画面上ではそのまま表示されます。<p><script>alert('XSS!');</script></p>これにより、XSS（クロスサイトスクリプティング）攻撃を防ぐことができます。 - 明示的にHTML要素にバインドできる
th:textは、HTML要素のtextContentを置き換えるので、余計なHTMLタグを壊す心配がありません。 - 動的なUIを作る際の一貫性がある
th:textを使うと、他のThymeleafの属性（th:hrefやth:valueなど）と統一したコードを書きやすくなります。
❌ デメリット
- HTMLの見た目がわかりにくくなる
th:textを使うと、HTMLファイルを開いたときにプレーンテキストが見えないため、 静的なデザインが確認しにくい という欠点があります。 - 文字列の途中に変数を埋め込むのが面倒
th:textは HTMLのテキスト全体を置き換える ので、次のように文章の一部に変数を入れるのは難しいです。<p th:text="'こんにちは、' + ${username} + 'さん！'"></p>+を使って文字列を結合する必要があり、やや冗長になります。
[[ ]] のメリット・デメリット
✅ メリット
- HTMLが見やすい
[[ ]]はそのままHTMLの中に埋め込めるので、テンプレートの見た目が崩れず、デザイナーとエンジニアの協力がしやすいです。<p>こんにちは、[[${username}]] さん！</p>こうして書けば、usernameの部分だけが動的に変わるので、 静的なHTMLを確認しながら開発が可能 になります。 - 文字列の途中に変数を埋め込みやすい
例えば、次のように簡単に変数を埋め込むことができます。<p>今日は [[${date}]] です。</p>これはth:textより 直感的に書ける ので、可読性が向上します。 - 手軽に使える
th:textは要素全体を書き換えますが、[[ ]]は 簡単に部分的なテキストを埋め込める ため、シンプルな記述が可能です。
❌ デメリット
- XSS対策が適用されない
[[ ]]は そのままHTMLとして評価される ため、変数に<script>タグなどの危険なコードが含まれていると、意図せず実行される可能性があります。<p>[[${message}]]</p>messageに"<script>alert('XSS!');</script>"が入っていた場合、そのまま実行されてしまう危険があります。 - タグの中では使えない
[[ ]]は HTMLのテキスト部分にのみ適用できる ため、以下のようなvalue属性の中などでは使えません。<input value="[[${username}]]">これは動作せず、代わりにth:value="${username}"を使う必要があります。
どっちを使うべき？おすすめの使い分け
| 使い方 | th:text | [[ ]] |
|---|---|---|
| セキュリティ（XSS対策） | ✅ 自動で適用 | ❌ 自分でエスケープする必要あり |
| HTMLの見やすさ | ❌ わかりにくい | ✅ そのまま見える |
| 変数の埋め込みやすさ | ❌ 文字列結合が必要 | ✅ 直感的に書ける |
| HTML属性内での使用 | ✅ 使える | ❌ 使えない |
✅ th:text を使うべき場面
- XSS対策が必要な場合
- HTML要素全体を動的に変更したい場合
- 他のThymeleaf属性と統一したい場合
✅ [[ ]] を使うべき場面
- 文章の途中に変数を埋め込みたい場合
- テンプレートの見た目を崩さずに開発したい場合
- 短いテキストを簡単に埋め込みたい場合
まとめ
Thymeleafの th:text と [[ ]] は、どちらも変数展開に使えますが、 セキュリティ・見やすさ・使いやすさ の観点で違いがあります。
✅ セキュリティが重要なら th:text
✅ HTMLをわかりやすく保ちたいなら [[ ]]
場面によって使い分けることで、より安全でメンテナンスしやすいテンプレートを作ることができます！
ぜひ、実際のプロジェクトで試してみてくださいね。
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
