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を使用する際は、HTMLタグにth:with属性を指定し、キーと値をペアで定義します。以下は、合計金額を計算して表示する例です。


<div 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>
</div>

上記の例では、th:withを使ってtotalという一時変数を定義しています。この変数は、priceとquantityを掛け合わせた結果を持ち、同じブロック内で利用できます。

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という二つの一時変数を定義しています。それぞれ小計と消費税を計算するために使用され、テンプレート内で効率的に再利用されています。

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を使えば、一時的な変数を定義してテンプレート内で計算結果を再利用できるんですね！」

先生

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

生徒

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

先生

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

生徒

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