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

生徒

「Thymeleafで日付を表示するときに、フォーマットを変更する方法はありますか？例えば、年や月をわかりやすく表示したいです。」

先生

「もちろんです！Thymeleafには、日付をフォーマットするための便利な機能があります。Spring Frameworkと一緒に使うことで、さらに簡単に日付を操作できますよ。」

生徒

「具体的にどうすればいいのか、ぜひ教えてください！」

先生

「それでは、基本的な方法から応用例まで詳しく説明していきましょう！」

1. Thymeleafで日付をフォーマットする基本的な方法

Thymeleafで日付を見やすい形に整えるには、th:textと一緒に#dates.format()を使うのが基本です。このメソッドを使うことで、開発者が自由に日付の表示形式を変えられるようになります。例えば、年月日の順番を入れ替えたり、ゼロ埋めをしたりなど、用途に合わせて柔軟に変更できます。

下の例は、もっともよく使われる「yyyy-MM-dd」形式（例：2025-01-27）で今日の日付を表示するサンプルです。初めてThymeleafで日付を扱う方にも直感的で分かりやすい書き方になっています。


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

この例では、コントローラー側でtodayという変数に日付が渡されていることを想定しています。実際のテンプレートでは、他のフォーマットに変えるだけで簡単に見た目を調整できるため、Webアプリや業務システムでも頻繁に使われる便利な書き方です。「どのように表示すれば読みやすいか」を意識しながらフォーマットを選ぶと、画面の印象も大きく変わってきます。

2. カスタムフォーマットを使用する

カスタムフォーマットを使用すれば、年月日や時間の順序を自由にカスタマイズできます。例えば、日本語の形式で日付を表示したい場合、以下のように記述します。


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

これにより、日付が「2025年01月27日」のように表示されます。この形式は、日本語のウェブサイトでよく使われる表記です。

3. 時間を含めた日付のフォーマット

日付だけでなく、時間も一緒に表示したい場合は、以下のようにフォーマットを設定します。


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

このコードでは、currentDateTimeに現在の日時が設定されていることを想定しています。「2025-01-27 15:30:45」のように、日時がわかりやすく表示されます。

Spring FrameworkやThymeleafを使った Webアプリ開発の全体像をやさしく理解したい人には、この入門書が定番です。

Spring Framework超入門をAmazonで見る

※ Amazon広告リンク

4. null値に対応する方法

日付の値がnullの場合にエラーを防ぐためには、th:ifやデフォルト値を設定する方法があります。以下のコードはその例です。


<p th:text="${date != null ? #dates.format(date, 'yyyy-MM-dd') : '日付未設定'}"></p>

このコードでは、dateがnullでない場合にフォーマットを適用し、nullの場合は「日付未設定」というデフォルト値を表示します。

5. ロケールを利用した多言語対応

ロケールを利用することで、多言語対応のフォーマットが可能です。例えば、以下のように記述すると、指定したロケールに基づいて日付がフォーマットされます。


<p th:text="${#dates.format(today, 'EEEE, MMMM d, yyyy', 'en_US')}"></p>

このコードでは、「Monday, January 27, 2025」のように英語形式で日付が表示されます。多言語対応が必要なプロジェクトにおいて、非常に役立つ機能です。

6. 日付フォーマットの使用例

以下は、実際にThymeleafを使ったテンプレート内で日付フォーマットを使用する例です。リスト形式で複数の日付を表示しています。


<ul>
    <li th:each="event : ${events}" th:text="${#dates.format(event.date, 'yyyy-MM-dd')}"></li>
</ul>

ここでは、eventsというリスト内の各イベントの日付をフォーマットして表示しています。このように、繰り返し処理の中でも簡単に日付フォーマットを利用できます。

まとめ

本記事では、Thymeleafを使った日付フォーマットの方法について詳しく解説しました。#dates.format()を利用した基本的な日付の表示方法から、カスタムフォーマット、時間を含むフォーマット、多言語対応のロケール設定、null値への対策まで、多様なケースを学びました。これらの知識を活用すれば、ユーザーにとって見やすい日付表示を簡単に実現できます。

また、リスト形式や条件付きでの表示方法も紹介しました。これにより、動的なWebアプリケーションでの応用範囲が広がり、Thymeleafの便利さをさらに感じられるようになります。以下にもう一度サンプルコードを掲載しますので、参考にしてください。


<p th:text="${#dates.format(today, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(today, 'yyyy年MM月dd日')}"></p>
<p th:text="${currentDateTime != null ? #dates.format(currentDateTime, 'yyyy-MM-dd HH:mm:ss') : '日時未設定'}"></p>
<ul>
    <li th:each="event : ${events}" th:text="${#dates.format(event.date, 'yyyy-MM-dd')}"></li>
</ul>

これらのコードをプロジェクトに組み込むことで、より魅力的で機能的なテンプレートを作成することができるでしょう。

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

生徒

「今回の記事で、日付をフォーマットする方法がとてもよくわかりました！特に、日本語形式や多言語対応の設定が面白かったです。」

先生

「それは良かったです。日付の表示はどんなWebアプリケーションでも使われる重要な要素ですから、しっかり覚えておくと役立ちますよ。」

生徒

「はい！次は自分のプロジェクトでカスタムフォーマットやロケールを試してみます。」

先生

「素晴らしいですね！試してみて、また質問があればいつでも聞いてください。」