独学でJavaを学んでいる方向け

「実務レベルに到達できるか不安」「1人だと詰まることが多い」場合は、実践重視で学べる環境を一度確認しておくのも一つの手です。

EBAエデュケーション｜学習内容・サポートを見る

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

Thymeleafのth:with

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

生徒

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

先生

「Thymeleafでは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に置き換えて、重複を減らしていきましょう。

将来を見据えて、＋αのスキルを身につけたい方へ

JavaやLinuxを学んでいても、「このままで市場価値は上がるのか」「キャリアの選択肢を広げたい」と感じる方は少なくありません。

AIを学ぶならアイデミープレミアム

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

先生

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

生徒

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

先生

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

生徒

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