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

新人

「先輩、Thymeleafで if else ってどうやって書くんですか？Java の if else と同じですか？」

先輩

「Java の if else と考え方は同じだけど、Thymeleaf では HTML 属性で書くんだ。th:if と th:unless を使って条件分岐させて、'else 相当' を表現するよ。」

新人

「なるほど。実際に書いてみないとピンとこないので、見せてください！」

先輩

「いいね！では、基本構文から順番に解説していこう。」

1. Thymeleaf の if else 条件分岐とは？

Thymeleaf の条件分岐では、th:if や th:unless 属性を使います。Java の if else と同じように、条件によって表示／非表示を切り替えます。テンプレート内で動的に表示内容をコントロールできるため、ユーザー状態に応じた画面表示ができます。

例えば、ログイン済みなら「ログアウト」を、未ログインなら「ログイン」リンクを表示する、といった用途に使えます。Java で書くよりも直感的に HTML にするのがポイントです。

開発環境は Pleiades＋Gradle、@Controller を使い、余計なライブラリは使わずに書いていきます。

2. 基本構文の書き方とポイント

基本構文では、th:if 属性と併せて別要素に th:unless を使い、else 相当を表現します。

以下が基本構文の例です。


<p th:if="${isLogin}">ログアウト</p>
<p th:unless="${isLogin}">ログイン</p>

コントローラ側では、Model に isLogin という boolean 値を渡します。


@Controller
public class LoginController {
    @GetMapping("/login-btn")
    public String showButton(Model model) {
        boolean isLogin = false;  // 未ログイン状態
        model.addAttribute("isLogin", isLogin);
        return "login-btn";
    }
}

この構成で、/login-btn にアクセスすると、未ログイン時は「ログイン」が表示され、ログイン状態なら「ログアウト」となります。

ポイント整理

th:if は条件が true のときのみ表示
th:unless は条件が false のときのみ表示
（Java の else に近い使い方）
コードが読みやすくなるよう、変数名は boolean 型でシンプルに

3. th:ifを使った条件分岐の例

まずは th:if を単独で使った実例を見てみましょう。たとえば、ユーザーの年齢によって表示内容を切り替える場合は次のようになります。


成人向けコンテンツを表示します。

コントローラ側では以下のように値を渡します：


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

この場合、16歳なので“成人向けコンテンツ”は表示されず、空欄になります。条件分岐の基本はこれだけなので、初心者でもすぐに使えます。

4. th:unlessとの違いと組み合わせ例

th:unless は th:if の逆の働きをします。条件が偽のときに表示されます。先ほどの例と組み合わせてみましょう。


成人向けコンテンツを表示します。
未成年のため、閲覧できません。

このように両方使えば、Java の if else のような動きになります。HTML を明確に分けて書けるので可読性も高まります。

5. th:if else風の実装テクニック

Thymeleaf では Java のような else を直接書けないので、th:if＋th:unless の組み合わせで擬似的に if else を作ります。応用的な書き方も紹介します。

例：ログイン時と未ログイン時のボタン表示


<div>
    <button type="button" th:if="${isLogin}">ログアウト</button>
    <button type="button" th:unless="${isLogin}">ログイン</button>
</div>

また、ネストした条件分岐でより多様な表示切り替えも可能です：


<div th:if="${isLogin}">
    <p>こんにちは、<span th:text="${username}">ユーザー</span>さん！</p>
    <p th:unless="${isPremium}">プレミアム会員登録を検討してください。</p>
</div>
<div th:unless="${isLogin}">
    <p>まだログインしていません。</p>
</div>

この構成なら、ログイン・未ログイン・プレミアム会員といった複数の条件を組み合わせて柔軟に対応できます。初心者でも少しずつ段階を踏んで応用できるようになるでしょう。

6. if elseを活用したサンプルアプリケーション例

ここからは、Thymeleaf の if else 条件分岐を活用した具体的なサンプルアプリケーション例を見てみましょう。今回は「会員情報ページ」を例にして、ログイン状態や会員ランクによって表示内容を切り替えます。


<div>
    <p th:if="${isLogin}">ようこそ、<span th:text="${username}">ゲスト</span>さん！</p>
    <p th:unless="${isLogin}">ログインしてください。</p>
</div>
<div th:if="${isLogin}">
    <p th:if="${isPremium}">プレミアム会員特典をご利用ください！</p>
    <p th:unless="${isPremium}">プレミアム会員登録をおすすめします。</p>
</div>

このサンプルでは、isLogin でログイン状態を判定し、さらに isPremium でプレミアム会員かどうかを切り替えています。初心者でも、このサンプルを実際に Pleiades で作って動かすと、Thymeleaf の if else 条件分岐の流れがよく分かるはずです。

7. 初心者が練習するときのポイント

初心者の方が if else 条件分岐を練習するときのポイントをまとめます。

ポイント１：変数の状態を明確にする

条件分岐では、Model に渡す変数の値をしっかり確認することが大切です。例えば、isLogin や isPremium の真偽値がどうなっているか、Controller のコードを丁寧にチェックしましょう。

ポイント２：ブラウザ表示をすぐ確認

