Thymeleafのth:switchの使い方！th:caseなど条件分岐の書き方

1. th:switchとは？

1. th:switchとは？

Thymeleafのth:switchは、複数の条件をまとめて分岐処理するための属性です。HTMLの中で値を見て、条件に応じて表示する内容を変えたいときに使います。例えば、商品ステータスやユーザーの権限レベルに応じて、表示する内容を切り替えたいときにとても便利です。

条件分岐の書き方として、th:caseを組み合わせて使います。Javaでいうswitch文と似ていて、値に応じて表示を切り替えられます。

2. th:switchの基本的な書き方

2. th:switchの基本的な書き方

基本的な書き方を見ていきましょう。HTMLファイルの中でth:switchを使うときは、条件分岐の対象となる値をth:switchに指定します。そして、分岐条件ごとにth:caseを使います。

以下のサンプルでは、statusという変数の値に応じて表示を切り替えています。

<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」なら「完了」と表示されます。それ以外の値の場合は「その他のステータス」と表示されます。

3. th:switchのポイントと注意点

3. th:switchのポイントと注意点

th:switchを使うときは、必ずth:caseで分岐条件を指定しましょう。th:case="*"は、いわゆる「default」的な役割で、他の条件に当てはまらない場合に表示されます。

また、th:switchの対象となる値は、Javaのオブジェクトや変数、または式を指定できます。もしstatusがnullの場合や、想定外の値の場合もth:case="*"でしっかりカバーすると良いでしょう。

4. よくある使い方の例

4. よくある使い方の例

それでは、th:switchを使った、よくある例を見ていきましょう。例えば、ユーザーの権限レベルを表示する例です。roleという変数があり、値に応じて表示内容を変えます。

<div th:switch="${role}">
    <p th:case="'ADMIN'">管理者ページ</p>
    <p th:case="'USER'">一般ユーザー向けページ</p>
    <p th:case="'GUEST'">ゲスト向けページ</p>
    <p th:case="*">不明な権限</p>
</div>

このように、roleの値に応じてページの内容を切り替えることができます。初心者の方は、変数の値がどのように画面に反映されるかを確かめながら学習すると良いでしょう。

5. th:switchを使うメリット

5. th:switchを使うメリット

複数の条件分岐をth:ifだけで書こうとすると、コードが長くなって読みにくくなります。しかし、th:switchを使えば、まとめてスッキリ書けるため、コードの可読性が向上します。

また、後から条件を追加したり修正する場合にも便利です。特に、条件分岐が多くなるようなシーンではth:switchを活用すると良いでしょう。

6. 実際のJavaコードとの連携例

6. 実際のJavaコードとの連携例

次に、実際のJavaコードとThymeleafのth:switchの連携を見てみましょう。以下のJavaコードは、商品ステータスを設定して画面に渡す例です。

@Controller
public class ProductController {
    @GetMapping("/product")
    public String showProduct(Model model) {
        String status = "IN_PROGRESS";
        model.addAttribute("status", status);
        return "product";
    }
}

そして、product.htmlでは、先ほどのth:switchを使って、statusの値に応じて表示内容を切り替えています。こうすることで、サーバー側で設定した値をもとに動的に表示内容を変えることができます。

7. まとめる前にもう少し！初心者向けのポイント

7. まとめる前にもう少し！初心者向けのポイント

初心者の方にとっては、th:switchの書き方を最初に覚えるのは少しハードルが高く感じるかもしれません。でも、th:ifやth:unlessで何度も条件分岐を書くよりも、th:switchを使った方がずっと簡単に管理できます。

例えば、th:caseの値はシングルクォートで囲むのを忘れないようにしましょう。また、th:case="*"は必ず最後に書くようにすると、条件の抜け漏れを防げます。

ThymeleafはJavaと親和性が高く、HTMLの中に直接条件分岐を書けるのが強みです。th:switchをマスターすれば、より柔軟な画面作りができるようになるでしょう。

8.まとめ

8.まとめ

本記事では、Thymeleafのth:switchを使った条件分岐の書き方について、初心者の方にもわかりやすく丁寧に解説してきました。Thymeleafは、Spring BootなどのJavaベースのWebアプリケーション開発で広く使われているテンプレートエンジンであり、th:switchはHTMLの中で複数条件の分岐をシンプルかつ明確に記述するための便利な属性です。

従来のth:ifやth:unlessだけを使った場合、条件が増えるにつれてコードが煩雑になりやすく、保守性が下がってしまう傾向があります。その点、th:switchとth:caseを使えば、条件ごとの表示を整理して書くことができ、視認性・拡張性・保守性が大幅に向上します。

特に、th:case="*"はJavaのdefaultのように最後のフォールバック条件として使えるため、nullや予期しない値への対処が簡単になります。Webアプリケーションではユーザーの操作やデータベースの状態に応じて表示を変える場面が頻繁にあるため、th:switchは非常に実用的な構文です。

たとえば、以下のようにしてユーザーの種類に応じて画面表示を切り替えることができます。

<div th:switch="${userType}">
    <p th:case="'ADMIN'">管理者用メニューを表示</p>
    <p th:case="'USER'">一般ユーザー用メニューを表示</p>
    <p th:case="'GUEST'">ゲスト用メニューを表示</p>
    <p th:case="*">不明なユーザータイプ</p>
</div>

さらに、Java側でコントローラーから変数を渡す際は、以下のように記述します。

@Controller
public class UserController {
    @GetMapping("/menu")
    public String showMenu(Model model) {
        model.addAttribute("userType", "ADMIN");
        return "menu";
    }
}

このように、Javaで設定した変数に応じて、Thymeleaf側で柔軟に表示を切り替えられます。動的なWebページの作成には欠かせないテクニックであり、th:switchの使い方をマスターすることで、より表現力のあるUIが実現できます。

本記事では「th:switch 使い方」「Thymeleaf 条件分岐」「th:case 初心者向け」「Spring Boot HTML 条件分岐」などのキーワードを意識して、検索エンジンにヒットしやすいSEO対策も施しました。初学者の方でもステップバイステップで理解を深められるよう、基本的な構文から実践的な例までを丁寧に紹介しましたので、これからの開発にぜひお役立てください。