Thymeleaf th:ifとは？使い方と条件分岐のコツを解説

Thymeleafのth:ifの使い方

先生と生徒の会話形式で理解しよう

生徒

「Thymeleafで条件によって表示内容を変える方法ってありますか？」

先生

「Thymeleafではth:if属性を使うことで、条件によって要素を表示・非表示にできます。」

生徒

「具体的にどう使うんですか？」

先生

「それでは、基本的な使い方を見てみましょう！」

1. Thymeleafのth:ifとは？基本概念と使い方

Thymeleafのth:ifは、Webページ上で「特定の条件を満たした時だけ表示する」という仕組みを作るための非常に便利な属性です。これをプログラミング用語で条件分岐と呼びます。

例えば、プログラミング未経験の方でもイメージしやすいのが「会員限定メニュー」です。ログインしている人には「ログアウトボタン」を出し、していない人には「ログインボタン」を出すといった切り替えが、このth:ifひとつで実現できます。

最大の特徴は、条件が「偽（当てはまらない）」と判断された場合、そのHTMLタグ自体がブラウザから完全に消えて、存在しなかったことになる点です。これにより、不要な情報をユーザーに見せることなく、スッキリとした画面設計が可能になります。

初心者向けのイメージ例

テストの点数が80点以上なら「合格！」というお祝いメッセージを表示する仕組みを考えてみましょう。


<p th:if="${score >= 80}">おめでとうございます！合格です！</p>

このように、${ }の中に「条件」を書くだけで、表示・非表示を自由自在にコントロールできるのがth:ifの魅力です。

2. th:ifの基本的な使い方【サンプルコード付き】

Thymeleaf（タイムリーフ）で最もよく使われる「条件分岐」が、th:if属性です。プログラミングに慣れていない方でも、「もし〜なら表示する」というシンプルなルールさえ覚えれば簡単に使いこなせます。

基本の書き方と動作イメージ

まずは、ログイン状態によってメッセージを切り替える定番の例を見てみましょう。Java側のプログラムから「isUserLoggedIn（ログインしているかどうか）」という情報を受け取ったと仮定します。


<div th:if="${isUserLoggedIn}">
    <p>ようこそ、ユーザーさん！マイページへ移動できます。</p>
</div>

初心者が押さえておくべきポイント

このコードの最大の特徴は、条件が一致しなかった場合（falseの時）、<p>タグだけでなく、それを囲んでいる<div>要素そのものがHTMLから消滅するという点です。

Java側でのデータの準備も非常にシンプルです。コントローラー（Controller）と呼ばれる橋渡し役のプログラムで、以下のように設定するだけで画面に反映されます。


// 画面に「ログイン済み」という状態を渡す例
model.addAttribute("isUserLoggedIn", true);

このように、th:ifの中に書かれた条件式が正しい（true）と判断された時だけ、ブラウザはそのタグを表示します。余計なコードを読み込ませないため、ページの表示速度やSEOの観点からも非常にクリーンなHTMLを出力できるのがメリットです。

3. th:ifとth:unlessの違いと組み合わせ方

Thymeleafで条件分岐を作る際、最もよく使われるのがth:ifとth:unlessです。一見難しそうですが、日本語の「もし〜なら」と「〜でない限り」と考えると、プログラミング未経験の方でもスムーズに理解できます。

th:if：条件が「正しい（true）」ときに表示する
th:unless：条件が「正しくない（false）」ときに表示する（th:ifの逆）

実際のWebサイトでよくある「ログイン状態による表示の切り替え」を例に、具体的なコードを見てみましょう。


<div th:if="${isLoggedIn}">
    <p>おかえりなさい！マイページはこちらです。</p>
</div>

<div th:unless="${isLoggedIn}">
    <p>ゲストさん、こんにちは。ログインすると便利機能が使えます。</p>
</div>

このコードでは、isLoggedInという箱の中身がtrueなら上のメッセージが、falseなら下のメッセージが表示されます。初心者のうちは「th:ifの反対がth:unless」とセットで覚えておくと、複雑な条件設定もスッキリと整理して書けるようになりますよ。

4. th:ifを活用した実践例【ショッピングサイトのカート表示】

条件分岐の具体的な活用シーンとして、Webサイトでよく見かける「ショッピングカートの表示切り替え」を例に解説します。プログラミングが初めての方でも、「もし〜なら（th:if）」と「そうでなければ（th:unless）」のセットで考えると理解しやすくなります。

まずは、画面の表示を制御するためのJava側のデータ準備（Controllerクラスのイメージ）を見てみましょう。


// カートの中身を判定するための簡単なリスト（List）の例
List<String> cart = new ArrayList<>(); 
// 商品がない場合は空の状態、ある場合は商品名を追加します
model.addAttribute("cart", cart);

次に、このデータを受け取って表示を切り替えるHTML（Thymeleaf）の記述です。初心者の方は、以下のコードをそのままテンプレートとして活用してみてください。


<div th:if="${cart.isEmpty()}">
    <p class="alert alert-info">現在、カートに商品はありません。お買い物をお楽しみください！</p>
</div>

<div th:unless="${cart.isEmpty()}">
    <p>現在のカート状況： <strong><span th:text="${cart.size()}">0</span>点</strong> の商品が入っています。</p>
    <button class="btn btn-primary">購入手続きへ進む</button>
</div>

このコードのポイントは、同じ cart.isEmpty() という判定条件を使いながら、th:if（真のとき表示）と th:unless（偽のとき表示）を使い分けている点です。これにより、ユーザーが商品を入れた瞬間に「空です」という文字が消え、代わりに「購入ボタン」が表示されるという、動的で親切なUIを簡単に作成することができます。

5. まとめ｜th:ifのポイントをおさらい

本記事では、Thymeleafのth:if属性の基本的な使い方と、条件によって要素を表示・非表示にする方法について学びました。th:ifは、条件が真の場合に要素を表示し、偽の場合には要素をレンダリングしません。また、th:unlessを使うことで、条件が偽の場合に要素を表示することもでき、より柔軟なページ構成が可能になります。

実用的な例として、ユーザーのログイン状態や管理者向けの情報の表示、ショッピングカートの中身に応じたメッセージの表示を見てきました。これにより、Webアプリケーションの開発において、ユーザーに適した情報を動的に表示する方法を理解できたでしょう。

以下に、th:ifを利用したサンプルコードを再掲します。


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

<div th:if="${cart.isEmpty()}">
    <p>カートに商品はありません。</p>
</div>
<div th:unless="${cart.isEmpty()}">
    <p>カート内の商品: <span th:text="${cart.size()}"></span>件</p>
</div>

このように、Thymeleafの条件分岐を用いることで、画面の表示を簡単に制御できます。th:ifやth:unlessを活用することで、ユーザーの体験をよりパーソナライズされたものにすることが可能です。今後のWeb開発でぜひ活用してみてください。

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

生徒

「th:ifを使うと、ページの表示を条件付きで切り替えられるんですね！とても便利です。」

先生

「その通りです。特に、動的なWebアプリケーションで役立ちますね。これで、ユーザーの状態に応じた適切な表示が可能になります。」

生徒

「th:unlessを使えば、条件が偽の場合の処理も簡単に実装できますね。」

先生

「はい。これで、条件分岐の理解が深まりましたね。実際のプロジェクトでも活かしてみてください。」