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

新人

「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でそれぞれの変数を表示しています。このように複数の変数を組み合わせて表示することで、より実践的な画面が作れます。