コントローラーの値をビューに渡す

コントローラーからビューに値を渡すには、次のようにします。

コントローラー

@Controller
public class HelloController {
@RequestMapping("/hoge")
public String index(Model model) {
    model.addAttribute("msg", "Hello, world");
    return "hoge/index";
}

}

ビュー

<p th:text="${msg}"></p>

th:text 属性には、以下のように使用します。

例	内容
th:text="文字列"	文字列を表示します
th:text="${属性名}"	設定した属性名を表示

変数として変数を埋め込むには、次のようにします。

<p>[[${msg}]]</p>

リテラルとして置き換えると、文字列の中に変数を埋め込むことができます。

# Controller
model.addAttribute("name", "Java");

# View
<p th:text="|Hello, ${name}|"></p>

タグの内部のみ利用する変数を指定

次のようにすると、定義されたタグの内部のみ利用できる変数を設定できます。

<div th:with="a=1, b=2">
<p th:text="|${a} + ${b} = ${a + b}|"></p>
</div>

条件演算子

参考演算子を利用するには次のようにします。

<p th:text="${name} == 'Java' ? 'Javaです' : 'Java ではないです'"></p>

条件分岐(true)を使用するには、以下のようにします。

<div th:if="${name} == 'Java'">
<p>Java　です</p>
</div>

条件分岐(false)を使用するには、以下のようにします。

<div th:unless="${name} == 'Java'">
<p>Java　ではないです</p>
</div>

switch を使った分岐

switch を使った分岐を使用するには、次のようにします。

# Controller
model.addAttribute("name", "java");

# View
<div th:switch="${name}">
<p th:case="java" th:text="|${name} です|"></p>
<p th:case="javascript" th:text="|${name} です|"></p>
<p th:case="html" th:text="|${name} です|"></p>
<p th:case="*" th:text="どの値にも属しません"></p>
</div>

どの値にも一致しない場合の出力はth:case="*"を指定します。

オブジェクトを利用する

// Controller
package com.example;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.entity.User;
import org.springframework.ui.Model;

@Controller
public class HelloController {
@RequestMapping("/hoge")
public String index(Model model) {
    User user = new User();
    user.setId(1L);
    user.setName("Jon");
    model.addAttribute("user", user);
    return "hoge/index";
}
}

// View
<p th:text="${user.id}"></p>
<p th:text="${user.name}"></p>

// 以下の方法も値の呼び出しは可
<p th:text="${user['id']}"></p>
<p th:text="${user['name']}"></p>

*{フィールド名}

th:object を設定することで子要素で値を取得する際、*{フィールド名}で取得することができます。

# Controller
package com.example;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.ui.Model;
import com.example.entity.UserData;

@Controller
public class HelloController {
@RequestMapping("/hoge")
public String index(Model model) {
    UserData user = new UserData(1L, "Jon");
    model.addAttribute("user", user);
    return "hoge/index";
}
}

# View
<div th:object="${user}">
<p th:text="*{id}">ID</p>
<p th:text="*{name}">Name</p>
</div>

繰り返し

th:each="要素を格納する変数 : ${繰り返し処理するオブジェクト}"を設定することで繰り返し処理することができます。

# Controller
package com.example;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.ui.Model;
import com.example.entity.UserData;
import java.util.List;

@Controller
public class HelloController {
@RequestMapping("/hoge")
public String index(Model model) {
    List<UserData> users = List.of(
        new UserData(1L, "Jon"),
        new UserData(2L, "Alice"),
        new UserData(3L, "Bob")
    );

    model.addAttribute("users", users);
    return "hoge/index";
}
}

# View
<table>
<tr th:each="user: ${users}">
  <td th:text="${user.id}"></td>
  <td th:text="${user.name}"></td>
</tr>
</table>

繰り返し処理のステータス

ステータス変数を指定することで、現在の繰り返し処理やオブジェクトの状態を表示できます。

# Controller
package com.example;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.ui.Model;
import com.example.entity.UserData;
import java.util.List;

@Controller
public class HelloController {
@RequestMapping("/hoge")
public String index(Model model) {
    List<UserData> users = List.of(
        new UserData(1L, "Jon"),
        new UserData(2L, "Alice"),
        new UserData(3L, "Bob")
    );

    model.addAttribute("users", users);
    return "hoge/index";
}
}

# View
<table>
<thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>INDEX</th>
        <th>COUNT</th>
        <th>SIZE</th>
        <th>CURRENT</th>
        <th>EVEN</th>
        <th>ODD</th>
        <th>FIRST</th>
        <th>LAST</th>
    </tr>
</thead>
<tbody>
    <tr th:each="user, status: ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td>[[${status.index}]]</td>
        <td>[[${status.count}]]</td>
        <td>[[${status.size}]]</td>
        <td>[[${status.current}]]</td>
        <td>[[${status.even}]]</td>
        <td>[[${status.odd}]]</td>
        <td>[[${status.first}]]</td>
        <td>[[${status.last}]]</td>
    </tr>
</tbody>
</table>

ステータス変数は、以下の表を参考にしてください。

変数	内容
index	0から始まる現在のインデックス
count	1から始まる現在のインデックス
size	オブジェクトの長さを表示
current	現在のオブジェクトを表示
even	現在の要素が偶数番目か判定。偶数ならtrue、そうでなければfalse
odd	現在の要素が奇数番目か判定。奇数ならtrue、そうでなければfalse
first	現在の要素が最初かどうか判定。最初ならtrue、そうでなければfalse
last	現在の要素が最後かどうか判定。最後ならtrue、そうでなければfalse

ユーティリティオブジェクト

よく使うクラスを#名前という定数で呼び出すことができます。

ユーティリティオブジェクト	内容
#strings	Stringクラスの定数
#numbers	Numberクラスの定数
#bools	Booleanクラスの定数
#dates	Dateクラスの定数
#objects	Objectクラスの定数
#arrays	Arrayクラスの定数
#lists	Listクラスの定数
#sets	Setクラスの定数
#maps	Mapクラスの定数

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