Thymeleaf 変数再代入の書き方と注意点

新人と先輩の会話形式で理解しよう

新人

「Thymeleafで変数を再代入することはできるんですか？Javaみたいに何度も値を変えたいんですけど…」

先輩

「いい質問だね！ThymeleafはHTMLテンプレート内で再代入できる場面があるよ。具体的に見ていこうか！」

新人

「具体的な書き方を教えてください！」

先輩

「それじゃあ、基本の考え方から再代入の実例まで一緒に確認しよう！」

1. Thymeleafで変数の再代入はできるのか？

Thymeleafのテンプレート内では、基本的に一度定義した変数を別の箇所で「再代入」するのは制約があります。なぜなら、Thymeleafの変数はJavaのローカル変数のように、スコープが限られています。つまり、th:withなどで新しく再定義することで、実質的に「再代入」に近いことが可能です。

例えば、最初に親要素でth:withを使って変数を定義し、子要素で同じ名前の変数を新しくth:withで再定義することで、部分的に値を更新できます。これは、Javaの再代入とは異なる「再定義」に近い仕組みです。

開発環境としては、Pleiadesをインストールして、Gradleでビルドを行う構成を使うと、Thymeleafテンプレートの編集やデバッグがスムーズに進められます。@Controllerクラスを活用し、ビューのレンダリングに集中できるのも特徴です。

2. 変数の再代入の書き方（基本例で説明）

実際に、同じ変数名をth:withで再定義する例を見ていきましょう。以下は基本的なHTMLテンプレートの例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf変数の再代入例</title>
</head>
<body th:with="msg='最初のメッセージ'">
  <p th:text="${msg}">最初のメッセージ</p>
  <div th:with="msg='再定義されたメッセージ'">
    <p th:text="${msg}">再定義されたメッセージ</p>
  </div>
  <p th:text="${msg}">最初のメッセージ（スコープ外）</p>
</body>
</html>

この例では、bodyタグでmsgを「最初のメッセージ」として定義し、その後div内で同じ名前のmsgを新たに定義しています。これにより、div内では「再定義されたメッセージ」が使われ、div外では元の「最初のメッセージ」が保持される仕組みです。

これはあくまで「再定義」であり、Javaのように変数自体を書き換えるわけではない点に注意してください。

さらに発展した書き方

条件分岐やループの中で再代入（再定義）を使うこともできます。以下はth:eachと組み合わせた例です。


<ul th:with="prefix='項目: '">
  <li th:each="item : ${items}"
      th:with="msg=${prefix} + ${item}">
    <span th:text="${msg}">項目: 値</span>
  </li>
</ul>

この例では、リストitemsの各要素に対して、msgを部分的に「再代入（再定義）」しています。結果として、msgにはそれぞれのitemに合わせた文字列が入ります。

このように、Thymeleafのth:withを活用することで、柔軟な変数操作が可能になります。

3. よくある再代入時の注意点

Thymeleafで変数を再代入（正確には再定義）する際、初心者が間違いやすいポイントがいくつかあります。まず、同じ名前の変数を複数箇所で再定義すると、想定していない動作になることがあるので注意が必要です。これは、th:withのスコープの仕組みを理解していないと起こりやすいです。

例えば、親要素で定義した変数と同じ名前を子要素で再度th:withで定義すると、子要素内では親の変数が一時的に上書きされます。しかし、子要素を抜けると再び親要素の変数が有効になるので、見た目には「変数が元に戻る」ように見えます。

これを理解しておかないと、divなどで表示された値が意図したものと違うことがあります。特に、ループや条件分岐の中で再代入する際に、スコープの切り替わりが複雑になるので気をつけましょう。

また、th:withで定義する際に、変数の値を文字列として扱う場合は必ずシングルクオートで囲む必要があります。これを忘れると、意図しないエラーが出るので初心者の方は特に注意しましょう。

4. 再代入でのスコープと衝突回避（具体的な例を解説）

再代入（再定義）時のスコープの衝突を回避するためには、変数名を工夫することが重要です。以下は、同じ名前を使わずに変数を再定義する例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Thymeleafスコープの衝突回避</title>
</head>
<body th:with="parentMsg='親メッセージ'">
  <p th:text="${parentMsg}">親メッセージ</p>
  <div th:with="childMsg='子メッセージ'">
    <p th:text="${childMsg}">子メッセージ</p>
    <p th:text="${parentMsg}">親メッセージ（子の中でも有効）</p>
  </div>
  <p th:text="${parentMsg}">親メッセージ（スコープ外）</p>
</body>
</html>

この例では、parentMsgとchildMsgという異なる名前の変数を使っているので、スコープの衝突を回避できます。divの中ではparentMsgも有効なので、同時に表示することが可能です。

次に、リストの中でth:eachを使って動的に変数を再定義する例を見てみましょう。


