ThymeleafでJavaScriptに変数を動的に渡す例を徹底解説！onclickでの引数連携も紹介

Thymeleaf javascriptに変数を動的に渡す例

新人と先輩の会話形式で理解しよう

新人

「先輩、ThymeleafでJavaScriptに変数を渡す方法がよく分からないんです。onclickの引数にデータを渡したいのですが、うまく動きません。」

先輩

「ああ、それはよくある質問だね。ThymeleafはサーバーサイドでHTMLをレンダリングする仕組みだから、JavaScriptと組み合わせるときは少しコツが必要なんだ。」

新人

「なるほど！ThymeleafとJavaScriptは別の動作タイミングなんですね。じゃあ、どうやって引数を渡せばいいんでしょうか？」

先輩

「それじゃあ、ThymeleafとJavaScriptの基本的な連携方法から順に説明していこうか。」

1. ThymeleafとJavaScriptの基本的な連携の仕組み

Thymeleafは、Spring Frameworkでよく使われるテンプレートエンジンで、HTMLファイルの中にサーバーサイドの変数を埋め込むことができます。JavaScriptはブラウザ側で動くため、Thymeleafの変数をJavaScriptへ動的に渡すには、HTMLが生成された段階で値を埋め込む必要があります。

例えば、コントローラで用意した変数をThymeleafテンプレートに渡し、それをJavaScriptで利用することが可能です。開発環境は「pleiades＋Gradle」でSpringプロジェクトを構築し、@Controller構成を前提にします。


@Controller
public class SampleController {

    @GetMapping("/example")
    public String example(Model model) {
        model.addAttribute("userName", "Taro");
        return "example";
    }
}

このように、コントローラから「userName」という変数をThymeleafへ渡すことで、HTML側で動的に値を表示したり、JavaScriptに渡したりできます。Thymeleafはサーバーでこの変数を解決し、HTMLを生成する際に実際の値へ置き換えます。

では、次にHTML側でその変数をJavaScriptに渡す方法を見ていきましょう。

2. JavaScriptにThymeleafの変数を動的に渡す考え方

ThymeleafでJavaScriptに変数を渡す方法にはいくつかありますが、最も基本的なのはth:inline="javascript"を使う方法です。これにより、JavaScriptの中でもThymeleaf式を利用でき、サーバーから渡されたデータを直接スクリプト内で扱うことができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafとJavaScriptの連携</title>
</head>
<body>
    <h3 th:text="'こんにちは、' + ${userName} + 'さん！'">こんにちは！</h3>

    <button onclick="showUser()">クリックして確認</button>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var user = [[${userName}]];
        function showUser() {
            alert("ユーザー名：" + user);
        }
        /*]]>*/
    </script>
</body>
</html>

この例では、Thymeleafの[[${userName}]]構文を使って、サーバー側で設定した「Taro」という文字列をJavaScriptの変数に動的に代入しています。ページをブラウザで開くと、生成されたHTMLは次のように出力されます。


<script>
    var user = "Taro";
    function showUser() {
        alert("ユーザー名：" + user);
    }
</script>

こうしてThymeleafの変数が、JavaScript側の変数として動的に渡されます。onclickイベントで関数を呼び出すことで、サーバーから取得したデータをブラウザ上で利用できるようになります。

このように「Thymeleaf」「JavaScript」「動的」「変数」「引数」「連携」「onclick」などの要素を組み合わせることで、Springアプリケーションの中でも柔軟なデータ連携が可能になります。

次の記事では、この基本を応用して配列やオブジェクトをJavaScriptへ動的に渡す方法についてさらに掘り下げていきます。

3. ThymeleafでJavaScriptに文字列・数値を動的に渡す方法

ここからは、Thymeleafで文字列や数値をJavaScriptに動的に渡す具体的な方法を見ていきましょう。サーバー側のコントローラで設定した値をThymeleafを通じてJavaScriptの変数に埋め込むことで、クライアント側でもそのデータを扱うことができます。

例えば、次のようにコントローラから「ユーザー名」と「年齢」をModelに追加します。開発環境はpleiadesとGradleを使い、@Controller構成で作成します。


@Controller
public class UserController {

    @GetMapping("/userInfo")
    public String userInfo(Model model) {
        model.addAttribute("userName", "Hanako");
        model.addAttribute("userAge", 25);
        return "userInfo";
    }
}

次に、Thymeleafテンプレートでこれらの変数をJavaScriptへ動的に渡します。th:inline="javascript"を指定すると、JavaScript内でもThymeleaf式が使用できるようになります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafとJavaScriptの動的連携</title>
</head>
<body>
    <h3 th:text="'ユーザー名：' + ${userName} + ' / 年齢：' + ${userAge}"></h3>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var name = [[${userName}]];
        var age = [[${userAge}]];
        console.log("ユーザー名：" + name);
        console.log("年齢：" + age);
        /*]]>*/
    </script>
