Thymeleafの#datesユーティリティとは？初心者向け日付操作ガイド

1. #datesユーティリティの基本

1. #datesユーティリティの基本

Thymeleaf（タイムリーフ）の#datesユーティリティとは、Javaのプログラム側から渡された「日付データ」を、HTML上で自由自在に加工して表示するための便利な道具箱のようなものです。 プログラミング未経験の方でも、このユーティリティを使えば「2026-04-26」という無機質なデータを「2026年4月26日」といった読みやすい形式に変換したり、システムが持っている現在時刻を画面に呼び出したりすることが、複雑なJavaコードを書かずに実現できます。

まずは、コントローラー（Java側）からtodayという名前で日付データが送られてきたと仮定して、それをWebブラウザに表示する最も基本的な書き方を確認しましょう。

<!-- 基本的な日付表示の例 -->
<p th:text="${#dates.format(today, 'yyyy-MM-dd')}"></p>

このコードの仕組みを詳しく解説します。まずth:textは、タグの中身を右側の計算結果で書き換えるという命令です。 そして、#dates.format(日付, 形式)という形を使うことで、指定した日付を好きな見た目に整えることができます。

例えば、Java側で準備したデータが「2026年4月26日の午後11時」を指していた場合、上記のHTMLを実行すると、ブラウザには「2026-04-26」と表示されます。 このように、元データがどんなに詳細な情報を持っていても、表示したい部分だけをスマートに抜き出せるのが#datesの最大のメリットです。

2. 日付のフォーマットをカスタマイズする

2. 日付のフォーマットをカスタマイズする

#dates.formatを使えば、日付を任意のフォーマットで表示できます。以下は、年月日を日本語形式で表示する例です。

<p th:text="${#dates.format(today, 'yyyy年MM月dd日')}"></p>

このコードを実行すると、「2025年01月27日」のように日本語形式の日付が表示されます。地域や用途に合わせてフォーマットを柔軟に変更できるのが特徴です。

3. 現在の日付と時刻を取得する

3. 現在の日付と時刻を取得する

#datesには、現在の日付や時刻を直接取得する機能もあります。以下のコードは、現在の日付と時刻をそれぞれ取得して表示する例です。

<p th:text="${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}"></p>

#dates.createNow()は現在の日付と時刻を生成します。この例では、現在の日付と時刻を「2025-01-27 15:30:45」のような形式で表示します。

4. 日付の加算と減算

4. 日付の加算と減算

#datesを使えば、日付の加算や減算も簡単に行えます。以下は、1週間後の日付と1週間前の日付を表示する例です。

<p th:text="${#dates.format(#dates.addDays(today, 7), 'yyyy-MM-dd')}"></p>

<p th:text="${#dates.format(#dates.addDays(today, -7), 'yyyy-MM-dd')}"></p>

これにより、「1週間後」や「1週間前」の日付を動的に計算して表示できます。他にも、月や年単位での加算・減算が可能です。

5. 日付の比較

5. 日付の比較

日付の比較を行う場合も#datesが役立ちます。以下は、現在の日付が特定の日付よりも前か後かを判定する例です。

<p th:text="${#dates.isBefore(today, '2025-01-01')} ? '過去の日付です' : '未来の日付です'"></p>

このコードでは、現在の日付が「2025-01-01」よりも前の場合に「過去の日付です」と表示し、それ以外の場合は「未来の日付です」と表示します。

6. 実践例: 日付を動的に表示する

6. 実践例: 日付を動的に表示する

以下は、実際のテンプレート内で日付を動的に操作する例です。このコードでは、現在の日付、1週間後、1週間前の日付をそれぞれ表示しています。

<p>現在の日付: <span th:text="${#dates.format(today, 'yyyy-MM-dd')}"></span></p>
<p>1週間後の日付: <span th:text="${#dates.format(#dates.addDays(today, 7), 'yyyy-MM-dd')}"></span></p>
<p>1週間前の日付: <span th:text="${#dates.format(#dates.addDays(today, -7), 'yyyy-MM-dd')}"></span></p>

このように#datesを活用することで、テンプレート内での日付操作が簡単になります。

7. 特定の日付要素（年・月・日）を抽出する

7. 特定の日付要素（年・月・日）を抽出する