<ul>
  <li th:each="item : ${items}"
      th:with="itemMsg='アイテム: ' + ${item}">
    <span th:text="${itemMsg}">アイテム情報</span>
  </li>
</ul>

この例では、th:eachでループを回しながら、th:withでループ内専用のitemMsgを定義しています。ループの中だけで使う変数名を新しく作ることで、他のスコープに影響を与えず安全です。

また、開発環境としては、Pleiadesでプロジェクトを作成し、Gradleでビルドする構成が便利です。PleiadesのGradleサポート機能を使うと、テンプレートの編集結果をすぐにブラウザで確認できるので、変数スコープの確認作業がスムーズになります。@ControllerからModelに値を渡す部分は以下のように記述できます。


package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SampleController {
  @GetMapping("/list")
  public String showList(Model model) {
    model.addAttribute("items", List.of("A", "B", "C"));
    return "list";
  }
}

この@Controllerではitemsというリストをビューに渡しています。ビューでは、ループの中で変数を再定義（再代入）する例として活用できます。

Thymeleafの変数スコープは、一見シンプルですが実際にHTMLをレンダリングするときにスコープの切り替わりが重要な意味を持ちます。慣れないうちは、異なる名前を使って変数を再定義することを心がけると混乱しにくいです。

Thymeleafのth:withの仕組みを理解し、適切にスコープを管理することで、テンプレート内の可読性も向上します。初心者の方は、Pleiadesでプロジェクトを作成し、サンプルテンプレートを動かしながら、スコープや再代入の仕組みを体感的に学ぶのがおすすめです。

5. まとめとしてのポイントのおさらい

ここまでThymeleafでの変数再代入（実際には再定義）の仕組みと注意点を見てきました。まず大切なのは、Thymeleafの変数はth:withでスコープごとに新たに定義される点です。再代入のように見える処理は、実際には新しいスコープで同じ変数名を再定義しているだけだと理解してください。

そのため、スコープが切り替わるごとに、変数の値がどう見えるかを整理しておくことが大切です。親要素での定義は子要素で使えますが、同じ名前で再定義すると一時的に上書きされ、子要素を抜けると元に戻る仕組みです。

変数名の衝突を避けるためには、スコープごとに別の変数名を使うか、意味のある名前に分けて管理することを心がけましょう。これにより、予期しない表示やバグを防げます。

また、文字列を扱う際には必ずシングルクオートで囲むことを忘れないでください。これを忘れると、テンプレートのレンダリング時にエラーが出ることがあります。

6. 初心者向けによくある質問と回答

Q1: Javaの変数のように何度も同じ値を更新できますか？

A: いいえ。Thymeleafでは、変数はth:withで再定義する形でしか「再代入」できません。Javaのローカル変数のように1つの変数を更新し続ける仕組みではないので注意しましょう。

Q2: 同じ名前の変数を複数箇所で使うとどうなりますか？

A: 変数名が衝突すると、子要素内では一時的に上書きされ、子要素を抜けると親要素の変数が再び有効になります。つまり、スコープ単位で管理されています。

Q3: 変数スコープの確認はどうすればいいですか？

A: 開発中はPleiadesとGradleを使って、テンプレートを実際にブラウザで表示し、どの要素でどの変数が表示されるかを確認するのがおすすめです。サンプルコードを動かしながら理解を深めましょう。

Q4: @Controllerではどのように値を渡すのが良いですか？

A: @ControllerではModelに値を入れて、ビューに渡すのが基本です。以下は簡単な例です。


package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MessageController {
  @GetMapping("/message")
  public String showMessage(Model model) {
    model.addAttribute("baseMsg", "ようこそ、Thymeleafの世界へ！");
    return "message";
  }
}

この例では、baseMsgをビューに渡して表示することができます。

7. 学習を深めるためのおすすめ情報

Thymeleafの変数管理やスコープの仕組みをさらに深く理解するには、公式ドキュメントを確認するのがおすすめです。以下は公式ドキュメントのURLです。


https://www.thymeleaf.org/documentation.html

公式ドキュメントでは、th:withの詳細な使い方や変数スコープの考え方が詳しく解説されています。特に、公式サンプルを実際に動かしてみると理解が格段に深まります。

また、Pleiadesのプロジェクト管理機能やGradleのビルドツールを活用することで、サンプルテンプレートを手軽に編集・確認できます。自分でHTMLを編集しながら「この要素ではどの変数が使えるのか？」を実際に試すと、変数スコープや再代入の仕組みを自然に覚えられます。

初心者の方はまず、簡単な例を参考にしながら、変数名やスコープを意識してコードを書く練習をしましょう。少しずつ慣れていくと、複雑なテンプレートも無理なく作成できるようになります。

学習を続ける上で、「試してみること」が何より大切です。テンプレートをどんどん書き換えて、表示の変化を楽しみながらThymeleafをマスターしていきましょう！

Thymeleaf 変数 再代入の書き方と注意点