新人と先輩の会話形式で理解しよう

新人

「Thymeleafで日付や文字列を変数に入れて画面に表示したいのですが、どんな風に書けばいいですか？」

先輩

「Spring MVCの@Controllerでモデルに日付や文字列をセットして、Thymeleafのテンプレートで表示するのが基本の方法です。」

新人

「なるほど。でも日付ってJavaのDate型とかあるけど、そのまま表示できるんですか？」

先輩

「そのままだと見づらいこともあるので、フォーマットをかけて表示することも多いですよ。まずは基本の変数代入の考え方から説明しますね。」

1. Thymeleafとは何か簡単に説明

ThymeleafはJavaで作られたサーバーサイドのテンプレートエンジンで、主にSpring MVCのWebアプリケーションでHTMLを動的に生成するために使われます。Pleiades環境でGradleを利用して開発するときも、@Controllerで渡したデータを簡単にHTMLに反映できるのが特徴です。

HTMLの中に特別な属性を追加し、変数表示や繰り返し処理、条件分岐などが簡単にできます。今回はその中でも、日付や文字列を変数に代入して表示する方法に絞って解説します。

2. 変数に日付や文字列を代入する基本的な考え方

Spring MVCの@Controllerでは、Modelオブジェクトを使って日付や文字列などの値をビューに渡します。例えば、現在の日付やユーザー名などをモデルにセットし、Thymeleafテンプレートでその変数を表示する流れです。

このとき、JavaのDate型やString型のデータをモデルにセットし、テンプレートの中でth:textを使って画面に出力します。日付はそのままだと読みにくいことが多いため、後でフォーマットして見やすくする方法もあります。

変数のセットは、model.addAttribute("変数名", 値)の形で行い、テンプレート側では${変数名}でアクセスします。この仕組みはPleiadesで作ったGradleプロジェクトでも同じです。

3. Springの@Controllerで日付や文字列をモデルに追加する具体例

Spring MVCの@Controllerでは、Modelオブジェクトを使って日付や文字列をビューに渡します。以下は、現在の日付とユーザー名の文字列をモデルにセットする具体例です。


import java.util.Date;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SampleController {

    @GetMapping("/sample")
    public String showSample(Model model) {
        Date now = new Date();
        String userName = "山田太郎";

        model.addAttribute("currentDate", now);
        model.addAttribute("userName", userName);

        return "sampleView";
    }
}

この例では、currentDateに現在の日時（Dateオブジェクト）を、userNameに文字列をセットしています。これらの変数はThymeleafテンプレートで利用可能になります。

4. Thymeleafテンプレートで変数を使って日付や文字列を表示する方法

Thymeleafテンプレートでは、th:text属性を使ってモデルの変数をHTMLに表示します。日付や文字列も同様に扱えます。以下は先ほどのコントローラから渡されたcurrentDateとuserNameを表示する例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日付と文字列表示サンプル</title>
</head>
<body>
    <h2>ユーザー情報</h2>
    <p>ユーザー名：<span th:text="${userName}">名前</span></p>
    <p>現在日時：<span th:text="${currentDate}">日付</span></p>
</body>
</html>

このテンプレートでは、文字列のユーザー名とJavaのDate型の現在日時をそのまま表示しています。Date型はtoStringメソッドで変換された文字列が表示されますが、見やすさのためにフォーマットをかけるのが一般的です。

5. 日付のフォーマット（SimpleDateFormatを使った例）

JavaのSimpleDateFormatクラスを使って日付を好きな形式に変換し、文字列としてモデルにセットする方法があります。こうすることで、Thymeleafのテンプレートで見やすい日付を表示できます。


import java.text.SimpleDateFormat;
import java.util.Date;

@GetMapping("/sample")
public String showSample(Model model) {
    Date now = new Date();
    String userName = "山田太郎";

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
    String formattedDate = sdf.format(now);

    model.addAttribute("currentDate", formattedDate);
    model.addAttribute("userName", userName);

    return "sampleView";
}