#datesユーティリティを使えば、日付オブジェクトから「年」だけ、「月」だけといった特定の数値を取り出すことも可能です。画面のレイアウトに合わせて、年と月を別々のタグで囲みたい場合などに重宝します。

• 年を取得: ${#dates.year(today)}
• 月を取得: ${#dates.month(today)}
• 日を取得: ${#dates.day(today)}
• 曜日を取得: ${#dates.dayOfWeek(today)}

例えば、カレンダーのようなデザインを作る際、日だけを大きく表示したいときは th:text="${#dates.day(date)}" のように記述することで、数値のみを簡単に抽出できます。

8. Java 8以降の日付型（LocalDate等）との違い

8. Java 8以降の日付型（LocalDate等）との違い

注意点として、#datesは従来の java.util.Date クラスを対象としたユーティリティです。2026年現在のJava開発で主流となっている java.time.LocalDate や LocalDateTime を操作する場合は、別のユーティリティが必要になります。

最新のJavaの日付API（JSR-310）を使用している場合は、#temporals ユーティリティを使用します。

<!-- LocalDate型などの場合はこちらを使用 -->
<p th:text="${#temporals.format(localDate, 'yyyy-MM-dd')}"></p>

自分のプロジェクトで使われているJavaのデータ型が Date 型なのか、それとも LocalDate 型なのかを確認してから使い分けるようにしましょう。

9. ロケールに応じたフォーマット設定

9. ロケールに応じたフォーマット設定

#dates.format は、第2引数を省略することで、ブラウザの言語設定（ロケール）に合わせた標準的な形式で表示することも可能です。

<!-- ロケールに基づいた標準形式で表示 -->
<p th:text="${#dates.format(today)}"></p>

日本語設定なら「2026/03/31」、英語設定なら「Mar 31, 2026」のように自動で切り替わります。多言語対応（国際化）が必要なアプリケーションを開発する際には、特定のフォーマットを固定せずに、このロケール依存の表示を活用するのがベストプラクティスです。

まとめ

まとめ

本記事では、Thymeleafの#datesユーティリティについて解説しました。#datesを使用することで、日付や時刻の操作がテンプレート内で簡単に行えるようになります。具体的には、日付のフォーマット、現在の日付の取得、日付の加算・減算、さらには日付の比較まで幅広く対応しています。

例えば、日付を「yyyy-MM-dd」形式でフォーマットする方法や、「1週間後」や「1週間前」の日付を動的に計算する方法、さらには日本語形式で日付を表示する方法について詳しく紹介しました。これにより、ユーザーにとって見やすい形で日付を表示することが可能になります。

以下に、今回の記事で紹介したコードを再掲します。自分のプロジェクトで活用してみてください。

<p>現在の日付: <span th:text="${#dates.format(today, 'yyyy-MM-dd')}"></span></p>
<p>1週間後の日付: <span th:text="${#dates.format(#dates.addDays(today, 7), 'yyyy-MM-dd')}"></span></p>
<p>1週間前の日付: <span th:text="${#dates.format(#dates.addDays(today, -7), 'yyyy-MM-dd')}"></span></p>
<p>日付の比較: <span th:text="${#dates.isBefore(today, '2025-01-01')} ? '過去の日付です' : '未来の日付です'"></span></p>
<p>日本語形式の日付: <span th:text="${#dates.format(today, 'yyyy年MM月dd日')}"></span></p>

#datesは、日付を扱うWebアプリケーションでは欠かせない機能です。これを活用することで、バックエンドでの日付処理を減らし、テンプレート側で簡潔に操作できるようになります。

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

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

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

Thymeleafの#datesユーティリティとは何ですか？初心者でも分かるように教えてください

Thymeleafの#datesユーティリティとは、HTMLテンプレート内で日付操作や日付フォーマットを簡単に行うための便利な機能です。Javaのバックエンドで処理せずに、テンプレート側で現在日付の取得やフォーマット変換ができるため、初心者でも扱いやすいのが特徴です。

Thymeleafで現在の日付を表示する方法は？createNowの使い方を知りたいです

現在の日付を取得するには#dates.createNowを使用します。これにより現在日時を取得でき、それをformat関数と組み合わせることで「yyyy-MM-dd」や「yyyy-MM-dd HH:mm:ss」など任意の形式で表示できます。