Thymeleafのth:withの使い方を完全ガイド！初心者でもわかる一時変数の利用方法

Thymeleafのth:with

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

生徒

「Thymeleafで一時的に変数を使いたい場合ってどうすればいいですか？」

先生

「Thymeleafではth:withという属性を使うことで、一時的に変数を作成して使用することができますよ。」

生徒

「一時変数を使うとどんな場面で便利ですか？」

先生

「例えば、複数回使用する値を計算して変数に保存しておけば、テンプレート内で簡単に再利用できます。それでは、具体的な例を見ていきましょう！」

1. th:withとは？

「1. th:withとは？」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

1. th:withとは？

th:withは、Thymeleafテンプレートで「その場だけ使う一時変数」を定義するための属性です。 HTMLタグに付けるだけで値を計算・保持でき、同じブロック（タグとその子要素）内で再利用できます。 Spring Boot＋Thymeleafの画面で、同じ式を何度も書く手間を減らし、テンプレートの可読性と保守性をぐっと高めます。

▼ まずは超シンプルな例（文字を一時保存）


<div th:with="greet='こんにちは、Thymeleaf！'">
  <p th:text="${greet}"></p>
  <small>上と同じあいさつをここでも使えます：<span th:text="${greet}"></span></small>
</div>

ここではgreetという一時変数を作り、同じブロック内の複数箇所で再利用しています。値はタグの外には漏れません。計算結果やテキストをまとめておけるので、重複を避けたいときに便利です。

例えば、税込み価格や表示用の文字列を一度だけ作って何度も参照したい場面、ヘッダーやカード内で共通の値を使い回したい場面に最適です。「テンプレートで軽い加工をして、画面内で繰り返し使う」という用途に強く、Thymeleafのth:textやth:ifなど他の属性とも自然に組み合わせられます。まずは上のような短い文字列から試し、ブロック内限定で効く「スコープ」の感覚に慣れていきましょう。

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

th:withは「このタグ配下でだけ使える一時変数」を定義します。書き方はキー=値のペアをカンマでつなぐだけ。同じ計算式を何度も書かなくてよくなるため、テンプレートがすっきり読みやすくなります。まずは合計金額の計算から見てみましょう。

▼ 合計を一度だけ計算して使い回す


<div class="card" th:with="total=${price * quantity}">
  <p>商品の価格: <span th:text="${price}"></span>円</p>
  <p>購入数: <span th:text="${quantity}"></span></p>
  <p>合計金額: <span th:text="${total}"></span>円</p>
  <small class="text-muted">上のブロック内ならどこでも<code>${total}</code>を再利用できます。</small>
</div>

ここで作ったtotalは、このdivの中だけで有効です。タグの外へは出ないので、同名の変数が他所にあっても干渉しません。スコープが明確になるのが安心ポイントです。

▼ 文字列の組み立ても一時変数で簡単に


<section th:with="label=${userName} + ' さんのカート'">
  <h3 th:text="${label}"></h3>
  <p>合計は上の例の <code>total</code> のように別途計算して表示できます。</p>
</section>

表示用の文言を一度だけ作っておけば、見出しや説明に同じテキストを繰り返し差し込めます。細かな文言調整が必要なときにも、更新箇所を最小限にできます。

▼ 複数の一時変数を並べて定義する（入門）


<div th:with="subtotal=${price * quantity}, tax=${subtotal * 0.1}">
  <p>小計: <span th:text="${subtotal}"></span>円</p>
  <p>消費税: <span th:text="${tax}"></span>円</p>
  <p>支払合計: <span th:text="${subtotal + tax}"></span>円</p>
</div>

カンマ区切りで複数定義できます。前で作った変数（ここではsubtotal）を次の式（tax）で参照できるため、計算の手順をテンプレートにそのまま素直に表現できます。

使い方のコツは「ブロックの入り口で一度だけ作る」こと。そうすれば、下に続く要素で同じ値を何度でも使い回せます。まずは合計や表示用ラベルなど、よく使う値からth:withに置き換えて、重複を減らしていきましょう。

