SpringBootの値をJavaScriptに渡す方法

4626 ワード
JavaScript Java Thymeleaf spring spring-boot Java テキストリンク

はじめに

SpringBootで設定した値をJavaScriptに渡す際に、少しばかり、つまずいたため備忘録がてら記録しておこうと思います。
SpringBootとJavaScriptを用いた場合には、非常にあるあるな事象だと思うので、ご参考になれば幸いです。

ControllerからJavaScriptに値を渡す方法

以下のようにModelに登録してある値をJavaScriptに渡したいとします。

SampleController.java
    @GetMapping("/index")
	public String getIndex(EasyHouseholdForm form, Model model) {

		model.addAttribute("form", form);	
		
		return "sample/index";
	}

これを渡す方法はThymeleafで以下のようにします。

index.html
<script th:inline="javascript">
		const form = /*[[${form}]]*/
        console.log(form);
</script>

ポイントとしては、<script>タグのth:inline属性の値にjavascriptを設定し、/*[[${渡したい値}]]*/とすることでJavaからJavaScriptに値を渡すことができます。

また、JavaScriptの外部ファイル(〇〇.js)に渡したい場合も同様の内容で実装することができます。
※もちろん、HTML内で該当のjsファイルを読み込んでいないとできませんが・・・

JSファイルに値を渡す方法

こちらも最初のやり方は同じです。

index.html
<script th:inline="javascript">
		const color = /*[[${form}]]*/
        // JavaScriptの関数呼び出し
        sample();
</script>

まずはHTMLで値を変数に代入します。
あとはこの値を使用したいJavaScriptファイルで使用するだけです。

index.js
'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を書く場合が多いので、後者の方法が必須となります。

このように、好みによるところもあるので前者を使うのが多くの人にとっては無難かと思われます。

参考文献