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>

例えば、税込み価格や表示用の文字列を一度だけ作って何度も参照したい場面、ヘッダーやカード内で共通の値を使い回したい場面に最適です。 「テンプレートで軽い加工をして、画面内で繰り返し使う」という用途に強く、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>

<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はとても便利ですが、いくつか気をつけたいポイントがあります。 初心者の方でも戸惑わないように、代表的な注意点をわかりやすく整理してみましょう。

• 一時変数はブロックの中だけで有効
  <div>や<section>に設定した一時変数は、そのタグと子要素の中だけで利用できます。 外側のタグでは使えないため、「表示されない？」と思ったらまずスコープを確認してみましょう。
• 変数名はわかりやすく
  例えばtよりtotalPriceの方が後から見返したときに理解しやすくなります。 似た名前の変数が多いと混乱するので、商品用・ユーザー用など意味が伝わる名前にするのがおすすめです。
• 複雑な計算はサーバー側で
  テンプレート内で重い計算や長い処理を書くと、読みづらくなるだけでなくミスにもつながります。 なるべくコントローラ側で値を用意し、テンプレートでは「仕上げ」程度にとどめると安心です。

<div th:with="msg='こんにちは'">
  <p th:text="${msg}"></p>
</div>

<!-- ここではmsgは使えない -->
<p th:text="${msg}"></p>

これらのポイントを意識しておけば、画面が複雑になっても安心してth:withを使えます。 「どこで作られた変数か」「どこまで有効か」を意識するだけで、テンプレートの見通しがぐっと良くなります。

5. th:eachとth:withを組み合わせる方法

5. th:eachとth:withを組み合わせる方法

th:withはth:eachと組み合わせることで、繰り返し処理の中でも活躍します。 商品一覧や会員一覧など、同じレイアウトを何度も表示する画面では、各行ごとに一時変数を作成して利用するとテンプレートが見やすくなります。 毎回同じ式を書く必要がなくなるため、保守もしやすくなります。

<tr th:each="item : ${itemList}"
    th:with="salePrice=${item.price * 0.9}">

    <td th:text="${item.name}"></td>
    <td th:text="${item.price}"></td>
    <td th:text="${salePrice}"></td>

</tr>

<div th:each="user : ${users}"
     th:with="message=${user.name} + ' さん'">

    <p th:text="${message}"></p>

</div>

一覧表示では同じ式を何度も書きがちですが、th:withを利用することで処理内容が整理されます。 特にth:eachと組み合わせる使い方は、Spring BootとThymeleafによるWebアプリケーション開発でよく利用される書き方なので、ぜひ覚えておきましょう。

6. th:ifやth:unlessと組み合わせる方法

6. th:ifやth:unlessと組み合わせる方法

th:withで作成した一時変数は、th:ifやth:unlessなどの条件分岐でも利用できます。 一度だけ条件を計算しておけば、その結果を複数の場所で使えるため、テンプレートがシンプルになります。

<div th:with="available=${stock > 0}">

    <p th:if="${available}">在庫があります</p>
    <p th:unless="${available}">在庫切れです</p>

</div>

<section th:with="login=${session.loginUser != null}">

    <div th:if="${login}">
        ログイン中です
    </div>

    <div th:unless="${login}">
        ログインしてください
    </div>

</section>

条件分岐が多い画面では、同じ条件式が何度も登場することがあります。 そのような場合はth:withで一時変数を作成してから利用すると、テンプレート全体が読みやすくなり、修正漏れも防ぎやすくなります。

7. th:withを使う場面と使わない場面

「7. th:withを使う場面と使わない場面」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

7. th:withを使う場面と使わない場面

th:withは便利な機能ですが、すべての処理をテンプレート側で行うためのものではありません。 「どのような場面で利用すると効果的なのか」を理解しておくことで、より保守しやすいSpring Bootアプリケーションを作れるようになります。

<div th:with="fullName=${user.lastName + ' ' + user.firstName}">

    <h3 th:text="${fullName}"></h3>

    <p>担当者：
        <span th:text="${fullName}"></span>
    </p>

</div>

<!-- テンプレートでは表示に必要な値だけ利用する -->

<p th:text="${totalPrice}"></p>

th:withは「テンプレート内で少しだけ加工したい」「同じ値を何度も利用したい」という場面で力を発揮します。 一方で、ビジネスロジックまでテンプレートへ書いてしまうと保守が難しくなるため、Spring Bootのコントローラやサービスと役割を分けながら利用することが大切です。

まとめ

まとめ

本記事では、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はあくまで一時的な変数を定義して再利用しやすくするための便利な機能です。計算結果や共通の値をテンプレート内で複数回使いたい場合に役立ちますが、使わなくてもテンプレートは正常に動作します。

Thymeleafのth:withで定義した変数は親タグの外に持ち出せますか？

持ち出せません。th:withで定義した変数はそのタグと子要素の中だけで利用できるスコープを持ちます。外に出すと無効になり、値が表示されなくなります。

テンプレート内で計算するとパフォーマンスが悪くなりますか？

軽い計算なら問題ありません。合計金額や税込み価格など簡単な演算ならThymeleafのth:withで扱っても十分高速です。ただし、大量の計算や複雑な処理はSpring Boot側のサーバーサイドで行う方が適切です。