3. 複数の一時変数を使用する方法

th:withでは、カンマで区切るだけで複数の一時変数をまとめて定義できます。「小計」と「税額」のように、関連する値を段階的に計算するときにとても便利です。一度だけ計算しておけば、下の要素で自由に参照できるようになります。

▼ 小計と消費税をまとめて計算してみる


<div th:with="subtotal=${price * quantity}, tax=${subtotal * 0.1}">
  <p>商品の価格: <span th:text="${price}"></span>円</p>
  <p>購入数: <span th:text="${quantity}"></span></p>
  <p>小計: <span th:text="${subtotal}"></span>円</p>
  <p>消費税: <span th:text="${tax}"></span>円</p>
  <p>合計金額: <span th:text="${subtotal + tax}"></span>円</p>
</div>

最初に小計subtotalを作り、その値を使って消費税taxを計算しています。こうすることで、price * quantity * 0.1 のような長い式を何度も書かずに済み、読み手にも計算の流れが伝わりやすくなります。同じテンプレート内での再利用にも強いのが特徴です。

▼ 文字列と数値を混ぜて複数定義する例


<section th:with="title='お会計明細', fee=${subtotal + tax}">
  <h4 th:text="${title}" class="fw-bold"></h4>
  <p>お支払い総額は <span th:text="${fee}"></span> 円です。</p>
</section>

文字列と数値を並べて定義することもできます。画面の見出し用文言と計算結果を一緒に管理できるので、「数字だけ別処理」「文字だけ別処理」という分散を防ぎやすくなります。

複数の一時変数を使うと、式の重複を無くしつつ、テンプレートを読みやすくできるというメリットがあります。まずは小さな計算から試して、必要な値をまとめて定義する書き方に慣れてみてください。

4. th:withを使用する際の注意点

「4. th:withを使用する際の注意点」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

4. th:withを使用する際の注意点

th:withを使用する際には、以下の点に注意してください。

一時変数はth:withを設定したブロック内でのみ有効です。
変数名はわかりやすく設定し、他のテンプレート変数と混同しないようにしましょう。
計算やデータ加工が複雑になりすぎる場合は、サーバーサイドで処理を行う方が適切です。

これらの注意点を守ることで、th:withを安全かつ効果的に使用できます。

まとめ

本記事では、Thymeleafのth:withについて解説しました。この属性は、一時的な変数を定義してテンプレート内で再利用可能にする便利な機能です。複雑な計算やデータ加工を簡略化し、テンプレートコードの可読性を高める効果があります。

例えば、合計金額や消費税のように計算が必要なデータを一度計算して一時変数に保存することで、テンプレート内の記述が短縮され、同じ計算を繰り返す必要がなくなります。また、th:withを複数回使用する場合は、変数名が重複しないように注意しましょう。

以下に改めて簡単な使用例を示します。


<div th:with="discountedPrice=${price * 0.9}">
    <p>元の価格: <span th:text="${price}"></span>円</p>
    <p>割引後の価格: <span th:text="${discountedPrice}"></span>円</p>
</div>

この例では、priceから10%の割引を計算してdiscountedPriceという変数に保存し、その値を表示しています。このように簡潔な記述が可能になります。

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

生徒

「th:withを使えば、一時的な変数を定義してテンプレート内で計算結果を再利用できるんですね！」

先生

「そうです。テンプレートコードの見通しを良くするためにも、複雑な処理を一時変数にまとめるのは良い方法です。」

生徒

「複数の変数を同時に使う例もすごく参考になりました！テンプレート内での処理がもっと簡単になりそうです。」

先生

「ぜひ試してみてください。ただし、複雑すぎる計算やデータ加工はサーバーサイドで行うようにすると、コードがより分かりやすくなりますよ。」

生徒

「分かりました！サーバーサイドとの使い分けも意識して活用してみます！」