Thymeleafで変数に値を代入する方法

Thymeleafで変数に値を代入する方法

Thymeleafで変数に値を代入する方法は、以下のようにth:with属性を使用することで実現できます。
th:withを使用すると、スコープ内で変数を定義し、その値を代入することができます。

基本的な使い方

以下に、Thymeleafテンプレートで変数に値を代入する基本的な例を示します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf 変数の代入</title>
</head>
<body>
    <div th:with="name='ジョン', age=${20}">
        <p th:text="'名前: ' + ${name}">ここに名前が表示されます</p>
        <p th:text="'年齢: ' + ${age}">ここに年齢が表示されます</p>
    </div>
</body>
</html>

この例では、th:with属性を使用してnameとageという変数を定義し、それぞれに'John'と20の値を代入しています。
そして、th:text属性を使用して、その変数の値をHTML要素に表示しています。

th:withを使用する理由

読みやすさの向上
複雑な式を簡略化し、コードの読みやすさを向上させます。
コードの再利用
一度計算した値を再利用することで、冗長なコードを避けることができます。

スコープの例

th:withで定義した変数は、そのタグ内とその子タグでのみ有効です。
以下の例では、スコープの動作を示しています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf 変数のスコープ</title>
</head>
<body>
    <div th:with="outerVar='外側'">
        <p th:text="'外側の変数: ' + ${outerVar}">ここに外側の変数が表示されます</p>
        <div th:with="innerVar='内側'">
            <p th:text="'内側の変数: ' + ${innerVar}">ここに内側の変数が表示されます</p>
            <p th:text="'内側のスコープ内の外側の変数: ' + ${outerVar}">内側のスコープ内に外側の変数が表示されます</p>
        </div>
        <p th:text="'内側のスコープ外の内側の変数: ' + ${innerVar}">これはエラーになります</p>
    </div>
</body>
</html>

この例では、outerVarは外側のdivで定義されており、その内側のスコープでも有効です。
一方、innerVarは内側のdivで定義されているため、その外ではアクセスできません。

これらの基本的な概念を理解することで、Thymeleafで効率的に変数を使用し、テンプレートの動的な生成を行うことができます。