Thymeleafにおけるテキスト出力：インライン記法と属性記法の使い分けとメリット
山崎講師こんにちは。ゆうせいです。
Thymeleafで画面に文字を表示させる際、[[${msg}]] のように記述するインライン記法と、th:text 属性を使用する属性記法のどちらを使うべきか、悩むことがあります。新人エンジニアの方が現場で迷わないよう、それぞれの特徴と推奨される選択肢を解説します。
インライン記法と属性記法の違い
まず、提示された2つの記述方法がどのような仕組みで動いているかを整理します。
- インライン記法
<p>[[${msg}]] Thank you</p>
これは、HTMLのタグの中に直接、変数を埋め込む書き方です。
- 属性記法
<p th:text="${msg} + ' Thank you'"></p>
これは、HTMLタグの属性を利用して、タグの内側のテキストをプログラムで上書きする書き方です。
高校生でもわかる比喩による解説
これら2つの違いは、家具屋さんの展示方法に例えることができます。
属性記法は、家具の棚に「見本品」というカードを置いておくようなものです。後から店員さん（プログラム）がやってきて、その見本品を「実際の商品」に並べ替えます。カードがある場所ならどこでも中身を入れ替えられるため、棚そのものの形（HTML構造）を崩さずに済みます。
一方でインライン記法は、棚の木材に直接、マジックで「ここに商品Aを置く」と書き込んでしまうようなものです。どこに何が来るかは一目でわかりますが、後から棚のレイアウトを変更したいときに、文字が邪魔をして見栄えが悪くなったり、設計図（HTMLファイル）として扱いづらくなったりします。
どちらが良いか：原則は属性記法
結論から述べると、Thymeleafの設計思想に基づけば、属性記法（th:text）を使用する方が望ましいとされています。その最大の理由は、ナチュラルテンプレートという概念にあります。
属性記法（th:text）を採用するメリット
- ナチュラルテンプレートの維持ブラウザでHTMLファイルを直接開いた際、th:textの中に記述された内容は無視され、タグの中に仮のテキストを書いておくことができます。これにより、サーバーを起動しなくても画面のデザインを確認できるため、デザイナーとエンジニアの分業が容易になります。
- 構造の明確化どのタグがどのデータによって制御されているかが属性として明示されるため、HTMLの階層構造とプログラムのロジックを切り離して管理できます。
インライン記法（[[...]]）を採用するデメリット
- デザインプレビューの破壊ブラウザで直接ファイルを開くと、[[${msg}]] という文字列がそのまま画面に表示されてしまいます。これは、完成後の画面イメージを損なう原因となります。
- XSS対策の意識Thymeleafは自動的に安全な形へ変換（エスケープ）を行いますが、インライン記法を多用すると、どこでどのデータが展開されているかの把握が難しくなり、セキュリティ上の確認漏れが発生しやすくなります。
属性記法をより簡潔に書く方法
提示された属性記法では、文字列の結合に + 記号を使用していましたが、Thymeleafにはリテラル置換という便利な書き方があります。
<p th:text="|${msg} Thank you|"></p>
このように縦棒（|）で囲むことで、+ 記号を使わずに変数と固定文字列を混在させることができます。可読性が高まるため、実務ではこの書き方が頻繁に利用されます。
まとめ
特別な理由がない限りは、属性記法（th:text）を選択してください。HTMLとしての正しさを保ちつつ、プログラムの動的な処理を組み込むことが、メンテナンス性の高いコードへの第一歩となります。
学習を深めるためのステップは以下の通りです。
- 実際にHTMLファイルをブラウザで直接開き、インライン記法と属性記法（プレビュー用テキストあり）の表示の違いを確認してください。
- リテラル置換（縦棒で囲む記法）を使い、複雑な文章の組み立てを試してください。
- ナチュラルテンプレートという言葉の意味を、Thymeleafの公式サイトで調査し、その利点について考察してください。
- プロジェクトのコーディング規約を確認し、チーム内でどちらの記法が推奨されているかを把握してください。
セイ・コンサルティング・グループでは新人エンジニア研修のアシスタント講師を募集しています。
投稿者プロフィール
