Thymeleafに作ったHTML内のscriptタグ(Javascript)にSpring Bootから渡した変数を埋め込む

JavaLearning

Javascriptで変数を受け取る

<script>タグにth:inline=”javascript”を指定します。
<script>タグ内の/*[[${変数名}]]*/で受け取ります。

<script type="text/javascript" th:inline="javascript">
            const variable = /*[[${variable}]]*/;
            console.log(variable);
</script>

Controllerクラス

Spring Boot側のコントローラークラスは、modelで変数を渡してあげるだけです。

import javax.servlet.http.HttpServletRequest;

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

@Controller
public class Controller {

    @GetMapping(value="/test")
    public String javascriptVariableTest(Model model) {
        model.addAttribute("variable", "変数");
        return "index";
    }
}

まとめ

今回はSpring BootからJavascriptが利用するNode.jsサーバのURLを指定したいために作ったものの備忘です。
Javascriptへ変数を渡すこと自体はそんなに難しくありませんでしたが、渡した変数を利用して文字連結をする際の動きはクセがありそうでした。
文字連結をする場合はSpring Bootから渡した変数をそのまま受け止めてから連結するのが良さそうでした。

[良かった書き方]
const serverDomain = /*[[$[serverDomain]]]*/;
const serverPort = /*[[serverPort]]*/;
const serverUrl = "wss://" + serverDomain + ":" + serverPort;


[悪かった書き方]
const serverUrl = "wss://" + /*[[${serverDomain}]]*/ + ":" + /*[[${serverPort}]]*/;