はじめに
SpringBootで設定した値をJavaScriptに渡す際に、少しばかり、つまずいたため備忘録がてら記録しておこうと思います。
SpringBootとJavaScriptを用いた場合には、非常にあるあるな事象だと思うので、ご参考になれば幸いです。
ちなみに、Thymeleafでは、このことを「 JavaScriptナチュラルテンプレート 」と呼ぶようです。
ControllerからJavaScriptに値を渡す方法
以下のようにModelに登録してある値をJavaScriptに渡したいとします。
@GetMapping("/index")
public String getIndex(EasyHouseholdForm form, Model model) {
model.addAttribute("form", form);
return "sample/index";
}
これを渡す方法はThymeleafで以下のようにします。
<script th:inline="javascript">
const form = /*[[${form}]]*/"form";
console.log(form);
</script>
ポイントとしては、<script>タグのth:inline属性の値にjavascriptを設定し、/*[[${渡したい値}]]*/とすることでJavaからJavaScriptに値を渡すことができます。
また、定数定義の後ろの "form"; ですが、こちらは無視される仕様となっているようです。
これを加えないとエラーとなり、連続しての定数もしくは変数の定義(以下、参照)ができないようです。
<script th:inline="javascript">
const hoge = /*[[${hoge}]]*/"hoge";
const fuga = /*[[${fuga}]]*/"fuga";
console.log(form);
</script>
上記のように「JavaScriptナチュラルテンプレート」の記載をすれば、連続して定数・変数の定義が可能です。
もちろん、JavaScriptの外部ファイル(〇〇.js)に渡したい場合も同様の内容で実装することができます。
※もちろん、HTML内で該当のjsファイルを読み込んでいないとできませんが・・・
JSファイルに値を渡す方法
こちらも最初のやり方は同じです。
<script th:inline="javascript">
const form = /*[[${form}]]*/"form";
// JavaScriptの関数呼び出し
sample();
</script>
まずはHTMLで値を変数に代入します。
あとはこの値を使用したいJavaScriptファイルで使用するだけです。
'use strict'
{
function sample(){
console.log(form);
}
}
このようにすれば、JavaScriptファイルでもJavaの値を使用することができます。
ただし、この方法には制約があるので、その点だけ注意が必要です。
以下が、その制約です。
-
<script>タグにsrc属性、またはth:src属性が指定してある場合には使用できないこと（th:inline属性とsrc属性ないしth:src属性の併用は不可） - 上記の制約の通り、
<head>タグ内で<script>タグを作成の上、そこでsrc属性、ないしth:src属性を利用して、JavaScriptファイルを読み込む必要がある
とはいえ、各自の仕様や好みにもよるので、前者を使用する人が大多数かと思います。
筆者自身の場合は、HTML内でのJavaScriptの記述は最低限にして、JSファイルでJavaScriptを書く場合が多いので、後者の方法が必須となります。
このように、好みによるところもあるので前者を使うのが多くの人にとっては無難かと思われます。