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

新人

「Thymeleafで数値を0埋めしたり、見やすい形式で表示する方法ってありますか？」

先輩

「はい、Thymeleafには数値のフォーマットを簡単に行う方法があります。0埋めやカンマ区切りなどの表示もコントローラで渡した数値をテンプレート側で整形できるんですよ。」

新人

「それは便利そうですね。具体的にはどう書けばいいんでしょうか？」

先輩

「まずはThymeleafの基本と数値フォーマットがなぜ必要かを理解してから、実際の使い方を順番に説明しますね。」

1. Thymeleafとは何かの簡単な説明

ThymeleafはJavaで作られたサーバーサイドのテンプレートエンジンで、主にSpring MVCのWebアプリケーションでHTMLを動的に生成するために使われます。Pleiades環境でGradleを利用しながら開発する際にも、@Controllerで渡したデータをテンプレートに簡単に反映できる特徴があります。

ThymeleafはHTMLの中に特別な属性を追加して、動的に内容を書き換えたり繰り返し表示したりできます。今回のテーマである数値の0埋めやフォーマットも、こうした動的処理の一つです。

2. 数値の0埋めやフォーマットがなぜ必要か、基本的な考え方

数値をそのまま表示すると、桁数がバラバラだったり見づらかったりすることがあります。例えば「1」や「12」はそのままですが、「007」や「00012」と0で揃えたいケースもあります。これが0埋めです。

また、大きな数値はカンマ区切りで読みやすくしたいことも多いです。数値フォーマットは、こうした見やすさを目的に数値の表示を整形する手法です。

Thymeleafでは、Spring MVCのコントローラから渡された数値をテンプレート内で簡単に0埋めやカンマ区切りに変換できます。これにより、ユーザーに見やすい画面を提供できるようになります。

次の章では、実際にSpringの@Controllerで数値をモデルに渡す方法と、Thymeleafでのフォーマット方法について詳しく見ていきましょう。

3. Springの@Controllerで数値データをモデルに追加する具体例

Spring MVCの@Controllerで数値データをモデルに追加する方法は非常にシンプルです。Pleiades環境でGradleを使ったプロジェクトでも同じやり方で問題なく動作します。

以下の例は、商品価格や数量などの数値をモデルに追加し、Thymeleafのテンプレートに渡すサンプルコードです。


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

@Controller
public class ProductController {

    @GetMapping("/product")
    public String showProduct(Model model) {
        int price = 7500;
        int quantity = 7;

        model.addAttribute("price", price);
        model.addAttribute("quantity", quantity);

        return "productView";
    }
}

この例では、価格(price)と数量(quantity)の整数値をモデルにセットしています。Thymeleafのテンプレートでこれらの変数を使って、0埋めや数値フォーマットを行うことができます。

4. Thymeleafで0埋めする方法（標準機能の活用）

Thymeleafでは、数値を0埋め（ゼロパディング）するために標準で用意されているString.formatの機能を利用する方法が一般的です。これをth:text属性内で呼び出すことで実現します。

例えば、3桁の0埋め表示をしたい場合、以下のように書きます。


<span th:text="${#strings.format('%03d', price)}">000</span>

ここで%03dは3桁の整数を0で埋める書式指定子です。価格が「7」なら「007」、「7500」なら「7500」と表示されます。

同様に数量など他の数値でも使えます。Thymeleafの#strings.formatはJavaのString.formatをラップしているため、慣れておくと応用が効きます。

5. Thymeleafで数値フォーマットを行う方法（DecimalFormatなどの利用例）

より複雑な数値フォーマットを行いたい場合、JavaのDecimalFormatクラスを使ってコントローラ側でフォーマット済みの文字列を作成し、Thymeleafに渡す方法があります。

以下は、価格をカンマ区切りの文字列に変換してモデルにセットする例です。


import java.text.DecimalFormat;

@GetMapping("/product")
public String showProduct(Model model) {
    int price = 7500;
    int quantity = 7;

    DecimalFormat df = new DecimalFormat("#,###");
    String formattedPrice = df.format(price);

    model.addAttribute("price", formattedPrice);
    model.addAttribute("quantity", quantity);

    return "productView";
}

この例では、価格「7500」が「7,500」というカンマ区切りの文字列に変換され、テンプレート側ではそのまま表示できます。

テンプレート側は以下のようにシンプルに記述できます。


