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

新人

「先輩、Thymeleafのif文って何ですか？Javaのif文とは違うんですか？」

先輩

「いい質問だね。Thymeleafのif文は、HTMLの中で条件によって表示する内容を切り替えるために使うんだ。Javaのif文と似たような役割だけど、HTMLタグの属性に書くんだよ。」

新人

「なるほど。Thymeleafでif文をどう書くのか、教えてください！」

先輩

「それじゃあ、基本の書き方から順番に見ていこう。」

1. Thymeleafのif文とは？

Thymeleafのif文は、HTMLテンプレート内で表示する内容を条件によって制御するために使うものです。Javaのif文は、プログラムの中で条件分岐するときに使うけれど、Thymeleafのif文はHTMLの中で使います。条件が成り立つ場合だけ、その部分のHTMLがブラウザに表示される仕組みです。

例えば、ユーザーがログインしているときだけ「ようこそ」というメッセージを出す、ログインしていないときは「ログインしてください」と出す、というような場合に便利です。

Java初心者でもThymeleafのif文を覚えれば、Webページをもっと動的に、便利に作れるようになります。Pleiades環境でSpring Bootを使っているなら、必ず役に立つ知識です。

2. if文の基本構文の書き方

それでは、Thymeleafでのif文の基本的な書き方を見てみましょう。Thymeleafでは、th:ifという属性をHTMLタグに書くことで条件分岐を行います。条件がtrueのときだけ、そのHTMLタグが表示されます。

例えば、次のようなHTMLの例を見てください。


<p th:if="${isLogin}">ようこそ、ユーザーさん！</p>

この例では、サーバーからisLoginという変数が渡されていて、isLoginがtrueの場合だけ「ようこそ、ユーザーさん！」というメッセージが表示されます。

実際のコントローラの書き方も見ておきましょう。


@Controller
public class IfSampleController {
    @GetMapping("/if-sample")
    public String showIfSample(Model model) {
        boolean isLogin = true;
        model.addAttribute("isLogin", isLogin);
        return "if-sample";
    }
}

このコントローラでは、isLoginという変数をtrueにしてModelに渡しています。ブラウザで/if-sampleにアクセスすると、HTMLのth:ifが機能して、条件に合う内容だけが表示されます。

もしisLoginがfalseのときは、HTMLのその部分はまったく表示されません。これは「条件が成立しないときはその要素を描画しない」という仕組みで、Webページの見た目をすっきり保てるのでとても便利です。

この基本の構文を覚えれば、他の条件分岐にも応用できます。Pleiades環境でも問題なく動作するので、初心者の方でも安心して試せます。

th:ifでよく使うパターン

変数がnullでないときだけ表示する：th:if="${user != null}"
特定の文字列や数値と一致するときだけ表示：th:if="${status == 'OK'}"
リストや配列が空でない場合だけ表示：th:if="${#lists.isEmpty(list) == false}"

こうしたパターンは、Webページを作るときによく出てきます。コードを少し変えるだけで、柔軟に表示内容を切り替えられるのがThymeleafの魅力です。

3. th:ifの使い方と例

まずは th:if の使い方をもう少し詳しく見てみましょう。th:if は条件が真のときだけそのタグを表示します。

たとえば、年齢が18歳以上なら「成人です」と表示したい場合は、次のように書きます。


<p th:if="${age >= 18}">あなたは成人です。</p>

コントローラでは、Modelにage変数を追加して渡します。


@Controller
public class AgeController {
    @GetMapping("/age-check")
    public String showAge(Model model) {
        int age = 20;
        model.addAttribute("age", age);
        return "age-check";
    }
}

ブラウザでは「あなたは成人です。」と表示されます。もし age が 16 のように18未満なら、その行は出力されません。th:if を使えば条件付き表示が簡単にできるので、初心者でも理解しやすいです。

4. th:unlessの使い方と例

th:unless は th:if の逆で、条件が偽のときに表示されます。「～でないなら表示する」場合に使います。

先ほどの年齢チェックに応じて、「未成年です」と表示したいときは次のように書きます。


<p th:unless="${age >= 18}">あなたは未成年です。</p>

同じコントローラを使えば、18歳未満の場合だけこのメッセージが出ます。

th:unless を使うことで「if ではないとき」を簡潔に表現でき、HTMLの見た目がすっきりします。

5. th:ifとth:unlessの使い分けのポイント

th:if と th:unless は似ていますが、条件の表現が逆になります。分かりやすい実例で使い分けを説明します。

会員かどうかでメッセージを切り替えるときの例を見てみましょう。


<p th:if="${member}">会員様、ようこそ！</p>
<p th:unless="${member}">会員登録してください。</p>

この書き方は、member が true / false の2通りの表示を分けて簡単に実装できます。

それぞれのメリットは次のとおりです：

th:if：条件が真の場合のみ表示。条件に合致する要素だけを出力したいときに使います。
th:unless：条件が偽の場合に表示。否定条件を書くときに便利です。

使い分けの基本は、**肯定的な条件なら th:if、否定的な条件なら th:unless** と覚えておくと使いやすくなります。

使い分けの注意点

肯定的表現が分かりやすい場合は th:if を選びましょう。
「～でない場合」という表現が自然なら th:unless を使うと読みやすくなります。
条件が複雑になるときは Java の変数側で真偽値を持たせて、HTMLはシンプルに書くと保守性が高まります。

このように th:if と th:unless を使い分けることで、テンプレートの可読性が上がり、初心者でも分かりやすく書けます。

6. if文の条件式の書き方のコツ

Thymeleafでif文（th:if）を使うときは、条件式を書きやすくするコツがあります。まずはJava側で必要な値を計算しておき、HTML側ではシンプルな変数だけを使うようにすると、読みやすく保守しやすくなります。

複雑な条件はJavaでまとめておく

たとえば「年齢が18以上かつ会員である場合」など、複雑な条件はJava側で計算し、Thymeleafでは単一の真偽値変数を使うと見やすくなります。


@Controller
public class ConditionController {
    @GetMapping("/special-offer")
    public String offer(Model model) {
        int age = 25;
        boolean isMember = true;
        boolean isEligible = age >= 18 && isMember;
        model.addAttribute("isEligible", isEligible);
        return "offer";
    }
}

HTMLでは、こう書けます：


<p th:if="${isEligible}">特別オファーを利用できます！</p>

このように書くと、Thymeleafテンプレートがすっきりして、あとから読んでも理解しやすくなります。

7. if文を使ったサンプルアプリケーション例

ここでは、if文を使って「ログイン判定と会員特典表示」を行う簡単なサンプルを見てみましょう。Pleiades＋Gradle環境のSpringアプリとして実装します。


@Controller
public class AuthController {
    @GetMapping("/dashboard")
    public String dashboard(Model model) {
        boolean isLogin = true;
        boolean isPremium = false;
        model.addAttribute("isLogin", isLogin);
        model.addAttribute("isPremium", isPremium);
        return "dashboard";
    }
}

対応する dashboard.html は：


<html xmlns:th="http://www.thymeleaf.org">
<body>
    <p th:if="${isLogin}">ログイン状態です。</p>
    <p th:unless="${isLogin}">ログインしてください。</p>
    <div th:if="${isPremium}">
        <p>プレミアム会員向け特典ページへようこそ！</p>
    </div>
</body>
</html>

このサンプルでは、ログイン状態によってメッセージが切り替わり、さらにプレミアム会員なら追加メッセージが表示されます。複数の th:if や th:unless を組み合わせて動的表示を試せます。