</body>
</html>

上記コードでは、サーバー側から渡された「Hanako」や「25」がJavaScript変数として埋め込まれます。Thymeleafのテンプレートエンジンはページ生成時に変数を実際の値へ置き換えるため、ブラウザで開くと次のように出力されます。


<script>
    var name = "Hanako";
    var age = 25;
    console.log("ユーザー名：" + name);
    console.log("年齢：" + age);
</script>

これにより、JavaScriptのコード内でもサーバーサイドの値を自在に扱えるようになります。特に動的なWebページを作成するときに、この仕組みは非常に役立ちます。

4. onclickイベントを使って引数として渡す仕組み

次に、Thymeleafで定義した変数をJavaScript関数の引数としてonclickイベントで渡す方法を見ていきます。HTMLボタンなどの要素にonclickを設定し、クリック時にサーバーから渡された値をJavaScript関数に引き渡すことが可能です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafとonclickの連携</title>
</head>
<body>
    <p>ThymeleafでJavaScript関数に引数を渡す例</p>
    <button th:onclick="'showInfo(' + '\'' + ${userName} + '\',' + ${userAge} + ')'">クリックで情報表示</button>

    <script>
        function showInfo(name, age) {
            alert("ユーザー：" + name + "（" + age + "歳）");
            console.log("onclickで受け取った値:", name, age);
        }
    </script>
</body>
</html>

この例では、th:onclickを使用してThymeleafの変数をonclickイベントに動的に埋め込んでいます。サーバー側の値を直接HTMLに反映できるため、JavaScript関数を呼び出すときに動的なデータを引数として渡せます。

レンダリング後のHTMLは次のようになります。


<button onclick="showInfo('Hanako',25)">クリックで情報表示</button>

これにより、ボタンをクリックすると「ユーザー：Hanako（25歳）」というアラートが表示されます。このようにThymeleafの変数をonclick引数に渡すことで、動的なデータ連携を簡単に実現できます。

onclickイベントはフォーム送信やデータ選択など、多くの場面で利用されるため、覚えておくと便利です。

5. 配列データをJavaScript関数に渡す応用例

ここからはさらに一歩進んで、配列データをThymeleafからJavaScriptへ動的に渡す方法を紹介します。配列は複数の値をまとめて扱うときに欠かせない構造で、Thymeleafと組み合わせることでサーバーのリストデータをブラウザで扱うことが可能になります。

まず、コントローラで配列（リスト）をModelに追加します。


@Controller
public class ListController {

    @GetMapping("/listExample")
    public String listExample(Model model) {
        List<String> fruits = List.of("Apple", "Banana", "Cherry");
        model.addAttribute("fruits", fruits);
        return "listExample";
    }
}

次に、Thymeleafテンプレートでこの配列をJavaScriptに渡します。ここでもth:inline="javascript"を使うことで、配列全体をJavaScriptの変数として扱うことができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafで配列をJavaScriptに渡す</title>
</head>
<body>
    <h3>ThymeleafからJavaScriptへ配列を動的に渡す例</h3>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var fruits = [[${fruits}]];
        console.log("受け取った配列:", fruits);
        /*]]>*/
    </script>

    <button onclick="showFruits()">配列を表示</button>

    <script>
        function showFruits() {
            fruits.forEach(function(fruit) {
                console.log("フルーツ名:", fruit);
            });
            alert("配列の中身はコンソールで確認できます。");
        }
    </script>
</body>
</html>

ThymeleafによってHTMLが生成されると、配列はJavaScriptのリテラルとして展開され、次のような形になります。


<script>
    var fruits = ["Apple","Banana","Cherry"];
    console.log("受け取った配列:", fruits);
</script>

ボタンをクリックすると、配列の各要素がコンソールに順に出力されます。このようにして、サーバーから渡されたデータをJavaScriptで自由に扱うことが可能です。

ThymeleafとJavaScriptを組み合わせれば、単一の値だけでなく、配列やリストなどの複雑なデータ構造も動的に連携できるため、Spring MVCアプリケーションの柔軟性が大きく向上します。

この手法はデータ可視化やリスト処理など、さまざまなフロントエンド連携の基礎になります。

6. コントローラ（@Controller）からThymeleafへデータを渡す方法

ここまででThymeleafからJavaScriptへのデータ連携を学びましたが、まずはデータの出発点となるコントローラの処理をしっかり理解しておくことが大切です。ThymeleafではサーバーサイドのJavaクラスである@Contollerが、ビューに渡す変数を管理します。Spring MVCのModelを利用して、Javaの値をHTMLテンプレートへ受け渡します。

例えば次のように、コントローラで文字列や数値、配列などをModelへ格納し、Thymeleafで動的に表示できます。開発環境はpleiadesを使用し、Gradle構成でプロジェクトを作成します。Mavenや外部テンプレートエンジンは使わず、Spring標準機能のみで構成します。


