先生と生徒の会話形式で理解しよう

生徒

「Thymeleafで整数をフォーマットして見やすく表示する方法はありますか？例えば、3桁区切りでカンマを入れたりしたいです。」

先生

「はい！Thymeleafには#numbers.formatIntegerという便利なメソッドがあります。これを使うことで、整数をフォーマットして、指定したスタイルで簡単に表示することができますよ。」

生徒

「それは便利そうですね！具体的にどのように使うのか教えてください！」

先生

「それでは、基本的な使い方から応用例まで一緒に見ていきましょう。」

1. #numbers.formatIntegerメソッドの基本

#numbers.formatIntegerメソッドは、整数を指定したフォーマットで表示するために使用されるThymeleafのユーティリティメソッドです。カンマ区切りの追加やゼロ埋めなど、数値の表示を整える際に非常に役立ちます。以下は、整数を3桁区切りでカンマを入れてフォーマットする基本的な例です。


<p th:text="${#numbers.formatInteger(1234567, 'COMMA')}"></p>

このコードを実行すると、「1,234,567」と表示されます。数値を見やすくするためにカンマ区切りを入れるのは、特に金額や統計データを表示する際に便利です。

2. カスタムフォーマットで整数を表示する

#numbers.formatIntegerを使えば、カスタムフォーマットで数値を表示することも可能です。以下は、ゼロ埋めで最低5桁になるように整数をフォーマットする例です。


<p th:text="${#numbers.formatInteger(123, '00000')}"></p>

このコードを実行すると、「00123」と表示されます。ゼロ埋めを行うことで、固定長のデータ表示が必要な場合に便利です。

3. 負の整数をフォーマットする

#numbers.formatIntegerは負の整数にも対応しています。以下の例では、負の値を3桁区切りでカンマを入れてフォーマットしています。


<p th:text="${#numbers.formatInteger(-123456, 'COMMA')}"></p>

このコードを実行すると、「-123,456」と表示されます。正負の値に関係なく、見やすく整えることが可能です。

4. 配列やリスト内の整数をフォーマットする

複数の整数を配列やリストに格納している場合でも、#numbers.formatIntegerを使用してフォーマットできます。以下は、その例です。


<ul>
    <li th:each="num : ${#arrays.array(1000, 2000, 3000)}" th:text="${#numbers.formatInteger(num, 'COMMA')}"></li>
</ul>

このコードでは、各整数が3桁区切りでカンマ付きのフォーマットでリスト表示されます。「1,000」「2,000」「3,000」のように出力されます。

5. 実践例: フォームの入力値をフォーマットする

ユーザーがフォームに入力した数値をフォーマットすることも可能です。以下の例では、ユーザーが入力した値を3桁区切りでフォーマットして表示します。


<form>
    <input type="number" th:value="${userInput}" />
    <p th:text="'フォーマットされた値: ' + #numbers.formatInteger(userInput, 'COMMA')"></p>
</form>

このコードでは、入力値が「123456」であれば「フォーマットされた値: 123,456」と表示されます。入力データの見やすさを向上させるのに役立ちます。

6. デフォルト値を設定する

フォーマット対象の値がnullの場合にデフォルト値を表示することも可能です。以下の例では、値が存在しない場合に「N/A」と表示します。


<p th:text="${value != null ? #numbers.formatInteger(value, 'COMMA') : 'N/A'}"></p>

このコードでは、値がnullであれば「N/A」と表示され、それ以外の場合はフォーマットされた数値が表示されます。

7. 動的に取得したデータをフォーマットする

サーバーサイドで取得した数値データ（例：データベースの検索結果など）も、Thymeleafの#numbers.formatIntegerを使って見やすく整えることが可能です。以下は、検索結果の件数をカンマ付きで表示する例です。


<p th:text="'検索結果件数: ' + #numbers.formatInteger(resultCount, 'COMMA') + ' 件'"></p>

このように、サーバーから渡された動的データに対しても、簡単にフォーマットを適用できます。特に検索件数やページビュー数などの表示に効果的です。

8. テーブル形式のデータに適用する

管理画面や帳票出力など、表形式で数値データを一覧表示する場面でも#numbers.formatIntegerは非常に便利です。以下の例では、売上データを表でカンマ区切り表示しています。


<table>
    <tr th:each="item : ${salesList}">
        <td th:text="${item.name}"></td>
        <td th:text="${#numbers.formatInteger(item.amount, 'COMMA')}"></td>
    </tr>
</table>

表の各行で数値をフォーマットすることで、見た目の整った分かりやすいテーブルを実現できます。金額や数量などを扱う場面で特に有効です。

まとめ

この記事では、Thymeleafの#numbers.formatIntegerメソッドを使用して、数値を見やすくフォーマットする方法を学びました。基本的な3桁区切りのカンマ追加から、ゼロ埋め、負の整数対応、さらには配列やリスト内の数値フォーマットまで幅広い内容をカバーしました。 #numbers.formatIntegerは、金額や統計データを見やすく表示する場合に特に役立ちます。また、null値に対してデフォルト値を設定する方法も学びました。このような機能を活用することで、Thymeleafテンプレートの実用性がさらに向上します。


<!-- 配列内の数値をフォーマットして表示 -->
<ul>
    <li th:each="num : ${#arrays.array(500, 1000, 1500)}" th:text="'フォーマット済み: ' + #numbers.formatInteger(num, 'COMMA')"></li>
</ul>

先生と生徒の振り返り会話

生徒

「#numbers.formatIntegerメソッドを使うと、本当に数値が見やすくなりますね！特にカンマ区切りやゼロ埋めが便利だと思いました。」

先生

「その通りですね。カンマ区切りは金額や統計データを扱うときに欠かせない機能です。また、ゼロ埋めはIDやコードを固定長で表示する際にも役立ちます。」

生徒

「フォームの入力値をフォーマットする例も、実際のアプリケーションで役立ちそうです。条件付きの表示方法も覚えたので、どんな状況にも対応できそうです！」

先生

「良い気づきですね！#numbers.formatIntegerを使いこなせば、テンプレートの可読性やデータ表示の質が大幅に向上します。ぜひ実践してみてください。」