ThymeleafでJavaScriptの変数にサーバサイドの値を埋め込む方法

Thymeleaf JavaScript

ThymeleafでJavaScriptの変数に値を埋め込む方法

Thymeleafを使ってJavaScriptの変数にサーバーサイドの値を埋め込む方法を説明します。
使用場面は結構多いと思いますが、ついついやり方を忘れてしまいがちですよね。
備忘のためにも記しておきたいと思います。

以下は、埋め込むための基本的な例です。

1. 直接埋め込み

最も基本的な方法は、th:text属性を使って、直接JavaScriptの変数に値を埋め込むことです。

<script th:inline="javascript">
    var myVar = /*[[${myValue}]]*/;
</script>

この例では、ThymeleafはmyValueというサーバーサイドの変数の値をJavaScriptのmyVar変数に埋め込みます。
th:inline="javascript"属性は、Thymeleafに対してJavaScriptコード内で変数を評価するよう指示します。
一見コメントアウトされているように見えますが、実はコメントアウトではないんです。
実際には[[]]で囲まれた変数の値が埋め込まれています。
変数については、通常の文字列や数値に加え、JSONや配列なども渡すことができます。

2. データ属性を使った埋め込み

データ属性を使用してHTML要素に値を埋め込み、JavaScriptでそれを取得する方法もあります。

<div id="data-container" th:data-value="${myValue}"></div>

<script>
    var myValue = document.getElementById('data-container').getAttribute('data-value');
</script>

この方法では、data-value属性にサーバーサイドの値を埋め込み、それをJavaScriptで取得しています。
間接的な値の渡し方で、JavaScriptに値を渡す用の要素を用意する必要があるので1のやり方に比べてあまりメリットはないかもしれません。

まとめ

Thymeleafを使ってサーバーサイドの値をJavaScriptの変数に簡単に埋め込むことができます。
可能であれば1で対応した方が直感的でわかりやすくて良いですね。