ThymeleafでJavascriptの処理を記載

Thymeleaf Java

ThymeleafでJavascriptの処理を記載

ThymeleafとJavaScriptを組み合わせて使用する場合、Thymeleafのテンプレートエンジンで生成されたHTML内にJavaScriptを埋め込むことができます。
以下に、ThymeleafとJavaScriptを組み合わせた基本的な例を示します。

HTMLファイル（Thymeleafテンプレート）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>ThymeleafとJavaScriptの例</title>
  <script type="text/javascript">
    // Thymeleafで生成されたデータをJavaScriptで使用する例
    function showMessage() {
      // Thymeleafで設定された変数を取得
      var message = /*[[${message}]]*/ 'デフォルトメッセージ';
      
      // JavaScriptでメッセージを表示
      alert(message);
    }
  </script>
</head>
<body>
  <h1>ThymeleafとJavaScriptの統合</h1>
  <button onclick="showMessage()">メッセージを表示</button>
</body>
</html>

コントローラークラス（SpringBootの場合）

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

  @GetMapping("/example")
  public String example(Model model) {
    model.addAttribute("message", "こんにちは、ThymeleafとJavaScript!");
    return "example"; // Thymeleafテンプレートファイルの名前
  }
}

説明

1. HTMLファイル
/*${message}*/という構文で、Thymeleafで定義された変数messageの値をJavaScriptに渡しています。
showMessage関数が呼び出されると、アラートボックスでメッセージが表示されます。

2. コントローラークラス
@GetMappingで/exampleにアクセスしたときにexample.htmlテンプレートが返され、Thymeleafの変数messageが"こんにちは、ThymeleafとJavaScript!"として設定されます。

このようにして、Thymeleafで生成されたデータをJavaScriptに渡し、動的な処理を行うことができます。