ThymeleafとJavaScriptの条件分岐を完全解説！動的なif文で表示を切り替える方法

Thymeleaf javascriptと条件分岐の組み合わせ方

新人と先輩の会話形式で理解しよう

新人

「先輩、ThymeleafとJavaScriptを組み合わせて条件分岐をしたいんですが、どんな仕組みで動くんですか？」

先輩

「良い質問だね。Thymeleafはサーバー側でHTMLを生成するテンプレートエンジンで、JavaScriptはブラウザで動く。だから、それぞれのタイミングを意識して条件分岐を使い分ける必要があるんだ。」

新人

「なるほど！ということは、サーバーの変数をJavaScriptに渡して、その値でif文を使えば動的な制御ができるということですね？」

先輩

「その通り！それでは、ThymeleafとJavaScriptの条件分岐を組み合わせる基本から見ていこう。」

1. ThymeleafとJavaScriptを組み合わせる基本構造

ThymeleafはSpring Frameworkでよく使われるテンプレートエンジンで、HTML内にサーバー変数を埋め込みながら動的にページを生成します。一方、JavaScriptはクライアント（ブラウザ）で実行されるスクリプト言語です。つまり、Thymeleafは「サーバーで動く」、JavaScriptは「ブラウザで動く」という明確な違いがあります。

この2つを組み合わせることで、サーバー側の変数をJavaScriptの変数として利用できるようになり、条件に応じて動的に画面表示を切り替えることが可能になります。ここでは、Springの@Controllerで値を設定し、それをThymeleafテンプレート内のJavaScriptで受け取る基本例を見てみましょう。


@Controller
public class LogicController {

    @GetMapping("/logic")
    public String logicExample(Model model) {
        model.addAttribute("userRole", "admin");
        return "logic";
    }
}

この例では、コントローラからuserRoleという変数をThymeleafに渡しています。次に、HTML側でこの変数をJavaScriptに取り込み、条件によって異なる表示を行います。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ThymeleafとJavaScriptの条件分岐</title>
</head>
<body>
  <h3>ThymeleafとJavaScriptの組み合わせ例</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var role = [[${userRole}]];
    if (role === 'admin') {
        console.log("管理者としてアクセスしました。");
    } else {
        console.log("一般ユーザーです。");
    }
    /*]]>*/
  </script>
</body>
</html>

このように、th:inline="javascript"を使うことで、Thymeleafがサーバー側の値をJavaScriptの変数として埋め込んでくれます。ページを開くと、ブラウザのコンソールには「管理者としてアクセスしました。」と表示されます。これがThymeleafとJavaScriptの条件分岐連携の基本構造です。

ここでのポイントは、Thymeleafはサーバー側で値を確定させるため、HTML生成時にはすでに条件が判定可能という点です。JavaScript側ではその結果を受け取り、画面操作や表示制御を行う形になります。

2. サーバー変数をJavaScriptで扱う基本（th:inline="javascript" の使い方）

次に、Thymeleafのth:inline="javascript"を使った変数埋め込みの具体的な使い方をもう少し詳しく見ていきましょう。サーバーで設定した変数をJavaScript側で受け取り、if文を使って条件分岐を行うパターンを確認します。

以下のサンプルでは、Springのコントローラから「ユーザーのログイン状態」を渡しています。


@Controller
public class LoginController {

    @GetMapping("/checkLogin")
    public String checkLogin(Model model) {
        boolean isLoggedIn = true;
        model.addAttribute("loggedIn", isLoggedIn);
        return "checkLogin";
    }
}

次に、Thymeleafテンプレート側でこの値をJavaScriptに渡し、ログイン状態に応じて動作を切り替えます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ThymeleafとJavaScriptの連携</title>
</head>
<body>
  <h3>ログイン状態を条件で制御する例</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var loggedIn = [[${loggedIn}]];
    if (loggedIn) {
        alert("ログイン済みのユーザーです。");
    } else {
        alert("ログインが必要です。");
    }
    /*]]>*/
  </script>
