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

Thymeleafのth:ifの使い方

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

生徒

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

先生

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

生徒

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

先生

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

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

Thymeleafのth:if属性は、指定された条件が真の場合に要素を表示します。条件が偽の場合、その要素はレンダリングされません。例えば、ユーザーがログインしている場合のみメッセージを表示するようなケースで役立ちます。

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

th:if属性の基本的な構文を見てみましょう。以下は、変数isUserLoggedInがtrueの場合にメッセージを表示する例です。


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

このコードでは、${isUserLoggedIn}がtrueの場合、<p>ようこそ、ユーザーさん！</p>が表示されます。falseの場合は、この<div>要素自体がレンダリングされません。

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を活用した実践例【ショッピングサイトのカート】

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


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

先生

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