ThymeleafでJavaScriptを埋め込む（インライン）方法

2022/07/17Java Thymeleaf

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

OS	macOS Catalina 10.15.1
Eclipse	Photon 2018-09
Java	8
Spring Tool Suit	3.9.6
Spring Boot	2.1.13
Thymeleaf	2.1.2

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

ThymeleafでJavaScriptを埋め込む（インライン）方法

今回は、ThymeleafでJavaScriptを埋め込む（インライン）方法をご紹介します。

また、サンプルとして以下のようなプログラムを作成します。ぜひ参考にしてください。

テンプレートファイルにJavaScriptを埋め込む（インライン使用する）
テンプレートファイルで設定した値をJavaScriptに渡す
[色を変える] ボタン押下時に「りんご」の文字色を赤色に変更する

JavaScriptを埋め込む（インライン使用する）

ThymeleafでJavaScriptを埋め込む（インライン使用する）方法は以下のとおりです。

<script> タグに th:inline="javascript" を指定する
テンプレートファイルで設定した値を使用する場合は /*[[${...}]]*/ で記述する

<script type="text/javascript" th:inline="javascript">
  function changeTextColor() {
    document.getElementById(/*[[${elemId}]]*/).style.color = 'red';
  }
</script>

外部のJavaScriptファイルを読み込む方法については、以下の記事を参考にしてください。

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

JavaScriptを埋め込む（インライン）プログラムを実装する

JavaScriptを埋め込む（インライン）プログラムを実装する手順は以下のとおりです。

Controllerクラスを作成する
テンプレートファイルを作成する
動作を確認する

また、フォルダ構成は以下のとおりです。

src/main/java/com.example.controller
 ├─ JsInlineController.java
src/main/resources/templates
 └─ jsinline.html

Controllerクラスを作成する

はじめに、Controllerクラスを作成します。
今回は「JsInlineController」という名前で作成します。

テンプレート変数の elemId にりんごのidを指定し、URLは「/jsinline」、テンプレートファイル名は「jsinline」を指定します。

package com.example.controller;

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

@Controller
public class JsInlineController {
	
	@RequestMapping("/jsinline")
	public String sample(Model model) {
		
		model.addAttribute("elemId", "apple");
		
		return "jsinline";
	}
}

テンプレートファイルを作成する

次に、テンプレートファイルを作成します。
今回は「jsinline」という名前で作成します。

th:onclick="changeTextColor();" でボタン押下時に changeTextColor() を呼び出し、changeTextColor() の処理内で「りんご」の文字色を赤色に変更しています。
また、テンプレートファイルからJavaScriptへの値渡しは /*[[${elemId}]]*/ で行なっています。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ThymeleafでJavaScriptを埋め込む（インライン）方法</title>
<style>
  body {
    background-color: whitesmoke;
    color: #333;
  }
  div {
    margin: 45px 0 0 45px;
  }
  ul {
    list-style: none;
    padding: 0;
  }
</style>
</head>
<body>
  <div>
    <ul>
      <li id="apple">りんご</li>
      <li id="lemon">レモン</li>
      <li id="kiwi">キウイ</li>
      <li id="orange">みかん</li>
    </ul>
    <button th:onclick="changeTextColor();">色を変える</button>
  </div>
<!-- [色を変える] ボタン押下時に「りんご」の文字色を赤色に変更する -->
<script type="text/javascript" th:inline="javascript">
  function changeTextColor() {
    document.getElementById(/*[[${elemId}]]*/).style.color = 'red';
  }
</script>
</body>
</html>

動作を確認する

最後に、ブラウザで「http://localhost:8080/jsinline」にアクセスして動作を確認します。
[色を変える] ボタン押下時に「りんご」の文字色が赤色に変更されたら、動作の確認は完了です。

お疲れさまでした

ThymeleafでJavaScriptを埋め込む（インライン）方法をご紹介しました。
少しでも参考になれば幸いです。

ThymeleafとSpringを一度に学びたくありませんか？

以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。