</body>
</html>

このコードでは、Thymeleafの[[${loggedIn}]]によって、サーバーで設定した真偽値がJavaScript側に渡されます。ページを開いたときにalertが表示され、「ログイン済みのユーザーです。」と確認できます。

もしloggedInがfalseの場合は、「ログインが必要です。」と表示される仕組みです。このように、サーバー変数をJavaScriptに受け渡すことで、画面の表示や動作を動的に制御できます。

このテクニックは、ログインチェックだけでなく、アクセス権の判定、メニュー表示の切り替え、ボタンの有効／無効など、さまざまなシーンで役立ちます。Thymeleafのth:inline="javascript"を活用することで、Springアプリケーションのフロント側も柔軟に制御できるようになるのです。

次回は、より実践的な条件分岐構文「th:if」や「th:unless」を組み合わせて、サーバーサイドとクライアントサイドで連携する方法を学んでいきましょう。

3. Thymeleafのth:if、th:unlessによる条件分岐の基本

ここからは、Thymeleaf独自の条件分岐構文であるth:ifとth:unlessを使った制御方法を学んでいきましょう。これらは、HTML要素の表示・非表示を動的に切り替えるための非常に便利な仕組みです。

th:ifは「条件が真（true）のときに表示」、th:unlessは「条件が偽（false）のときに表示」という対になる構文です。Springの@Controllerで設定したモデル変数を利用して、ページの一部を条件付きで出力することができます。


@Controller
public class UserController {

    @GetMapping("/user")
    public String userPage(Model model) {
        model.addAttribute("isAdmin", true);
        model.addAttribute("username", "Taro");
        return "userPage";
    }
}

上記のコントローラでは、isAdminという真偽値を設定しています。この値をThymeleafで使うと、HTMLの中で条件に応じた表示を切り替えることができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf条件分岐の基本</title>
</head>
<body>
  <h3>ユーザー情報</h3>

  <p th:text="'ようこそ、' + ${username} + 'さん！'"></p>

  <div th:if="${isAdmin}">
    <p>あなたは管理者です。管理メニューにアクセスできます。</p>
  </div>

  <div th:unless="${isAdmin}">
    <p>一般ユーザーとしてログインしています。</p>
  </div>
</body>
</html>

この例では、th:ifが真のときだけ「管理者向けメッセージ」を表示し、th:unlessが偽のときだけ「一般ユーザー向けメッセージ」を表示します。条件分岐を明確に分けることで、サーバー側の状態を元にHTML構造を動的に制御できるようになります。

Thymeleafの大きな特徴は、通常のHTMLとしても崩れずに表示できる点です。もしテンプレートをブラウザで直接開いても、構文がHTMLコメントとして扱われるため、開発中でもレイアウト確認がしやすいのです。

4. JavaScript内で条件を動的に変化させる方法

次に、JavaScriptで条件を動的に変更する方法を見ていきましょう。Thymeleafの条件分岐はサーバー側で実行されますが、JavaScriptはユーザー操作に応じてクライアント側で制御を行います。つまり、「初期状態はサーバー側で決める」「実行時の変化はJavaScriptで行う」という使い分けがポイントです。

たとえば、Thymeleafから渡された変数をJavaScriptの変数として受け取り、ボタンのクリックによって条件を動的に切り替えることができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptで条件を動的に変更</title>
</head>
<body>
  <h3>条件をJavaScriptで変更する例</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var loggedIn = [[${loggedIn}]];
    /*]]>*/
  </script>

  <button id="toggleBtn">ログイン状態を切り替え</button>

  <script>
    document.getElementById("toggleBtn").addEventListener("click", function() {
        loggedIn = !loggedIn;
        if (loggedIn) {
            alert("ログイン済みになりました！");
        } else {
            alert("ログアウトしました。");
        }
    });
  </script>
</body>
</html>

