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

Thymeleafのth:ifの使い方

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

生徒

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

先生

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

生徒

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

先生

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

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

「1. 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の違いと組み合わせ方

複数の条件を使用する場合、th:ifをth:unlessと組み合わせることができます。th:unlessは、条件が偽の場合に要素を表示します。


<div th:if="${isAdmin}">
    <p>管理者向けの情報です。</p>
</div>
<div th:unless="${isAdmin}">
    <p>一般ユーザー向けの情報です。</p>
</div>

この例では、isAdminがtrueの場合は管理者向けの情報が表示され、falseの場合は一般ユーザー向けの情報が表示されます。

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

「4. th:ifを活用した実践例【ショッピングサイトのカート】」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

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

例えば、ショッピングサイトでカートの中身が空の場合にメッセージを表示し、それ以外ではカートの内容を表示するコードを考えてみましょう。


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

このようにth:ifとth:unlessを活用することで、ユーザーの状況に応じてページの内容を切り替えることができます。

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を使えば、条件が偽の場合の処理も簡単に実装できますね。」

先生

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