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

新人

「Spring MVCでHTMLの表示を条件によって変えたいんですが、どうすればいいですか？」

先輩

「Thymeleafのth:ifやth:unlessを使えば簡単に条件分岐ができるんだ。」

新人

「th:ifとth:unlessって何ですか？どう使うんですか？」

先輩

「それじゃあ、基本的な条件分岐の方法を一緒に見ていこう！」

1. 条件分岐とは？

条件分岐とは、プログラム内で特定の条件が成立したときに、処理の流れを分ける仕組みです。例えば、ユーザーがログインしているかどうかで表示内容を変える場合に使います。HTMLテンプレート内で条件分岐を行うことで、ユーザーごとに異なるコンテンツを表示できます。

2. th:ifとは何か？

th:ifは、条件がtrueのときにHTML要素を表示するためのThymeleafの属性です。Spring MVCで渡されたモデルデータを使って表示を切り替えます。

【コントローラの作成】


@Controller
public class UserController {

    @GetMapping("/status")
    public String showStatus(Model model) {
        boolean isLoggedIn = true; // 仮のログイン状態
        model.addAttribute("isLoggedIn", isLoggedIn);
        return "status";
    }
}

【HTMLファイル（status.html）の作成】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ログイン状態</title>
</head>
<body>
    <h2>ログイン状態確認</h2>
    <p th:if="${isLoggedIn}">ユーザーはログインしています。</p>
    <p th:if="${!isLoggedIn}">ユーザーはログインしていません。</p>
</body>
</html>

このコードでは、isLoggedInがtrueのときに「ユーザーはログインしています。」が表示されます。


ユーザーはログインしています。

3. th:unlessとは何か？

th:unlessは、条件がfalseのときにHTML要素を表示するための属性です。th:ifと逆の働きをするため、条件の否定を簡潔に書きたいときに便利です。

【HTMLファイルでの使用例】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ログイン確認</title>
</head>
<body>
    <h2>ユーザーステータス</h2>
    <p th:if="${isLoggedIn}">ようこそ、ユーザーさん！</p>
    <p th:unless="${isLoggedIn}">ログインしてください。</p>
</body>
</html>

isLoggedInがfalseの場合、以下のように表示されます。


ログインしてください。

th:ifとth:unlessを組み合わせることで、条件に応じた柔軟な表示切り替えが可能です。

4. th:ifを使った条件表示の実例

th:ifを使うと、HTML内で簡単に条件付き表示ができます。ここでは、ユーザーが管理者かどうかを判定して表示内容を変える実例を紹介します。

【コントローラの作成】


@Controller
public class RoleController {

    @GetMapping("/role")
    public String showRole(Model model) {
        String userRole = "admin"; // 仮のユーザー権限
        model.addAttribute("userRole", userRole);
        return "role-status";
    }
}

【HTMLファイル（role-status.html）の作成】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ユーザー権限確認</title>
</head>
<body>
    <h2>ユーザー権限ステータス</h2>
    <p th:if="${userRole == 'admin'}">管理者としてログインしています。</p>
    <p th:if="${userRole != 'admin'}">一般ユーザーとしてログインしています。</p>
</body>
</html>

このコードでは、userRoleが"admin"の場合、以下のように表示されます。


管理者としてログインしています。

userRoleが"user"の場合は次のようになります。


一般ユーザーとしてログインしています。

5. th:unlessを使った条件表示の実例

th:unlessを使うと、条件がfalseのときに表示されます。ここでは、ログイン状態を判定してメッセージを表示する例を示します。

【コントローラの作成】


@Controller
public class LoginController {

    @GetMapping("/login-status")
    public String showLoginStatus(Model model) {
        boolean isLoggedIn = false; // ログイン状態をfalseに設定
        model.addAttribute("isLoggedIn", isLoggedIn);
        return "login-status";
    }
}

【HTMLファイル（login-status.html）の作成】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ログインステータス</title>
</head>
<body>
    <h2>ログイン確認</h2>
    <p th:if="${isLoggedIn}">ようこそ、ユーザーさん！</p>
    <p th:unless="${isLoggedIn}">ログインが必要です。</p>