このように、サーバーから渡された変数をJavaScript側で扱うことで、動的な条件分岐が可能になります。th:inline="javascript"を利用して値を初期化し、その後は通常のJavaScriptのif文で状態を変化させる構造です。

たとえば、ユーザーの操作によってボタンやメニューを動的に切り替える場合にも、この考え方が使えます。サーバー側とクライアント側の役割を分離することで、アプリケーション全体がより柔軟で分かりやすくなります。

5. JavaScriptのif文とThymeleafの条件式を組み合わせる実践例

ここまでで、Thymeleafのth:if／th:unlessによるサーバー側の条件分岐と、JavaScriptのif文によるクライアント側の動的制御を学びました。ここでは、それらを組み合わせた実践的な例を紹介します。

想定シナリオとして、「管理者だけが削除ボタンを操作できる」画面を考えてみましょう。サーバー側ではユーザー権限を判定し、JavaScript側ではボタンクリック時に確認ダイアログを出すようにします。


@Controller
public class AdminController {

    @GetMapping("/dashboard")
    public String dashboard(Model model) {
        model.addAttribute("isAdmin", true);
        return "dashboard";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ThymeleafとJavaScriptの条件分岐実践</title>
</head>
<body>
  <h3>管理者専用操作画面</h3>

  <div th:if="${isAdmin}">
    <button id="deleteBtn">削除する</button>
  </div>

  <div th:unless="${isAdmin}">
    <p>この操作は管理者のみ可能です。</p>
  </div>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var isAdmin = [[${isAdmin}]];
    /*]]>*/
  </script>

  <script>
    if (isAdmin) {
        document.getElementById("deleteBtn").addEventListener("click", function() {
            if (confirm("本当に削除しますか？")) {
                alert("削除が完了しました。");
            }
        });
    }
  </script>
</body>
</html>

この例では、サーバーサイドで管理者権限を判定し、th:ifによってボタンの表示を制御しています。一方、JavaScriptではif (isAdmin)を使い、クリック時の動作を限定しています。

つまり、「HTMLの生成段階での条件分岐」と「実行時の動的条件分岐」を明確に分けて処理しています。これによって、不要なDOM要素を最初から描画しない構成となり、セキュリティとパフォーマンスの両面で優れた実装になります。

ThymeleafとJavaScriptを組み合わせる際には、どの処理をサーバー側で行い、どの処理をクライアント側で動的に行うかを意識することが重要です。条件分岐の役割を整理することで、コードの保守性も大きく向上します。

このように、Thymeleafのth:ifやth:unlessとJavaScriptのif文を適切に使い分けることで、動的で柔軟なWebページを実現できるようになります。

6. @Controllerから値を渡して条件分岐する応用例

ここからは、より実践的な条件分岐の応用例を見ていきましょう。ThymeleafとJavaScriptを組み合わせることで、サーバー側の状態をもとにブラウザ側で動的な処理を実行できます。まずは、Springの@Controllerで複数の値を渡し、その内容によって異なるメッセージやボタンを表示するサンプルを紹介します。


@Controller
public class RoleController {

    @GetMapping("/role")
    public String rolePage(Model model) {
        model.addAttribute("userName", "Hanako");
        model.addAttribute("role", "user");
        model.addAttribute("premium", false);
        return "rolePage";
    }
}

この例では、ユーザー名と権限、プレミアムフラグを渡しています。次に、Thymeleafのテンプレート側で条件分岐を行い、異なるメッセージを出力します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>条件分岐の応用</title>
</head>
<body>
  <p th:text="'ようこそ、' + ${userName} + 'さん！'"></p>

  <div th:if="${role} == 'admin'">
    <p>管理者権限が付与されています。</p>
  </div>

  <div th:if="${role} == 'user'">
    <p>一般ユーザーとしてログイン中です。</p>
  </div>

  <div th:if="${premium}">
    <p>プレミアム会員特典をご利用いただけます。</p>
  </div>

</body>
</html>

このように複数の条件を重ねることで、サーバー側での状態に応じた動的表示が可能になります。さらに、JavaScriptと組み合わせると、ブラウザ操作による動的切り替えも実現できます。

7. JavaScriptで値を変更して画面表示を切り替える仕組み

次に、Thymeleafで受け取ったサーバー値をJavaScriptで操作し、条件に応じて動的に画面を変化させる方法を解説します。サーバーで初期状態を設定し、JavaScriptでその値を切り替えて再描画する構成です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptで動的切り替え</title>
</head>
<body>
  <h3>動的な条件切り替えの例</h3>

  <p id="statusMsg"></p>
  <button id="toggleRole">権限を切り替える</button>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var role = [[${role}]];
    /*]]>*/
  </script>

  <script>
    const msg = document.getElementById("statusMsg");
    const btn = document.getElementById("toggleRole");

    function updateMessage() {
      if (role === "admin") {
        msg.textContent = "管理者モードで操作中です。";
      } else {
        msg.textContent = "一般ユーザーとして閲覧中です。";
      }
    }

    btn.addEventListener("click", function() {
      role = role === "admin" ? "user" : "admin";
      updateMessage();
    });

    updateMessage();
  </script>
</body>
</html>

この例では、サーバーで設定されたroleの初期値をJavaScript変数に代入し、ボタンクリックによって権限を動的に切り替えています。これにより、再描画やページリロードを行わずに、ユーザー体験を向上させる動的な条件分岐が実現できます。

また、JavaScript側で値を変更する際には、DOM操作を通じて必要な箇所だけを更新するのがポイントです。Thymeleafのth:inline="javascript"を使うことで、サーバー変数をそのままクライアントスクリプトで利用できるため、開発が非常にスムーズになります。

8. 条件分岐とonclickイベント・動的レンダリングの組み合わせ

最後に、Thymeleafの条件分岐とJavaScriptのonclickイベントを組み合わせた実践例を見ていきましょう。ボタン操作によって、要素を動的に切り替える処理を行います。


@Controller
public class DynamicController {

    @GetMapping("/dynamic")
    public String dynamic(Model model) {
        model.addAttribute("visible", true);
        return "dynamic";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>onclickと条件分岐の連携</title>
</head>
<body>
  <h3>onclickで動的に表示を切り替える</h3>

  <div id="infoBox" th:if="${visible}">
    <p>このメッセージは現在表示中です。</p>
  </div>

  <button id="toggleBtn" onclick="toggleDisplay()">表示切り替え</button>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var visible = [[${visible}]];
    /*]]>*/
  </script>

  <script>
    function toggleDisplay() {
      visible = !visible;
      const box = document.getElementById("infoBox");

      if (visible) {
        box.style.display = "block";
      } else {
        box.style.display = "none";
      }
    }
  </script>
</body>
</html>

このコードでは、@Controllerから渡された真偽値をもとにThymeleafで初期表示を制御し、その後onclickイベントによってJavaScriptで非表示・表示を切り替えています。Thymeleafがサーバー初期状態を定義し、JavaScriptが動的レンダリングを担う構成です。

このように、「サーバーで条件を定義」「ブラウザで動的切り替え」という分担を行うと、ユーザー操作に即応した柔軟な画面制御が可能になります。たとえば、ボタンの有効・無効やメッセージ表示、入力フォームの制御なども同じ原理で実現できます。

さらに、th:ifやth:unlessといったサーバー側の条件構文を活用すれば、初期状態をセキュアに設定でき、JavaScript側で不要な処理を避けられます。これにより、Thymeleafのテンプレート構造を崩さずに、より安全で柔軟なWebアプリケーションを構築できます。

このような仕組みは、ログイン状態の切り替えやアクセス制御、フォーム入力のバリデーションメッセージなど、あらゆる動的コンテンツに応用可能です。サーバーとクライアントを連携させた条件分岐設計を理解すれば、Thymeleafを使ったフロント開発の幅が大きく広がるでしょう。