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

新人

「Thymeleafでth:ifとth:unlessって何が違うんですか？」

先輩

「どちらも条件によって表示切り替えをする属性だけど、th:ifは条件が真のときに表示、th:unlessは条件が偽のときに表示するんだよ。」

新人

「じゃあ、いつどっちを使えばいいんでしょう？」

先輩

「まずは基本を押さえよう。th:ifとth:unlessの用途や使い方を、それぞれ具体的に見ていこう。」

1. Thymeleafのth:ifとth:unlessの基本的な説明

ThymeleafはSpring Bootで利用されるテンプレートエンジンで、条件分岐を簡単にHTML内に埋め込めます。th:ifは「条件が真(true)なら表示」、th:unlessは「条件が偽(false)なら表示」する属性です。

例えば、ログイン済みのユーザーだけに表示したい要素があるときはth:if="${isLoggedIn}"を使い、非ログイン状態で表示したい要素にはth:unless="${isLoggedIn}"を使うのが基本です。Gradle＋Pleiades環境で@Contollerに値を設定してビューに渡せば、条件に応じて表示が切り替わります。

2. それぞれの属性がどのような場面で使われるかの基本例

では、th:ifとth:unlessを使う典型的な場面を見てみましょう。

● th:if を使う場面

特定の条件が成立したときだけ要素を表示したいときに有効です。例えば、ユーザーが管理者の場合にのみメニューを表示する場合などです。


<div th:if="${isAdmin}">管理者メニュー</div>

この例では、コントローラ側でisAdminをtrueに設定しておくと、そのHTML要素だけ表示されます。

● th:unless を使う場面

条件が成り立たないときに表示したい要素がある場合に最適です。たとえば、商品在庫がないときに「在庫なし」のメッセージを表示するような場面です。


<div th:unless="${inStock}">在庫がありません</div>

ここで、inStockがfalseの場合にだけ、その要素が表示されます。

3. th:ifの使用例とポイント

th:ifは、「条件がtrueなら表示」というシンプルな動作です。初心者にとってわかりやすく、条件に応じた表示切り替えが簡単にできます。以下のような場面でよく使います。

● 管理者だけに表示したいとき


<div th:if="${isAdmin}">管理者専用メニュー</div>

isAdminがtrueの場合のみ「管理者専用メニュー」が表示されます。コントローラでは以下のように設定します。


package com.example.demo.controller;

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

@Controller
public class RoleController {

    @GetMapping("/role")
    public String showRole(Model model) {
        boolean isAdmin = true;
        model.addAttribute("isAdmin", isAdmin);
        return "role";
    }
}

このように、Gradle＋Pleiadesの環境でも、Modelに値を設定してth:ifで表示制御できるようになります。

4. th:unlessの使用例とポイント

th:unlessは、「条件がfalseなら表示」する属性です。否定条件を直感的に書けるため、可読性が高いのが特徴です。以下の状況でよく使われます。

● 非ログイン時にメッセージを表示したいとき


<div th:unless="${isLoggedIn}">ログインしてください</div>

isLoggedInがfalseのときだけ、このメッセージが表示されます。コントローラは以下のように設定します。


package com.example.demo.controller;

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

@Controller
public class LoginController {

    @GetMapping("/loginPrompt")
    public String promptLogin(Model model) {
        boolean isLoggedIn = false;
        model.addAttribute("isLoggedIn", isLoggedIn);
        return "loginPrompt";
    }
}

このように、否定条件を扱う場合にth:unlessを使うと、コードの意味が直感的に伝わります。

5. よくある誤解や間違いの例

初心者がよく間違えやすいポイントを具体例で見ていきましょう。

● th:ifとth:unlessを同時に使うと混乱する例


<div th:if="${isAdmin}">管理者</div>
<div th:unless="${isAdmin}">管理者でない</div>

このように明確に分けておくと意図が伝わりやすいですが、たとえばth:unlessに「!演算子」を付けて混ぜると読みづらくなります。

● 間違いやすい記述パターン


<!-- ❌ 誤った書き方 -->
<div th:if="!${isAdmin}">一般ユーザー</div>
<div th:unless="!${isAdmin}">管理者</div>

このように「!」をth:unlessと組み合わせると、条件の理解が非常に難しくなります。できるだけ「th:if」「th:unless」を単独で使うことで可読性を保ちましょう。

6. どちらを使うべきか？ケース別の判断ポイント

th:ifとth:unless、どちらを使うか迷う場合は、表示したい条件の「真偽」で考えると分かりやすいです。

● ポジティブ条件なら th:if

特定条件が成立したときに要素を表示したいなら、th:ifが自然です。例えば「在庫があるなら購入ボタンを表示」するような場面です。


<div th:if="${inStock}"><button>購入する</button></div>

● ネガティブ条件なら th:unless

条件が成立していないときの表示なら、th:unlessが直感的です。「在庫がないなら「在庫なし」表示」のように、否定の意図が明確になります。


<div th:unless="${inStock}">在庫がありません</div>

● チーム開発では一貫性を重視

プロジェクト全体で一貫したスタイルにすることで可読性が上がります。trueなら表示にth:if、falseなら表示にth:unless、と明確に使い分けると良いでしょう。

7. まとめのサンプルコード例

ここまでで紹介した使い分けを、一つのThymeleafテンプレートとコントローラでまとめてみます。


package com.example.demo.controller;

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

@Controller
public class ItemController {

    @GetMapping("/item")
    public String showItem(Model model) {
        boolean inStock = false;
        boolean isAdmin = false;
        model.addAttribute("inStock", inStock);
        model.addAttribute("isAdmin", isAdmin);
        return "item";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品ページ</title>
</head>
<body>
    <div th:if="${inStock}"><button>購入する</button></div>
    <div th:unless="${inStock}">在庫がありません</div>
    <div th:if="${isAdmin}">管理者向けオプション</div>
</body>
</html>

この例では、在庫あり／なしと管理者条件の両方を簡潔に制御しています。Pleiades＋Gradleで作成したSpring Bootの環境でそのまま動作します。