</body>
</html>

isLoggedInがfalseの場合、画面には以下のように表示されます。


ログインが必要です。

th:ifとの併用で条件分岐がよりわかりやすくなります。

6. th:ifとth:unlessの組み合わせと使い分け

th:ifとth:unlessを組み合わせて使うことで、条件分岐を明確に表現できます。ここでは、ユーザーがプレミアム会員かどうかを判定して、表示内容を切り替える実例を紹介します。

【コントローラの作成】


@Controller
public class MembershipController {

    @GetMapping("/membership")
    public String showMembershipStatus(Model model) {
        boolean isPremium = true; // プレミアム会員フラグ
        model.addAttribute("isPremium", isPremium);
        return "membership-status";
    }
}

【HTMLファイル（membership-status.html）の作成】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>会員ステータス</title>
</head>
<body>
    <h2>会員特典情報</h2>
    <p th:if="${isPremium}">プレミアム会員の特典が利用できます！</p>
    <p th:unless="${isPremium}">通常会員です。アップグレードで特典が利用可能です。</p>
</body>
</html>

isPremiumがtrueの場合、以下のように表示されます。


プレミアム会員の特典が利用できます！

falseの場合は次の通りです。


通常会員です。アップグレードで特典が利用可能です。

【th:ifとth:unlessの使い分けポイント】

条件がtrueのときに表示したい場合はth:ifを使用。
条件がfalseのときに表示したい場合はth:unlessを使用。
コードの可読性を高めるため、明確な条件で使い分けましょう。

7. th:ifとth:unlessを使う際のよくあるエラーとその対処法

th:ifやth:unlessを使用する際、初心者がつまずきやすいエラーとその解決方法を紹介します。

【エラー1: モデル属性が存在しない場合】

モデルに値を設定せずにth:ifやth:unlessで参照すると、何も表示されません。


<p th:if="${isLoggedIn}">ログインしています。</p>

この場合、コントローラでisLoggedInがモデルに追加されていないと、条件は常にfalseとして扱われます。

【対処法】


@Controller
public class LoginController {
    @GetMapping("/login")
    public String showLoginPage(Model model) {
        model.addAttribute("isLoggedIn", true); // モデルに属性を追加
        return "login";
    }
}

【エラー2: 式内のスペルミス】

モデル属性名のスペルミスもよくあるエラーです。


<p th:if="${isLogedIn}">ログインしています。</p> <!-- スペルミス: isLoggedIn -->

【対処法】

モデル属性名が正しいか確認してください。正しいコードは以下の通りです。


<p th:if="${isLoggedIn}">ログインしています。</p>

【エラー3: null値の扱い】

モデル属性がnullの場合、th:ifはfalseとみなします。意図的に表示させたい場合は、コントローラで初期化してください。

8. th:ifとth:unlessを使ったベストプラクティスと注意点

th:ifやth:unlessを使う際のコーディングのコツや注意点を紹介します。

【ベストプラクティス1: 明確な条件を使用する】

条件は簡潔に、可読性を重視しましょう。


<!-- 良い例 -->
<p th:if="${user.isActive}">アクティブユーザーです。</p>

<!-- 悪い例 -->
<p th:if="${user.status == 'ACTIVE'}">アクティブユーザーです。</p>

【ベストプラクティス2: th:ifとth:unlessの使い分け】

th:ifは条件がtrueの場合、th:unlessはfalseの場合に使用してください。同じ条件に対して両方を併用する場合、以下のように整理しましょう。


<p th:if="${user.isPremium}">プレミアム特典が利用可能です。</p>
<p th:unless="${user.isPremium}">通常プランです。</p>

【注意点: 複雑な条件は避ける】

複雑なロジックはコントローラで処理し、テンプレートではシンプルな条件を心がけましょう。

9. 実践！簡単なログイン状態表示アプリの作成例

