条件分岐（th:switch）を完全ガイド！初心者でもわかる基本的な使い方
新人
「Spring MVCで複数の条件に応じた表示をしたいんですが、どうすればいいですか？」
先輩
「それなら、Thymeleafのth:switchとth:caseを使うと便利だよ。複数の条件分岐が簡単に書けるんだ。」
新人
「th:switchって具体的にどう使うんですか？」
先輩
「じゃあ、基本的な使い方とメリットを順番に説明していこう！」
1. 条件分岐とは？
条件分岐は、特定の条件に基づいてプログラムの処理を分ける仕組みです。Web開発では、ユーザーの状態やデータに応じて表示内容を変えることがよくあります。例えば、ユーザーが管理者かどうかで表示するメニューを変えたり、商品の在庫状況に応じて「在庫あり」「在庫なし」と表示したりする場面があります。
2. th:switchとは何か？
th:switchは、Thymeleafで複数の条件分岐を扱うための属性です。Javaのswitch文と同じように、指定した値に応じて異なるHTML要素を表示できます。条件が多い場合や、読みやすいコードを維持したいときに便利です。
【基本的な構文】
<div th:switch="${status}">
<p th:case="'NEW'">新規登録</p>
<p th:case="'IN_PROGRESS'">処理中</p>
<p th:case="'COMPLETED'">完了</p>
<p th:case="'*'">不明な状態</p>
</div>
この例では、statusが'NEW'なら「新規登録」、'IN_PROGRESS'なら「処理中」、'COMPLETED'なら「完了」が表示されます。th:case="'*'"はデフォルトのケースで、該当する条件がない場合に表示されます。
3. th:switchを使うメリット
- コードの可読性向上: 複数の条件を
th:ifで書くよりもスッキリします。 - メンテナンス性向上: 条件が増えても整理しやすくなります。
- パフォーマンス改善: 適切に使うことでHTMLレンダリング時の無駄を減らせます。
特に、条件が3つ以上ある場合はth:switchを使うことでHTMLが見やすくなり、バグも減ります。Spring MVCでモデルデータを受け取り、条件に応じた動的表示が求められる場面で非常に役立ちます。
4. th:switchを使った基本的な条件分岐の実例
th:switchは、複数の条件に基づいてHTMLの表示内容を切り替えるときに非常に便利です。ここでは、ユーザーの役割（管理者・一般ユーザー・ゲスト）に応じたメッセージを表示する簡単な実例を紹介します。
【コントローラの作成】
@Controller
public class RoleController {
@GetMapping("/user-role")
public String showUserRole(Model model) {
String userRole = "ADMIN"; // ユーザーの役割（例: ADMIN, USER, GUEST）
model.addAttribute("userRole", userRole);
return "user-role";
}
}
【HTMLファイル（user-role.html）の作成】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>ユーザーの役割表示</title>
</head>
<body>
<h2>ユーザーの役割に応じたメッセージ</h2>
<div th:switch="${userRole}">
<p th:case="'ADMIN'">管理者としてログインしています。</p>
<p th:case="'USER'">一般ユーザーとしてログインしています。</p>
<p th:case="'GUEST'">ゲストとしてアクセスしています。</p>
<p th:case="'*'">不明な役割です。</p>
</div>
</body>
</html>
上記のコードでは、コントローラで渡されたuserRoleの値に応じてメッセージが切り替わります。userRoleが"ADMIN"の場合、以下のように表示されます。
管理者としてログインしています。
このようにth:switchを使うと、条件分岐が整理され、コードの可読性が向上します。
5. th:caseの使い方と複数条件の処理
th:caseは、th:switchの中で特定の条件に該当する場合に表示を切り替えるために使用します。複数の値に対して同じ処理を行いたい場合は、th:caseに複数の値をカンマ区切りで指定できます。
【コントローラの作成】
@Controller
public class OrderController {
@GetMapping("/order-status")
public String showOrderStatus(Model model) {
String orderStatus = "SHIPPED"; // 注文のステータス
model.addAttribute("orderStatus", orderStatus);
return "order-status";
}
}
【HTMLファイル（order-status.html）の作成】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>注文ステータス表示</title>
</head>
<body>
<h2>注文ステータス確認</h2>
<div th:switch="${orderStatus}">
<p th:case="'PENDING'">注文受付中です。</p>
<p th:case="'PROCESSING'">注文処理中です。</p>
<p th:case="'SHIPPED','DELIVERED'">注文が出荷済みまたは配送済みです。</p>
<p th:case="'*'">ステータスが不明です。</p>
</div>
</body>
</html>
orderStatusが"SHIPPED"または"DELIVERED"の場合、以下のように表示されます。
注文が出荷済みまたは配送済みです。
このように複数の値に同じ処理を適用できることで、条件分岐を簡潔に書けます。
6. th:switchと他の条件分岐（th:if, th:unless）の違いと使い分け
条件分岐では、th:switch以外にもth:ifやth:unlessが使用できます。それぞれの違いと使い分けを理解することで、より効率的にコードを書くことができます。
【th:switchとth:ifの比較】
- th:switch: 複数の条件を簡潔に書きたいときに有効。
- th:if: 単純な条件や少数の条件分岐に適している。
【例: th:ifを使った場合】
<p th:if="${status == 'NEW'}">新規登録</p>
<p th:if="${status == 'IN_PROGRESS'}">処理中</p>
<p th:if="${status == 'COMPLETED'}">完了</p>
<p th:if="${status != 'NEW' and status != 'IN_PROGRESS' and status != 'COMPLETED'}">不明な状態</p>
【例: th:switchを使った場合】
<div th:switch="${status}">
<p th:case="'NEW'">新規登録</p>
<p th:case="'IN_PROGRESS'">処理中</p>
<p th:case="'COMPLETED'">完了</p>
<p th:case="'*'">不明な状態</p>
</div>
th:switchを使うと、条件が多い場合でもコードが短く、読みやすくなります。
【使い分けのポイント】
- 条件が3つ以上ある場合は
th:switchを推奨。 - 単純な
true/false判定の場合はth:ifとth:unlessが便利。 - コードの可読性とメンテナンス性を重視して選ぶことが大切。
7. th:switchを使う際のよくあるエラーとその対処法
th:switchを使用する際、初心者がつまずきやすいポイントやよくあるエラーについて解説します。これらのエラーを事前に理解しておくことで、開発中のトラブルを未然に防げます。
【エラー1: th:switchの値がnullの場合】
th:switchに渡す値がnullだと、該当するth:caseが見つからず、意図しない表示になります。
<div th:switch="${status}">
<p th:case="'NEW'">新規登録</p>
<p th:case="'IN_PROGRESS'">処理中</p>
<p th:case="'COMPLETED'">完了</p>
<p th:case="'*'">ステータス不明</p>
</div>
対処法: モデルに値を渡す前に、コントローラでデフォルト値を設定するか、HTML内でth:case="'*'を必ず記述しましょう。
【エラー2: th:caseの値が一致しない】
モデルから渡される値とth:caseの値が完全一致しない場合、条件分岐が機能しません。
例: モデルで"Admin"と渡しているのに、HTML側で'ADMIN'と大文字指定している場合。
// コントローラ側
model.addAttribute("userRole", "Admin");
<p th:case="'ADMIN'">管理者</p> <!-- これでは一致しない -->
対処法: 値の大文字小文字を統一するか、toUpperCase()やtoLowerCase()を利用して整えましょう。
【エラー3: th:switch内でth:caseが複数該当する場合】
異なるth:caseで同じ条件を指定すると、意図しない表示が起こります。必ず一意の条件を設定してください。
8. th:switchを使ったベストプラクティスと注意点
th:switchを活用する際のベストプラクティスと、初心者が見落としがちな注意点を紹介します。
【ベストプラクティス1: デフォルトケースを常に書く】
すべてのケースに該当しない場合に備えて、th:case="'*'"を必ず用意しましょう。
<p th:case="'*'">該当する情報がありません。</p>
【ベストプラクティス2: コードの可読性を優先】
条件が多い場合はth:switchを、条件が少ない場合はth:ifを使うことで、コードが読みやすくなります。
【注意点: null値や予期しないデータ型の処理】
モデルにデータが存在しない場合、画面が空白表示になることがあります。Objects.requireNonNull()やデフォルト値を設定して、安定した動作を確保しましょう。
9. 実践！簡単なユーザー権限表示アプリの作成例
ここでは、th:switchを使用して、ユーザーの権限に応じたメッセージを表示する簡単なアプリを作成します。
【ステップ1: コントローラの作成】
@Controller
public class UserController {
@GetMapping("/user-info")
public String showUserInfo(Model model) {
String userRole = "USER"; // 権限: ADMIN, USER, GUEST
model.addAttribute("userRole", userRole);
return "user-info";
}
}
【ステップ2: HTMLテンプレート（user-info.html）の作成】
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>ユーザー情報</title>
</head>
<body>
<h2>権限別メッセージ</h2>
<div th:switch="${userRole}">
<p th:case="'ADMIN'">管理者ダッシュボードへようこそ。</p>
<p th:case="'USER'">一般ユーザーのページへようこそ。</p>
<p th:case="'GUEST'">ゲストアクセス中です。</p>
<p th:case="'*'">権限が不明です。</p>
</div>
</body>
</html>
【ステップ3: 実行結果の確認】
コントローラでuserRoleが"USER"の場合、ブラウザには以下のように表示されます。
一般ユーザーのページへようこそ。
権限を変更すれば、他のメッセージも表示されます。
【ポイント】
- 必ず
th:case="'*'"を用意してエラー回避。 - ユーザー権限などの条件分岐で、
th:switchは特に有効。 - 条件が増えてもコードの見通しが良く、保守がしやすくなる。
この記事を読んだ人からの質問
