<th:if>と<th:unless>で条件分岐する方法を完全ガイド！初心者でもわかるSpring MVC表示切替
新人
「Spring MVCのテンプレートで、条件によって表示を切り替えるにはどうすればいいですか？」
先輩
「Thymeleafを使ってるなら、th:ifやth:unlessを使う方法があるよ。」
新人
「th:ifとth:unlessって、どういう違いがあるんですか？」
先輩
「じゃあ、まずその2つが何をするものかから説明していこうか。」
1. th:ifとth:unlessとは何か
th:ifとth:unlessは、Spring MVCでよく使われるテンプレートエンジン「Thymeleaf」でHTML表示を条件によって制御するための属性です。
th:ifは、条件が真（true）のときに、そのHTML要素を表示します。一方のth:unlessは、条件が偽（false）のときに表示されます。
たとえば、ユーザーがログインしていれば名前を表示し、そうでなければ「ログインしてください」と表示したい場合、次のように記述します。
<p th:if="${user != null}">ようこそ [[${user.name}]] さん</p>
<p th:unless="${user != null}">ログインしてください</p>
このように、Java側のデータを元にHTMLの表示を切り替えることができます。ifは肯定的な条件、unlessは否定的な条件で使い分けると便利です。
なお、開発環境はPleiadesを使用し、ビルドはGradle、コントローラは@Controllerで作成されたプロジェクトを前提にしています。
2. どのような場面で使うのか
実際の業務アプリケーションでは、次のような場面でth:ifやth:unlessが活躍します。
- ユーザーがログインしているかどうかで表示を切り替えたい
- 管理者だけにボタンやリンクを表示したい
- エラーメッセージが存在する場合だけ表示したい
以下は、エラーメッセージが存在するときだけ表示する例です。
<div th:if="${errorMessage != null}" class="alert alert-danger">
[[${errorMessage}]]
</div>
逆に、メッセージが無いときに何か案内を出すようなケースでは、th:unlessが役立ちます。
<div th:unless="${errorMessage != null}" class="alert alert-info">
問題はありません
</div>
このように、Thymeleafのth:ifとth:unlessを使い分けることで、Spring MVCのWebアプリケーションにおける柔軟な画面制御が実現できます。
テンプレートの表示切替にJavaScriptを使わなくても済むため、保守性や可読性の向上にもつながります。
3. th:ifの基本的な使い方とコード例
th:ifは、ある条件が真（true）のときに、そのHTML要素を表示させるためのThymeleafの属性です。Spring MVCと組み合わせることで、サーバーサイドの値をもとに表示制御ができます。
たとえば、ユーザーが存在する場合にだけ「ようこそ」というメッセージを表示する例は以下のように記述します。
<p th:if="${user != null}">
ようこそ [[${user.name}]] さん
</p>
このth:if属性により、userがnullでないときだけ、この段落要素が出力されます。
表示させたい要素は、<div>、<p>、<span>など何でも構いません。条件の部分には、${user != null}のようにSpEL（Spring Expression Language）で記述します。
Spring MVCでは、以下のようにPleiadesで作成したコントローラで値をModelに追加しておけば、テンプレート側でその値を使ってth:ifで制御できます。
@Controller
public class SampleController {
@GetMapping("/welcome")
public String welcome(Model model) {
User user = new User();
user.setName("田中一郎");
model.addAttribute("user", user);
return "welcome";
}
}
このように、Spring MVC + Thymeleafの構成では、サーバー側で条件をコントロールし、HTML上でその状態に応じた表示切替が簡単に実現できます。
4. th:unlessの基本的な使い方とコード例
th:unlessは、条件が偽（false）のときにHTML要素を表示する属性です。th:ifの逆の意味になります。
よくある使い方として、ログインしていないユーザーにだけ表示する案内文があります。以下のように記述します。
<div th:unless="${user != null}">
ログインが必要です。アカウントをお持ちでない方は登録してください。
</div>
このように、userが存在しない（つまりnull）場合に、該当のHTMLが表示されます。th:ifと組み合わせることで、状況に応じた柔軟な表示が可能になります。
Spring MVCで値がnullの状態をコントロールすることで、表示切り替えのロジックをフロント側に任せすぎることなく、サーバーサイド主導の設計ができます。
5. 条件によってHTMLの表示を切り替える具体例（if/unlessの使い分け）
ここでは、th:ifとth:unlessの両方を使って、ログイン状態によって画面の表示を切り替える完全な例を紹介します。
まず、Springの@Controllerで、ログイン中のユーザーが存在する場合と、しない場合でModelに値を渡すコードです。
@Controller
public class LoginController {
@GetMapping("/dashboard")
public String dashboard(Model model) {
// ログインしていない場合は null を渡す（ログアウト状態を想定）
User user = null; // 実際はセッションや認証処理に基づく
model.addAttribute("user", user);
return "dashboard";
}
}
そして、HTMLテンプレートでは以下のようにth:ifとth:unlessを使い分けて、表示を切り替えます。
<div th:if="${user != null}">
<p>こんにちは、[[${user.name}]] さん。ダッシュボードへようこそ。</p>
</div>
<div th:unless="${user != null}">
<p>ログインしていないため、ダッシュボードは表示できません。</p>
</div>
このようにth:ifとth:unlessを使い分けることで、ユーザーの状態に応じた動的な表示制御が簡単に行えます。
特に、Spring MVCでのWeb開発においては、テンプレートの可読性とメンテナンス性を保ちながら表示を制御できる点が大きな利点です。
JavaScriptに頼らず、Thymeleafのみで画面制御を完結できる点は、セキュリティの観点からも有効です。
6. よくある間違いや注意点（ifとunlessの併用ミスやnullチェックなど）
th:ifとth:unlessを使用する際に初心者が陥りやすい注意点として、「条件式の書き方」と「併用時の重複表示」があります。
まず、よくあるのがth:ifとth:unlessを同時に使って、同じ要素を両方に書いてしまうミスです。次のようなコードは避けましょう。
<div th:if="${user != null}">ログイン中です</div>
<div th:unless="${user == null}">ログイン中です</div>
この例では、条件が似ていても、表現に矛盾がある場合や、誤解を生みやすくなります。どちらか一方に限定して使用するほうが安全です。
また、nullチェックを忘れることで、テンプレートが正常に動作しなくなることがあります。以下のように、必ずnullかどうかを明示的に条件に含めましょう。
<p th:if="${user != null}">こんにちは [[${user.name}]] さん</p>
このように記述することで、Spring MVCでコントローラから渡されたオブジェクトがnullでもエラーにならず、安全に表示制御ができます。
特に、Pleiades環境でのSpring開発では、テンプレートエラーが画面表示に直結するため、慎重なnullチェックと条件文の設計が求められます。
7. 実際の画面表示の例とコードの対応（HTMLの出力結果イメージ）
ここでは、Thymeleafテンプレートに記述したth:ifやth:unlessが、実際にどう出力されるかの具体的な例を紹介します。
以下は、ログイン済みユーザーが存在する場合に表示されるテンプレートのHTMLです。
<p th:if="${user != null}">ようこそ [[${user.name}]] さん</p>
そして、Springコントローラで次のようなコードを返していた場合、
model.addAttribute("user", new User("佐藤健"));
ブラウザ上には次のように表示されます。
ようこそ 佐藤健 さん
逆に、ユーザーがnullだった場合、th:unlessで用意したHTMLが表示されます。
<p th:unless="${user != null}">ログインしてください</p>
そのときの画面は以下のようになります。
ログインしてください
このように、th:ifとth:unlessの条件によって、ブラウザに表示される内容を柔軟に制御できます。Spring MVCのコントローラでModelに渡した値が条件式に反映されることで、安全かつ動的な表示切替が可能になります。
8. 学習を深めるためのアドバイス（公式ドキュメントや練習方法など）
th:ifやth:unlessといったThymeleafの基本的な属性は、Spring MVCを用いたWeb開発において非常に重要です。これらを正しく使いこなすためには、公式の情報源を活用しながら継続的に練習することが大切です。
まずは、Thymeleaf公式サイトのドキュメントを読むことをおすすめします。日本語訳はないこともありますが、サンプルコードが豊富で非常に参考になります。
次に、実際にPleiadesでSpringプロジェクトを作成し、@ControllerクラスからModelを渡し、th:ifやth:unlessをテンプレートで試してみましょう。Gradleで依存関係を管理すれば、ビルドや実行も簡単です。
おすすめの練習方法は次の通りです。
- ログイン画面の表示切替を作ってみる
- エラー表示と通常表示の分岐を作ってみる
- 管理者と一般ユーザーの表示差分を試す
また、Spring公式のガイド（Spring Guides）にも、Thymeleafを使ったプロジェクトのサンプルが掲載されています。学習段階では、まずは公式のコードをそのまま写して動かしてみるのが一番の近道です。
重要なのは、「なぜこのように表示が切り替わるのか」という仕組みを意識しながら学習を進めることです。テンプレートエンジンの裏側でSpringがどのようにデータを扱っているかを理解すれば、開発効率が大きく向上します。
最後に、Spring 表示切替 学習方法として、エラーメッセージ表示やログイン状態の分岐処理を題材にした実践的なトレーニングを継続することが、確実なスキルアップにつながります。
この記事を読んだ人からの質問