ここでは、th:ifとth:unlessを用いた簡単なログイン状態表示アプリを作成します。

【1. コントローラの作成】


@Controller
public class LoginController {

    @GetMapping("/status")
    public String showStatus(@RequestParam(defaultValue = "false") boolean isLoggedIn, Model model) {
        model.addAttribute("isLoggedIn", isLoggedIn);
        return "status";
    }
}

【2. HTMLファイル（status.html）の作成】


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ログイン状態</title>
</head>
<body>
    <h2>ログイン状態確認</h2>
    <p th:if="${isLoggedIn}">ようこそ、ログインしています！</p>
    <p th:unless="${isLoggedIn}">ログインが必要です。</p>
    <a th:href="@{/status(isLoggedIn=true)}">ログイン状態で表示</a> |
    <a th:href="@{/status(isLoggedIn=false)}">未ログイン状態で表示</a>
</body>
</html>

【3. 実行結果】

ブラウザで/status?isLoggedIn=trueにアクセスした場合:


ようこそ、ログインしています！

/status?isLoggedIn=falseにアクセスした場合:


ログインが必要です。

【ポイント解説】

クエリパラメータを使ってログイン状態を簡単に切り替え可能。
th:ifとth:unlessの基本的な使い方が実践できます。
リンクを用意することで、ログイン状態を手軽に確認できるようにしています。

まとめ

Thymeleafの条件分岐で実現できる動的表示の重要性

今回の記事では、Thymeleafのth:ifとth:unlessを使った条件分岐の基本を学びました。条件分岐は、ユーザーごとに表示内容を切り替えるために欠かせない仕組みであり、Webアプリケーションの柔軟な画面制御を可能にします。Spring MVCとThymeleafを組み合わせることで、サーバーの状態やモデルデータに応じてHTMLの要素を動的に変化させることができるため、ログイン状態の判定、アクセス権限に応じた非表示処理、メッセージ表示の切り替えなど、さまざまな場面で活用できます。

とくに、th:ifは条件が成立したときだけ要素を表示し、th:unlessはその逆で条件が成立しなかったときに表示するという特徴があります。両方を適切に使い分けることで、複雑な条件でも読みやすいテンプレートを作成できます。Spring BootとThymeleafの組み合わせは構造が明瞭で、テンプレートの可読性が高いことから、実務でも非常に多く利用されています。

条件分岐の理解を深めるためのサンプルコード

記事で紹介した内容を踏まえ、実際に条件分岐の使い方をより明確に理解できるサンプルコードを以下にまとめます。ログイン状態だけでなく、値の有無やフラグの真偽に応じて表示を切り替える例も確認できます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>条件分岐まとめサンプル</title>
</head>
<body>
    <h2>条件による表示切り替え</h2>

    <!-- ログイン状態の分岐 -->
    <p th:if="${isLoggedIn}">ログインしています。</p>
    <p th:unless="${isLoggedIn}">ログインしていません。</p>

    <!-- メッセージ有無の分岐 -->
    <p th:if="${message != null}">メッセージ：<span th:text="${message}"></span></p>
    <p th:unless="${message != null}">メッセージはありません。</p>

    <!-- 数値による分岐 -->
    <p th:if="${count > 0}">カウントが正の値です。</p>
    <p th:unless="${count > 0}">カウントが０または負の値です。</p>
</body>
</html>

こうしたテンプレートは、ユーザーの操作内容やログイン状況、サーバーから返却されるデータの状態に応じて画面の表示を柔軟に変えることができ、Webアプリケーション全体の操作性を大きく向上させます。初めのうちは単純な条件から練習し、少しずつ複数の条件が絡む画面処理にも挑戦すると、より高度な画面制御ができるようになります。

th:if と th:unless を使ううえで押さえておくべき実践ポイント

条件分岐を使う際、コードの読みやすさとHTML構造の維持が非常に重要になります。たとえば、複雑な条件式をテンプレート内に直接書くと読みにくくなるため、コントローラ側で準備したフラグを使うなど、役割を整理しておくとスムーズです。また、単に表示する・しないだけでなく、ボタンの有効化やメニュー表示の切り替えなど、ユーザー体験に直結する部分を条件分岐で制御できるのもThymeleafの強みです。

