Thymeleafの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>

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

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

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>

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

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

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

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を使用する際の注意点

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という変数に保存し、その値を表示しています。このように簡潔な記述が可能になります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:withはSpring Bootアプリのテンプレートで必ず使う必要がありますか？

必ず使う必要はありません。Thymeleafのth:withはあくまで一時的な変数を定義して再利用しやすくするための便利な機能です。計算結果や共通の値をテンプレート内で複数回使いたい場合に役立ちますが、使わなくてもテンプレートは正常に動作します。