この例では、現在日時を「2024年06月11日 15:30:45」のような形式の文字列に変換しています。テンプレート側はフォーマット済み文字列をそのまま表示すればよいので、記述は簡単です。


<p>現在日時：<span th:text="${currentDate}">日付</span></p>

この方法は、日付の表示を柔軟に制御できるため、実務でよく使われます。Pleiadesで作成したGradleプロジェクトでも問題なく動作します。

6. 実践例：日付と文字列を組み合わせて画面に表示する応用例

ここでは、日付と文字列を組み合わせて画面に表示する応用的な例を紹介します。Spring MVCのコントローラで日付をフォーマットし、ユーザー名やメッセージとともにモデルにセットします。


import java.text.SimpleDateFormat;
import java.util.Date;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AdvancedSampleController {

    @GetMapping("/advancedSample")
    public String showAdvancedSample(Model model) {
        Date now = new Date();
        String userName = "佐藤花子";
        String message = "こんにちは、Thymeleafの世界へようこそ！";

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
        String formattedDate = sdf.format(now);

        model.addAttribute("currentDate", formattedDate);
        model.addAttribute("userName", userName);
        model.addAttribute("message", message);

        return "advancedSampleView";
    }
}

このコントローラでは、現在日時をフォーマットし、ユーザー名とメッセージをセットしています。Thymeleafテンプレートでこれらを組み合わせて表示します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>応用サンプル</title>
</head>
<body>
    <h2>ユーザー情報</h2>
    <p>ユーザー名：<span th:text="${userName}">名前</span></p>
    <p>現在日時：<span th:text="${currentDate}">日付</span></p>
    <p>メッセージ：<span th:text="${message}">メッセージ</span></p>
</body>
</html>

テンプレートはシンプルで、th:textでそれぞれの変数を表示しています。このように複数の変数を組み合わせて表示することで、より実践的な画面が作れます。

7. よくあるエラーとその対処法（日付表示での注意点など）

日付や文字列をThymeleafで扱う際に起こりやすいエラーと対処法を紹介します。

日付が表示されない・nullになる

原因として、コントローラで日付変数をモデルにセットし忘れている、または変数名がテンプレートと一致していない場合があります。必ずmodel.addAttributeで変数をセットし、テンプレートの変数名と合わせましょう。

日付のフォーマットが期待通りに表示されない

JavaのSimpleDateFormatの書式が間違っている場合があります。書式指定子は厳密なので、例えば「yyyy-MM-dd」などの基本書式をまず試しましょう。また、タイムゾーンが異なる場合は正しく日時が表示されないこともあるため注意が必要です。

型エラーが出る場合

Thymeleafで変数の型が合わない場合は、コントローラで渡す際にStringに変換しておくと解決しやすいです。特に日付は直接Date型を渡すより、フォーマットした文字列に変換して渡すのが安全です。

エラー発生時は、ログを確認し、変数の有無や型、名前の一致を重点的にチェックしてください。Pleiades環境でも同様にログが重要な情報源となります。

8. 今後の学習へのアドバイス

今回はThymeleafで日付や文字列を変数に代入し、画面に表示する方法について解説しました。Spring MVCの@Controllerでモデルに値をセットし、Thymeleafのth:textで表示するのが基本的な流れです。

日付はJavaのSimpleDateFormatを使ってフォーマットすると、ユーザーにわかりやすい表示ができます。フォーマット済みの文字列を渡すことで、テンプレート側の記述がシンプルになるメリットもあります。

実践的な開発では、今回の応用例のように複数の変数を組み合わせて使うことが多いため、今回の内容をしっかり身につけてください。

次のステップとしては、Thymeleafの繰り返し処理や条件分岐などの機能も学ぶと、さらに表現力豊かな画面作成が可能になります。

Pleiades＋Gradle＋Spring MVCの環境で開発を続けながら、今回の知識を活かして実践的なアプリケーション作りに挑戦してみてください。

まとめ

今回の記事で学んだ全体像の振り返り