条件分岐は見た目で結果が分かるので、Pleiades でサーバーを起動してブラウザで表示結果をすぐ確認しましょう。小さな条件でも正しく動いているか確認するのが大切です。

ポイント３：小さなサンプルから始める

いきなり複雑な条件を書こうとせず、最初は th:if だけのサンプルを作るのがおすすめです。その後、th:unless を追加して動きの違いを比べると、if else 条件分岐の仕組みがスムーズに理解できます。

8. 記事のポイント整理

ここまで、Thymeleaf の if else 条件分岐の書き方と活用法について解説してきました。th:if と th:unless の組み合わせで、Java の if else と同じように条件による表示切り替えができることが分かったと思います。

また、サンプルコードを通して、初心者の方でもすぐに動かせる例を紹介しました。Pleiades で Gradle プロジェクトを作成し、Controller で boolean 型の変数を使って表示を切り替えるだけで、動的な Web ページが作れます。

最後にポイントとして、条件分岐は Model で渡す変数の状態が大切です。コードを書くだけでなく、ブラウザで実際に表示を確認しながら学習を進めると、理解がぐっと深まります。

ぜひ、この記事を参考にして、Thymeleaf の if else 条件分岐を実践してみてください。シンプルな条件分岐から始めて、自分なりに条件を工夫するうちに、Web アプリケーションの柔軟な表示切り替えがどんどんできるようになります。初心者の方も、ぜひチャレンジしてくださいね！

まとめ

Thymeleaf の if else 条件分岐をしっかり振り返る

ここまでの記事では、Thymeleaf における if else 条件分岐の考え方と、実際の書き方、さらに実務や学習で役立つ活用例までを順番に解説してきました。 Thymeleaf は Java の if else 構文をそのまま書くのではなく、 th:if と th:unless という HTML 属性を使って条件分岐を表現する点が大きな特徴です。この仕組みを理解することで、HTML テンプレートの中で表示・非表示を柔軟に切り替えられるようになります。

特に初心者の方にとって重要なのは、「Java の if else と同じ発想で考えてよい」という点と、「else は th:unless で表現する」というルールを押さえることです。この二つを理解するだけで、ログイン状態による表示切り替えや、年齢・権限・会員種別といった条件分岐がスムーズに書けるようになります。

また、Thymeleaf の if else 条件分岐は、 Controller 側で Model に渡す値と密接に関係しています。表示が切り替わらない場合は、HTML だけを見るのではなく、 Controller で渡している boolean 値や数値がどのような状態になっているかを確認することが大切です。画面とサーバー側のコードをセットで見る習慣をつけることで、条件分岐の理解は一段と深まります。

if else 条件分岐が活きる場面

Thymeleaf の if else 条件分岐は、実際の Web アプリケーションで非常に多くの場面に登場します。代表的なのは、ログイン済みか未ログインかによる表示切り替えや、管理者・一般ユーザーといった権限ごとの表示制御です。さらに、プレミアム会員かどうか、入力値が存在するかどうかなど、画面を分かりやすくするための条件分岐にも頻繁に使われます。

以下は、記事全体の内容を振り返る意味で、よく使われる if else 条件分岐の基本形をまとめたサンプルです。実際のプロジェクトでも、そのまま応用しやすい形になっています。


<div>
    <p th:if="${isLogin}">ログイン中です。</p>
    <p th:unless="${isLogin}">未ログイン状態です。</p>
</div>

<div th:if="${isLogin}">
    <p th:if="${isPremium}">プレミアム会員向けの情報を表示します。</p>
    <p th:unless="${isPremium}">通常会員向けの情報を表示します。</p>
</div>

このように、条件を小さく分けて書くことで、 HTML の構造が分かりやすくなり、後から修正や拡張を行う際にも迷いにくくなります。 if else 条件分岐は「一度書いたら終わり」ではなく、アプリケーションの成長に合わせて調整されていくものです。そのため、読みやすさを意識した書き方を心がけることが重要です。

初心者がつまずきやすいポイントの整理

初心者の方が Thymeleaf の if else 条件分岐でつまずきやすいポイントとして多いのは、条件式そのものよりも、値の受け渡しに関する部分です。 Model に値を入れ忘れていたり、 boolean の true と false が想定と逆になっていたりすると、正しく表示が切り替わりません。

そのため、条件分岐を使う際は、「Controller でどんな値を渡しているか」「今その値は true なのか false なのか」を常に意識することが大切です。小さなサンプルを作って、値を一つずつ変えながら表示を確認する練習は、理解を深めるうえでとても効果的です。

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

生徒

「Thymeleaf の if else って難しそうだと思っていましたが、 th:if と th:unless の役割が分かると、意外とシンプルなんですね」

先生

「そうですね。 Java の if else と同じ考え方で、表示を切り替えているだけだと理解すると楽になります」

生徒

「Controller から渡す値が重要だという点も、実際に動かしてみてよく分かりました」

先生

「そこに気づけたのは大きいですね。画面だけでなく、サーバー側の処理も一緒に見ると、条件分岐の理解が一段深まります」

生徒

「まずは簡単な if 分岐から練習して、少しずつ条件を増やしていこうと思います」