<span th:text="${price}">7,500</span>

この方法は自由度が高く、通貨表記や小数点以下の桁数調整などにも対応しやすいので、複雑なフォーマットが必要な場合におすすめです。

6. 実践例：0埋めや数値フォーマットを組み合わせた画面表示の応用例

ここでは、先ほど説明した0埋めや数値フォーマットを組み合わせて使い、実際に画面に表示する応用例を紹介します。Pleiades＋Gradle環境でSpring MVCの@Controllerから渡したデータをThymeleafで整形して見やすく表示するイメージです。

まず、コントローラでは価格と数量の数値データを用意し、価格はカンマ区切りに変換、数量は3桁の0埋め文字列に変換してモデルに追加します。


import java.text.DecimalFormat;

@GetMapping("/productDetails")
public String showProductDetails(Model model) {
    int price = 12500;
    int quantity = 7;

    DecimalFormat priceFormat = new DecimalFormat("#,###");
    String formattedPrice = priceFormat.format(price);

    String formattedQuantity = String.format("%03d", quantity);

    model.addAttribute("price", formattedPrice);
    model.addAttribute("quantity", formattedQuantity);

    return "productDetailsView";
}

続いて、Thymeleafのテンプレート側ではモデルから渡されたpriceとquantityの値をそのまま表示します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品詳細</title>
</head>
<body>
    <h2>商品情報</h2>
    <p>価格：<span th:text="${price}">12,500</span> 円</p>
    <p>数量：<span th:text="${quantity}">007</span> 個</p>
</body>
</html>

この例では、価格が「12,500」とカンマ区切りで見やすくなり、数量は「007」と3桁で0埋めされています。こうした表示はユーザーにとって直感的で分かりやすくなります。

7. よくあるエラーと対処法（数値の扱いで注意すべきポイント）

数値フォーマットを行う際に初心者がよく遭遇するエラーとその対処法を紹介します。

NullPointerExceptionが発生する

モデルに渡す数値データがnullの場合、Thymeleafでの表示やフォーマット時にNullPointerExceptionが発生します。必ずコントローラ側で数値を初期化し、nullでない状態を保証しましょう。

数値ではなく文字列として渡してしまう問題

DecimalFormatなどでフォーマット済みの文字列をモデルに渡した場合、テンプレート側では数値としての計算はできません。計算が必要な場合は生の数値を別で渡すなど工夫が必要です。

フォーマット指定子の誤り

0埋めのフォーマット文字列（例：%03d）を間違えると期待した表示になりません。書式指定はJavaのString.formatと同じなので正確に書くことが重要です。

テンプレート内での式の書き間違い

Thymeleafの式構文（例：th:text="${price}"）で変数名や構文ミスがあると、画面に何も表示されないかエラーになります。変数名のスペルミスに特に注意してください。

8. まとめと今後の学習へのアドバイス

今回の記事では、Thymeleafでの数値の0埋めやフォーマット方法について、Spring MVCの@Controllerとの連携を踏まえてわかりやすく解説しました。主なポイントは以下の通りです。

Spring MVCのモデルに数値をセットし、Thymeleafテンプレートで表示する
Thymeleafの#strings.formatで0埋めが簡単にできる
より複雑な数値フォーマットはJavaのDecimalFormatで行い、文字列としてテンプレートに渡す
実践例を通じて0埋めやカンマ区切りの組み合わせ表示が可能
NullPointerExceptionや式の書き間違いなど、よくあるエラーには注意が必要

これらの知識はPleiadesとGradleでのSpring MVC開発において非常に役立ちます。今後は、数値フォーマットの他に日付や時間のフォーマット、フォーム入力値のバリデーションやAjax連携などを学ぶと、さらに実践的なWeb開発力が身につきます。

ぜひ今回のサンプルを参考に、実際に手を動かしながらThymeleafの数値フォーマットをマスターしてください。

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

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

Thymeleafとは何ですか？Spring MVCとどう関係していますか？

ThymeleafはJavaで作られたサーバーサイドのテンプレートエンジンで、HTMLに動的なデータを埋め込むことができます。Spring MVCと連携することで、@Controllerから渡されたデータをThymeleafテンプレートに表示できるようになり、Webアプリケーションの開発が効率化されます。

Thymeleaf 変数 0埋めや数値フォーマットの方法を初心者向けにわかりやすく解説