Thymeleafで日付をフォーマットする方法は？初心者向けガイド

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

「1. Thymeleafで日付をフォーマットする基本的な方法」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

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. カスタムフォーマットを使用する

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

基本の「yyyy-MM-dd」だけではなく、自分が見やすい形や、サイトのデザインに合った形で日付を表示したい場面はよくあります。そんなときに使えるのが「カスタムフォーマット」です。フォーマットとは、「年・月・日・時間をどう並べるか」を指定するルールのことだとイメージしてみてください。

例えば、日本語の画面では「2025年01月27日」のように年・月・日を漢字付きで表示したいことが多いです。その場合は、次のようにフォーマット文字列を指定します。

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

この例では、yyyyが「西暦4桁の年」、MMが「2桁の月」、ddが「2桁の日」を表しており、その間に「年」「月」「日」という文字をそのまま挟んでいます。そのため、画面上には「2025年01月27日」のように、日本語サイトでよく使われるスタイルで日付が表示されます。

同じ考え方で、「2025/01/27」なら'yyyy/MM/dd'、「2025年01月」のように年と月だけを出したいなら'yyyy年MM月'といった形で、用途に合わせてフォーマットを変えることができます。フォーマット文字列を少し変えるだけで見た目が大きく変わるので、「どんなユーザーにとって読みやすいか」を意識しながら書式を選ぶと、画面の使い勝手も良くなります。

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

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

実際のWeb画面では、「いつ登録されたか」「最終更新日時はいつか」など、日付だけでなく時間まで表示したい場面がよくあります。 その場合も、基本はこれまでと同じく#dates.format()を使い、フォーマット文字列の中に「時・分・秒」の書式を追加するだけです。 「HH」「mm」「ss」がそれぞれ時間・分・秒を表す記号だと覚えておくと分かりやすいです。

例えば、次のように書くと、「2025-01-27 15:30:45」のように年月日と時刻をまとめて表示できます。 管理画面やログ表示画面など、正確な日時を確認したい場面でよく使われる形式です。

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

ここで使っているcurrentDateTimeは、コントローラー側から渡される「現在日時」などの値を想定しています。 フォーマット部分の'yyyy-MM-dd HH:mm:ss'のうち、HHが24時間表記の時刻、mmが分、ssが秒です。 もし「時刻だけ」を表示したい場合は'HH:mm'のように指定することもでき、画面の用途に合わせて細かく調整できます。

このように、日付と時間のフォーマットをきちんと整えておくと、ユーザーにも開発者にも分かりやすい画面になります。 特に履歴や予約の情報を扱うシステムでは、「日時をどう見せるか」を意識してフォーマットを選ぶことが大切です。

4. null値に対応する方法

「4. null値に対応する方法」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

4. null値に対応する方法

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

Thymeleafで日付をyyyy-MM-dd形式で表示するにはどうすればいいですか？

Thymeleafでは、#dates.format()を使って日付を簡単にフォーマットできます。日付を「yyyy-MM-dd」のように表示したい場合、該当する書式を指定することで実現可能です。

Spring FrameworkとThymeleafを連携させて日付フォーマットを行うにはどんな設定が必要ですか？

特別な設定をせずに、Spring BootとThymeleafの標準機能だけで日付のフォーマットは可能です。モデルで日付データを渡し、テンプレート側でth:textを使って表示すればOKです。

日本語で日付を「2025年01月27日」のように表示したい場合はどうすればいいですか？

日付フォーマットに「yyyy年MM月dd日」を指定することで、日本語形式の年・月・日付きで表示することが可能です。