Web画面では「表示されている項目＝ユーザーが利用できる項目」となることが多いため、セキュリティや利便性を考慮しながら条件分岐を設計することが求められます。ログイン状態、権限レベル、入力値の有無、通知の表示など、実装できる場面は非常に広く、正しく使いこなすことでアプリケーションの品質を高めることができます。

条件分岐の活用で広がる画面設計の可能性

条件分岐は、ただ表示を変えるためだけの機能ではありません。ユーザーにとって必要な情報だけを提示したり、不要な混乱を避けたりするための大切な仕組みでもあります。たとえば、ログイン前とログイン後で表示内容を変更したり、管理者と一般ユーザーで操作可能な項目を変えたり、フォームの入力チェックに応じてエラー表示を切り替えたりと、場面に応じて活躍します。

今後さらにThymeleafを学んでいく中で、th:eachによるループ処理や、th:switchによる条件分岐の発展形などにも触れることで、動的ページ構築の幅は一段と広がります。テンプレートエンジンとしてのThymeleafの理解が深まれば、ユーザーインターフェースの品質も向上し、直感的で扱いやすいアプリケーションを構築できるようになります。

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

生徒：「th:if と th:unless がどう違うのか、やっと理解できました！」

先生：「良かったね。条件が真のときに表示するのが th:if、偽のときに表示するのが th:unless。覚えやすいだろう？」

生徒：「はい！ログイン状態の切り替えなど、実際の画面で役立つ場面が多そうですね。」

先生：「その通り。画面制御はユーザー体験を左右する大切な部分だから、条件分岐をしっかり扱えると開発の幅が広がるよ。」

生徒：「もっと複雑な条件も扱えるように練習してみます！」

先生：「慣れてきたら th:each や th:switch も学んでみるといいよ。次のステップに役立つはずだ。」

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

条件分岐（th:if, th:unless）を完全ガイド！初心者でもわかる基本的な使い方

1. 条件分岐とは？

2. th:ifとは何か？

【コントローラの作成】

【HTMLファイル（status.html）の作成】

3. th:unlessとは何か？

【HTMLファイルでの使用例】

4. th:ifを使った条件表示の実例

【コントローラの作成】

【HTMLファイル（role-status.html）の作成】

5. th:unlessを使った条件表示の実例

【コントローラの作成】

【HTMLファイル（login-status.html）の作成】

6. th:ifとth:unlessの組み合わせと使い分け

【コントローラの作成】

【HTMLファイル（membership-status.html）の作成】

【th:ifとth:unlessの使い分けポイント】

7. th:ifとth:unlessを使う際のよくあるエラーとその対処法

【エラー1: モデル属性が存在しない場合】

【対処法】

【エラー2: 式内のスペルミス】

【対処法】

【エラー3: null値の扱い】

8. th:ifとth:unlessを使ったベストプラクティスと注意点

【ベストプラクティス1: 明確な条件を使用する】

【ベストプラクティス2: th:ifとth:unlessの使い分け】

【注意点: 複雑な条件は避ける】

9. 実践！簡単なログイン状態表示アプリの作成例

【1. コントローラの作成】

【2. HTMLファイル（status.html）の作成】

【3. 実行結果】

【ポイント解説】

まとめ

Thymeleafの条件分岐で実現できる動的表示の重要性

条件分岐の理解を深めるためのサンプルコード

th:if と th:unless を使ううえで押さえておくべき実践ポイント

条件分岐の活用で広がる画面設計の可能性

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

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

th:ifとは何ですか？HTMLテンプレートで条件分岐を実装するにはどうすればよいですか？

th:ifはThymeleafにおいて、条件がtrueのときにHTML要素を表示する属性です。Spring MVCのモデルデータを使って、ログイン状態やユーザー情報などの条件に応じて表示を切り替えることができます。

関連記事: