Thymeleaf 変数 加算や演算の基本テクニック
新人
「Thymeleafでも変数に計算をさせたりできますか？Javaのように加算とか演算ができると便利だと思うんですけど…」
先輩
「Thymeleafでは、テンプレート内で変数を加算したり減算したりできるよ。簡単な演算であれば十分対応しているから安心してね。」
新人
「演算のやり方がイメージつかないので、具体的に教えてください！」
先輩
「よし、基本の加算や演算の書き方を実例を交えて確認しよう！」
1. Thymeleafの変数の演算機能とは？
ThymeleafはJavaのWebアプリケーション開発で使われるテンプレートエンジンです。HTMLの中で変数を埋め込むだけでなく、簡単な計算や演算もサポートしています。加算や減算、掛け算や割り算など、数値を使った表示にとても便利です。
開発環境としては、Pleiadesをインストールし、Gradleで実行する構成が一般的です。Pleiadesを使うと、Thymeleafテンプレートをすぐに確認できるので、演算の動作もすぐに試せます。
Thymeleafの演算はJavaと似ていますが、式言語（SpEL）として簡単な書き方で書ける点が特徴です。Javaのように+や-を使って式を書けば、HTMLの表示を動的に作れます。
2. 変数での加算・減算などの演算の基本
それでは、実際にThymeleafで変数の演算を行う基本的な例を見ていきましょう。以下のHTMLは、th:withを使って変数に計算結果を代入し、表示する例です。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf演算例</title>
</head>
<body th:with="a=10, b=5, sum=${a} + ${b}, diff=${a} - ${b}">
<p th:text="'合計: ' + ${sum}">合計</p>
<p th:text="'差: ' + ${diff}">差</p>
</body>
</html>
この例では、aとbという変数を定義し、それを使ってsum（合計）とdiff（差）を計算しています。HTMLの中でも${a} + ${b}や${a} - ${b}のように直接書くことができます。
ポイントは、文字列と計算結果を'合計: ' + ${sum}のように連結できるところです。文字列の結合も+演算子で行えます。
掛け算や割り算の基本例
同様に、掛け算や割り算も*や/演算子を使って書けます。次の例を見てみましょう。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf掛け算・割り算例</title>
</head>
<body th:with="x=20, y=4, product=${x} * ${y}, quotient=${x} / ${y}">
<p th:text="'積: ' + ${product}">積</p>
<p th:text="'商: ' + ${quotient}">商</p>
</body>
</html>
この例では、xとyを使って積（掛け算）や商（割り算）を計算し、表示しています。Javaと同じ感覚で式が書けるので、初心者でもすぐに試せるのが魅力です。
開発中に「ちゃんと計算できているか」を確認したいときは、Pleiadesでプロジェクトを実行し、ブラウザで結果を確認しましょう。Springの@Controllerクラスでモデルに渡した変数も、テンプレート内の計算式に組み込めます。
3. 演算時のスコープや注意点
Thymeleafで演算するときには、変数が定義されている範囲（スコープ）に注意が必要です。th:withで定義した変数は、その要素と子要素の中でのみ有効です。スコープを越えて演算しようとすると、未定義エラーになりやすいので注意しましょう。
たとえば、親要素で変数を定義し、子要素で演算して子要素外で再度参照しようとすると、子要素で演算した結果が親要素に影響しない動作になります。これを理解しておかないと、想定と違う表示になることがあります。
加えて、数値で計算するときには整数型や少数型の違いにも注意が必要です。たとえば整数除算と少数除算で結果が異なるケースがあります。また、文字列と数値を結合する際に演算優先度に気をつけないと、意図しない文字列が生成されることがあります。
4. 複雑な計算例
ループ内での合計計算
リストの合計値を計算しながら、ループ内で表示する例を紹介します。リストの要素を足し合わせ、最後に合計を表示する方法です。
<ul th:with="total=0">
<li th:each="n : ${numbers}"
th:with="total=${total} + ${n}">
<span th:text="'現在値: ' + ${n}">現在値</span>
<span th:text="'累積合計: ' + ${total}">累積合計</span>
</li>
</ul>
この例では最初にtotal=0を定義し、ループごとにth:withで更新しています。ループ外からはアクセスできませんが、各項目ごとに累積合計が表示されます。
条件分岐と演算の組み合わせ
演算を条件分岐と組み合わせると、さらなる応用が可能です。以下は、数量に応じて割引額を計算する例です。
<div th:each="qty : ${quantities}"
th:with="price=100, total=${qty} * ${price},
discount=${qty} > 10 ? ${total} * 0.1 : 0">
<p th:text="'数量: ' + ${qty}">数量</p>
<p th:text="'合計金額: ' + ${total}">合計金額</p>
<p th:text="'割引額: ' + ${discount}">割引額</p>
</div>
この例では、三項演算子（? :）を使って、数量が10以上の場合のみ割引を適用しています。テンプレート内で単価や条件に基づく計算ができるので、画面だけで簡単な処理が完結します。
いずれの例も、Thymeleafの演算機能を使うためには、Gradleで依存関係を追加してPleiadesで実行できる環境が必要です。@Controllerでモデルにデータを渡せば、演算対象のリストや数量、単価などの動的データを使うことも可能です。
5. よくある質問と回答（初心者が気になる演算時の疑問を解決）
ここでは、初心者の方がThymeleafの演算機能でよく抱く疑問をまとめて、簡単に解説します。
Q1: Javaと同じ演算子が使えるの？
A: はい。基本的に、+、-、*、/などの演算子はJavaと同じように書けます。ただし、演算の対象となる変数がth:withなどで定義されている必要があります。
Q2: 計算結果が思ったように出ない…
A: 変数のスコープを確認してみましょう。th:withで定義した変数は、タグの中だけで有効です。親のスコープに影響しないことがあるので、スコープごとの動きを意識してください。
Q3: 文字列と数値の結合はどう書くの？
A: '合計: ' + ${sum}のように、シングルクオートで囲んだ文字列と${}で囲んだ変数を+演算子でつなげます。これにより、文字列と計算結果を同時に表示できます。
Q4: 数値の割り算で小数にならないのはなぜ？
A: Javaと同様に、整数同士の割り算では小数点以下が切り捨てられます。少数の結果を出したいときは、どちらかを少数として扱う（例：10.0 / 3）ようにしましょう。
Q5: もっと複雑な計算が必要なときは？
A: 複雑な計算やロジックは@Controller側で行い、結果だけをテンプレートに渡すのが一般的です。テンプレート内では、表示や簡単な演算にとどめるのがベストプラクティスです。
6. 学習を深めるためのおすすめ情報（公式ドキュメントやサンプルコードなど）
Thymeleafの変数演算をさらに学びたい方に、いくつかのリソースを紹介します。
Thymeleaf公式ドキュメント
まずは公式ドキュメントを読むのがおすすめです。演算やth:withの使い方、スコープ管理など、幅広く解説されています。
実際のサンプルプロジェクト
PleiadesでGradleプロジェクトを作成し、@Controllerを使ったサンプルを自分で書いてみると、理解が深まります。以下は、簡単な@Controllerの例です。
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class CalcController {
@GetMapping("/calc")
public String calc(Model model) {
model.addAttribute("numbers", List.of(1, 2, 3, 4, 5));
model.addAttribute("quantities", List.of(5, 12, 7));
return "calc";
}
}
この@Controllerでは、numbersやquantitiesをビューに渡しています。テンプレート内での演算は、このモデル変数を使って試せます。
公式サンプルテンプレート
公式サイトでは、簡単なサンプルHTMLも公開されています。基本の構文に迷ったときには、サンプルを参考にして正しい記法を確認しましょう。
学習のポイント
Thymeleafの演算は非常に強力ですが、基本的にはテンプレート内は「表示専用」と考え、複雑なロジックはJava側で計算する方が安全です。PleiadesとGradleを使った環境で、試行錯誤しながら慣れていくのがコツです。
この記事を読んだ人からの質問
