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

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

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

Thymeleafの#datesユーティリティは、テンプレート内で日付を操作するためのツールです。日付のフォーマット、現在の日付の取得、日付の加算や減算など、幅広い機能を提供しています。 まず、現在の日付をフォーマットして表示する基本的な例を見てみましょう。

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

このコードでは、変数todayに現在の日付が格納されていると仮定し、フォーマットされた日付（例: 2025-01-27）が表示されます。

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. まとめ

本記事では、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アプリケーションでは欠かせない機能です。これを活用することで、バックエンドでの日付処理を減らし、テンプレート側で簡潔に操作できるようになります。