@Controller
public class DataController {

    @GetMapping("/dataExample")
    public String dataExample(Model model) {
        model.addAttribute("message", "サーバーからの動的メッセージ");
        model.addAttribute("count", 10);
        List<String> colors = List.of("Red", "Blue", "Green");
        model.addAttribute("colors", colors);
        return "dataExample";
    }
}

このコントローラでは、文字列「message」、数値「count」、リスト「colors」をModelに追加しています。これらの値は、Thymeleafテンプレート内で直接参照できるようになります。Thymeleafがレンダリングするとき、サーバーのデータが実際の値に置き換えられ、HTMLとしてブラウザに送られます。

このように「Thymeleaf」「コントローラ」「変数」「動的」「連携」という流れを意識すると、データの流れが理解しやすくなります。Thymeleafの魅力は、サーバーサイドのデータをそのままHTMLに埋め込める点にあります。

7. JavaScriptとThymeleafの連携を使った実践例

次に、サーバーの値をThymeleaf経由でJavaScriptに渡し、それを実際にブラウザ上で動作確認する例を見てみましょう。ここでは、サーバーから配列データを受け取り、ボタンを押すとJavaScriptで一覧を出力する仕組みを作ります。

まず、コントローラで商品のリストをModelに追加します。


@Controller
public class ProductController {

    @GetMapping("/products")
    public String products(Model model) {
        List<String> items = List.of("ノートPC", "スマートフォン", "タブレット");
        model.addAttribute("products", items);
        return "products";
    }
}

続いて、Thymeleafテンプレートではth:inline="javascript"を指定し、サーバーで受け取った配列をJavaScriptの変数に展開します。そして、onclickイベントで配列の中身をブラウザのコンソールに出力して確認します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafとJavaScriptの連携例</title>
</head>
<body>
    <h3>ThymeleafでJavaScriptに配列を渡す実践例</h3>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var products = [[${products}]];
        console.log("受け取った商品一覧:", products);
        /*]]>*/
    </script>

    <button onclick="showProducts()">商品を確認</button>

    <script>
        function showProducts() {
            console.log("onclickで配列を出力:");
            products.forEach(function(item) {
                console.log("商品名:", item);
            });
            alert("商品一覧がコンソールに出力されました。");
        }
    </script>
</body>
</html>

このようにThymeleafの[[${products}]]構文を利用すると、サーバー側でModelに設定した配列がHTML生成時に展開され、JavaScriptの配列としてそのまま扱えます。onclickでボタンを押すと、JavaScriptが配列を受け取り、ブラウザの開発者ツールのコンソールに商品名が出力されます。

「Thymeleaf」「JavaScript」「onclick」「配列」「動的」などのキーワードが自然に組み合わさることで、実際のアプリ開発に直結する構成になります。

8. 動的な値変更と再描画の考え方（変数をリアルタイムで反映させる）

最後に、ThymeleafとJavaScriptを組み合わせて、画面上の変数を動的に変更し、即座に反映させる方法を学びましょう。通常ThymeleafはサーバーでHTMLを生成するため、ページ読み込み後に値を変更する場合はJavaScriptの役割になります。

ここでは、ボタンをクリックするとJavaScript側でThymeleafから渡された変数を変更し、HTMLの表示を更新する例を紹介します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafと動的変更の実装</title>
</head>
<body>
    <h3>ThymeleafとJavaScriptの動的再描画</h3>

    <div id="displayArea" th:text="'現在のスコア：' + ${score}">現在のスコア：0</div>
    <button onclick="updateScore()">スコアを増やす</button>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var score = [[${score}]];
        /*]]>*/
    </script>

    <script>
        function updateScore() {
            score++;
            document.getElementById("displayArea").innerText = "現在のスコア：" + score;
            console.log("スコアが更新されました:", score);
        }
    </script>
</body>
</html>

この例では、初期値としてThymeleafから受け取った「score」変数をJavaScriptに埋め込み、ボタンを押すたびに数値が加算されていきます。HTML要素の内容をinnerTextで動的に書き換えることで、リアルタイムに値が反映される仕組みを確認できます。

サーバーから受け取ったデータをもとに、JavaScript側で値を操作することで、Thymeleafの静的なテンプレートをより動的に見せることが可能になります。これにより、ユーザー操作に応じたインタラクティブなUIを簡単に構築できます。

このような連携は、Springアプリケーションでリアルタイムな動作を演出したいときに非常に役立ちます。特に、画面更新なしで値を変化させる処理は、ユーザー体験を向上させる重要なテクニックです。

以上のように、Thymeleafの変数をJavaScriptに動的に渡すだけでなく、その値をブラウザ上で操作・再描画することで、より柔軟で魅力的なWebアプリケーションを実現できます。