この記事では、Thymeleafを使って日付や文字列を変数として扱い、Spring MVCの画面に表示する基本的な流れを丁寧に確認してきました。 Javaで作られたWebアプリケーションでは、いきなりHTMLに値を書き込むのではなく、まずコントローラ側でデータを用意し、それをテンプレートエンジンであるThymeleafに渡して表示する、という考え方がとても重要です。この考え方を理解することで、画面表示と処理の役割がはっきり分かれ、読みやすく保守しやすいコードを書くことができるようになります。

特に初心者の方がつまずきやすいのが、「変数はどこで作られて、どこで使われているのか」という点です。今回の例では、Spring MVCの@Controllerの中でModelオブジェクトを使い、日付やユーザー名、メッセージといった値をモデルに追加しました。その後、Thymeleafテンプレート側では th:text を使って、その変数を画面に表示しました。この一連の流れを理解できると、Thymeleafの基本操作がぐっと身近に感じられるようになります。

日付を文字列として扱う重要性

日付の扱いについても重要なポイントを学びました。 JavaのDate型はそのままでも表示できますが、実際のWeb画面では少し見づらく感じることが多いです。そのため、SimpleDateFormatを使って日付を分かりやすい形式の文字列に変換し、モデルにセットする方法を紹介しました。この方法を使うことで、Thymeleaf側では特別な処理をしなくても、整った日付表示が簡単に実現できます。

実務の現場でも、日付はほぼ必ずと言っていいほど扱う要素です。登録日、更新日、ログイン日時など、さまざまな場面で日付が使われます。今回学んだ「コントローラでフォーマットしてから渡す」という考え方は、今後の開発でも何度も役に立つ基本スキルになります。

まとめとしてのサンプル構成イメージ

最後に、今回の記事内容を踏まえたシンプルな構成イメージをもう一度整理しておきます。実際の開発でも、以下のような流れを意識すると理解しやすくなります。


@GetMapping("/summarySample")
public String summarySample(Model model) {
    String userName = "学習者";
    String message = "Thymeleafの基本が理解できました";

    model.addAttribute("userName", userName);
    model.addAttribute("message", message);

    return "summaryView";
}


<p>名前：<span th:text="${userName}">名前</span></p>
<p>コメント：<span th:text="${message}">メッセージ</span></p>

このように、コントローラで値を用意し、Thymeleafで表示する、という基本の形をしっかり身につけておくことで、少しずつ複雑な画面や処理にも対応できるようになります。

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

生徒

「最初はThymeleafって難しそうだと思っていましたが、コントローラで変数を作って渡す、という流れが分かってきました。日付も文字列にしてから渡せばいいんですね。」

先生

「そうですね。まずはその基本の流れを体に覚えさせることが大切です。変数の受け渡しが理解できると、画面表示で困ることが一気に減りますよ。」

生徒

「日付のフォーマットも、画面側で頑張るより、Java側で整えておく方が分かりやすいと感じました。」

先生

「その気づきはとても大事です。これからは繰り返し表示や条件分岐も出てきますが、今日学んだ変数の考え方が土台になります。少しずつ試しながら、自分の手で動かして覚えていきましょう。」

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

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

Thymeleaf（タイムリーフ）とは一体どのようなものですか？初心者の学習方法についても教えてください。

Thymeleafは、Java言語で開発されたサーバーサイド用のテンプレートエンジンです。主な役割は、Spring MVCなどのWebアプリケーションフレームワークと連携して、HTMLを動的に生成することにあります。初心者の方は、まずHTMLの中に特別な属性（th:textなど）を書き込むことで、Java側のプログラムから渡されたデータがどのように画面に反映されるのか、その基本的な仕組みから学ぶのが効率的です。Pleiadesなどの開発環境でGradleプロジェクトを作成し、実際に手を動かしながら@Controllerからデータを渡す練習を積み重ねることで、動的なWebページ作成の基礎を習得できます。

Thymeleaf 変数に日付や文字列を代入する例を初心者向けにわかりやすく解説