Javaの値をJavaScriptで使用する方法

Last updated at 2024-06-10Posted at 2024-06-10

やりたいこと

JavaScriptでJavaの値を使用する。
フレームワークはSpringBootで、thymeleafを使用する。

バックエンドであるJavaでデータベースの値を得て、JavaScriptがその値を参照したいとき。

HomeController.java

@GetMapping("/home")
public String view(Model model) {
    model.addAttribute("キー名", 値);
    return "home";
}

キー名を指定してJavaScriptで使用したい値をmodelに格納する。キー名は任意。

home.html

<html xmlns:th="https://www.thymeleaf.org" lang="ja">
<script th:inline="javascript">
const a = /*[[${key名}]]*/"key名";
<script>
</html>

JavaScript内でこのように記述したらaにJavaの値が入る。

Google Maps APIを使用した際にこのやり方を使った。
Google Maps APIはJavaScriptで操作するため、Javaでのデータベースの値を使いたい時に使った。