ThymeleafでJavascriptの外部ファイルを読み込む方法

Java Thymeleaf

ThymeleafでJavascriptの外部ファイルを読み込む方法

ThymeleafでJavaScriptの外部ファイルを読み込むには、scriptタグを使用してリソースのパスを指定します。
Thymeleafの@{}構文を使うと、URLのパスが自動的に適切なものに変換されます。
以下は、その方法の例です。

例

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript読み込みの例</title>
  <!-- 外部JavaScriptファイルの読み込み -->
  <script src="/js/script.js"></script>
  <!-- Thymeleafを使用して外部JavaScriptファイルを読み込む -->
  <script src="@{/js/script.js}"></script>
</head>
<body>
  <h1>JavaScriptの外部ファイル読み込み例</h1>
</body>
</html>

説明

  • src="/js/script.js" は、相対パスで指定した場合です。

開発環境によっては正しく動作しない場合があります。

  • src="@{/js/script.js}" は、Thymeleafの構文を使用してURLを正しく解決します。

これにより、アプリケーションのコンテキストルートが自動的に追加され、正しいパスが生成されます。

これで、ThymeleafテンプレートでJavaScriptの外部ファイルを適切に読み込むことができます。