SpringBoot + Thymeleafで、JavaScriptに変数を埋め込む方法

はじめに

こんにちは、新卒2年目の岡崎です。エキサイトHDアドベントカレンダー2024の5日目を担当します。

今までの記事はこちらをご覧ください。

さて。今回は、SpringBoot + Thymeleafで、JavaScriptに変数を埋め込む方法を紹介します。

環境

Java 試しに23を使っていますが、21でも問題ないです。

openjdk version "23.0.1" 2024-10-15
OpenJDK Runtime Environment Corretto-23.0.1.8.1 (build 23.0.1+8-FR)
OpenJDK 64-Bit Server VM Corretto-23.0.1.8.1 (build 23.0.1+8-FR, mixed mode, sharing)

gradle

------------------------------------------------------------
Gradle 8.11.1
------------------------------------------------------------

Build time:    2024-11-20 16:56:46 UTC
Revision:      481cb05a490e0ef9f8620f7873b83bd8a72e7c39

Kotlin:        2.0.20
Groovy:        3.0.22
Ant:           Apache Ant(TM) version 1.10.14 compiled on August 16 2023
Launcher JVM:  23.0.1 (Amazon.com Inc. 23.0.1+8-FR)
Daemon JVM:    /Users/hiromi.okazaki/.sdkman/candidates/java/23.0.1-amzn (no JDK specified, using current Java home)
OS:            Mac OS X 14.7 aarch64

SpringBoot

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/

 :: Spring Boot ::                (v3.4.0)

依存関係

build.gradleに以下の設定がない場合は、追加してください。

 dependencies {    
    // SpringBootの設定
    implementation 'org.springframework.boot:spring-boot-starter'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    
    // SpringBootでThymeleafを使うための設定
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

実装

今回の目標は、Controllerで設定した変数を、コンソールで表示することです。

Controller

まずは、Controllerで変数の設定を行います。今回はsampleMessageという変数に、hello worldを値としてセットしました。

実装例は以下です。

@Controller
@RequiredArgsConstructor
@RequestMapping("sample")
public class SampleController {
    @GetMapping
    public String getSample(
            Model model
    ) {
        model.addAttribute("sampleMessage", "hello world");

        return "page/sample/index";
    }
}

html

次にhtmlの実装を行います。

resources以下を、今回は以下の構成にしました。

resources
|
 -- templates
     |
     -- pages
          |
            -- sample
                |
                -- index.html

index.htmlの実装は以下の通りです。

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="UTF-8">

    <script th:inline="javascript">
        const sampleMessage = /*[[${sampleMessage}]]*/"sampleです";

        console.log(sampleMessage);
    </script>
</head>

<body>
    sample pageです
</body>

</html>

実装の解説です。今回はThymeleafを使い、Controllerでモデルにセットした値をコンソールに表示します。 JavaScriptで変数を使うため、scriptタグにth:inline="javascript"を設定します。

<script th:inline="javascript">
    // 中略
</script>

scriptタグの中で変数を使う場合、/*[[${ }]]*/の中に変数をセットします。今回は変数名をsampleMessageとしているので、/*[[${sampleMessage}]]*/となります。

sampleMessageはイミュータブルな値としたかったので、constを使いました。 const sampleMessage = /*[[${sampleMessage}]]*/;だけだと、初期値がないと判断されるため、'const' variable without initializer is not allowedというエラーメッセージが出ます。

したがって、初期値をセットする必要があります。 /*[[${ }]]*/"ここに初期値をセットする"とすれば、初期値を設定できます。

最後にアプリケーションを起動し、指定したエンドポイントにアクセスします。