1. ThymeleafとJavaScriptの連携の基本

Thymeleaf（タイムリーフ）は、JavaのWebフレームワークSpringと相性がいいテンプレートエンジンで、HTMLにサーバー側の変数を埋め込むことができます。JavaScriptと連携すると、サーバーから渡した値をフロントエンドでそのまま使って、動的に表示や処理を変化させられます。

開発環境はpleiades＋Gradle、@Controllerを使ったSpringプロジェクトを前提にしています。Bootstrapなど余計なライブラリは使わず、純粋にThymeleafとJavaScriptだけで実装します。

2. JavaScriptで条件分岐を行う基本的な仕組み

JavaScriptの条件分岐は、if文や三項演算子を使います。たとえば、数値や文字列に応じて処理を切り替えるときに便利です。


<!DOCTYPE html>
<html>
<head><title>条件分岐サンプル</title></head>
<body>
  <script>
    let score = 75;
    if (score >= 80) {
      console.log("合格です！");
    } else if (score >= 60) {
      console.log("ぎりぎり合格");
    } else {
      console.log("残念、不合格です");
    }
  </script>
</body>
</html>

この例では、scoreに応じてコンソールに出力を変えています。Thymeleafと組み合わせれば、サーバーから渡されたscoreで画面表示も制御できます。

3. ThymeleafからJavaScriptへ値を渡して条件分岐するサンプル

まずはコントローラでサーバー側の数値や文字列を用意し、ThymeleafでJavaScriptに渡して条件分岐する仕組みを作ります。Gradleとpleiades環境で作った@ Controllerクラスがベースです。


@Controller
public class ConditionController {
    @GetMapping("/check")
    public String check(Model model) {
        model.addAttribute("score", 85);
        model.addAttribute("status", "active");
        return "check";
    }
}

次にcheck.htmlでth:inline="javascript"を使い、JavaScript変数として値を受け取ります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>条件チェック</title></head>
<body>
  <script th:inline="javascript">
    let score = [[${score}]];
    let status = '[[${status}]]';
    if (score >= 80 && status === 'active') {
      console.log("高得点でアクティブです");
    } else {
      console.log("条件に合いません");
    }
  </script>
</body>
</html>

scoreが80以上かつstatusが“active”なら「高得点でアクティブです」とコンソールに表示されます。これでサーバーから渡された値で条件制御ができます。

4. よく使う条件分岐の具体例と使い方

ここでは、実務でよく登場する条件分岐の具体例を紹介します。入力チェックやメッセージ切り替えなど、初心者でも使いやすいパターンです。

ユーザー権限による表示切り替え

管理者(admin)か一般ユーザー(user)かによってボタンの表示を切り替える例です。


@Controller
public class RoleController {
    @GetMapping("/role")
    public String role(Model model) {
        model.addAttribute("role", "admin");
        return "role";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>権限チェック</title></head>
<body>
  <script th:inline="javascript">
    let role = '[[${role}]]';
    if (role === 'admin') {
      document.write("<button>管理者メニュー</button>");
    } else {
      document.write("<p>一般ユーザーメニュー</p>");
    }
  </script>
</body>
</html>

入力値の必須チェック

フォーム送信時にJavaScript側で入力が空白かどうかをチェックする例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>必須チェック</title></head>
<body>
  <input id="name" placeholder="名前を入力"/>
  <button id="btn">送信</button>
  <script>
    document.getElementById("btn").addEventListener("click", function(){
      let name = document.getElementById("name").value;
      if (!name) {
        alert("名前は必須です");
      } else {
        console.log("入力OK:", name);
      }
    });
  </script>
</body>
</html>

フラグの切り替え例

サーバーからBoolean値を渡し、ON／OFFを切り替えるシンプルな例です。


@Controller
public class FeatureController {
    @GetMapping("/feature")
    public String feature(Model model) {
        model.addAttribute("enabled", true);
        return "feature";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>機能フラグ切替</title></head>
<body>
  <script th:inline="javascript">
    let enabled = [[${enabled}]];
    document.write(enabled ? "<p>機能はONです</p>" : "<p>機能はOFFです</p>");
  </script>
</body>
</html>

Boolean型の変数を受け取り、三項演算子で表示を変えています。

5. 条件分岐を活用する際の注意点

条件分岐を使うときは、サーバー側とJavaScript側で変数の型や値の一致に注意が必要です。たとえば文字列と数値を比較すると予期しない結果になることがあります。また、ユーザー入力やサーバーから渡された値が空やnullのときに想定外の動作にならないようにチェックを入れましょう。

さらに、th:inline="javascript"で変数を埋め込むとき、値にシングルクォートや特殊文字が含まれるとJavaScriptがエラーになります。必要ならth:utextやエスケープ処理を使うなどの対策が必要です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>注意点サンプル</title></head>
<body>
  <script th:inline="javascript">
    let input = '[[${userInput}]]';
    if (typeof input !== 'string' || !input.trim()) {
      console.log("入力が無効です");
    } else {
      console.log("入力OK:", input);
    }
  </script>
</body>
</html>

この例ではtrim()を使って、空白のみの場合にも「入力が無効です」と判断しています。こうした前処理が品質向上に役立ちます。

6. 実際のプロジェクトでの活用例

実際の開発では、たとえば「注文数が閾値を超えたら注意メッセージを出す」「ログインユーザーがゲストなら購入ボタンを非表示にする」などの場面で条件分岐が活躍します。ここでは注文数チェックの例をご紹介します。


@Controller
public class OrderController {
    @GetMapping("/order")
    public String order(Model model) {
        model.addAttribute("orderCount", 12);
        return "order";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>注文数チェック</title></head>
<body>
  <div id="alert"></div>
  <script th:inline="javascript">
    let orderCount = [[${orderCount}]];
    let alertEl = document.getElementById("alert");
    if (orderCount > 10) {
      alertEl.textContent = "注文数が多いので在庫確認してください";
    } else {
      alertEl.textContent = "注文受付しました";
    }
  </script>
</body>
</html>

このように、orderCountの値に応じて画面に表示するメッセージを切り替えることで、ユーザーに分かりやすいフィードバックができます。