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

新人

「先輩、ThymeleafでJavaScriptにデータを渡す方法ってあるんですか？」

先輩

「いい質問だね。Thymeleafはサーバーサイドのテンプレートエンジンだけど、JavaScriptと連携させることで、動的なデータ管理もできるんだ。」

新人

「なるほど！でも、どうやってThymeleafからJavaScriptにデータを渡すんですか？」

先輩

「それをこれから順番に解説していくよ。GradleでSpringプロジェクトを作成して、@Controllerを使ってサーバーからデータを渡す流れを見ていこう。」

1. Thymeleafとは何か（テンプレートエンジンの基本的な役割）

Thymeleaf（タイムリーフ）は、Spring Frameworkとよく組み合わせて使われるテンプレートエンジンです。HTMLファイルに動的な値を埋め込むことができる仕組みで、サーバーサイドで生成されたデータをブラウザに表示するために使われます。

たとえば、Javaのコントローラで用意した値をHTML側に反映することが簡単にできます。これにより、静的なHTMLを動的に変化させることが可能になります。

ThymeleafはSpring Bootのデフォルトテンプレートエンジンとしても有名で、特別な設定をしなくてもpleiadesでSpringプロジェクトを作成すればすぐに使える点が魅力です。

以下は、基本的なThymeleafテンプレートの例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleafの基本例</title>
</head>
<body>
    <h1 th:text="${message}">デフォルトメッセージ</h1>
</body>
</html>

このように、th:textを使うことで、Javaのコントローラから渡された値をHTMLに反映できます。これがThymeleafの基本的な動作です。

2. HTMLとThymeleafの関係（静的HTMLを動的に変える仕組み）

ThymeleafはHTMLテンプレートを「そのままブラウザで開ける」という特徴を持っています。つまり、開発中に静的HTMLとして確認しながら、同時にサーバー側で動的にデータを反映することもできるのです。

開発環境としてpleiadesを使用すれば、Springプロジェクトを簡単に立ち上げることができ、Gradleで依存関係を管理することで構築もスムーズです。

Thymeleafのテンプレートは、サーバー上でHTMLを生成するため、JavaコードからModelを使って値を渡すのが一般的です。以下はコントローラの例です。


@Controller
public class SampleController {

    @GetMapping("/sample")
    public String sample(Model model) {
        model.addAttribute("message", "Thymeleafで動的データを表示！");
        return "sample";
    }
}

このコードでは、Modelを使ってmessageという名前でデータをテンプレートに渡しています。Thymeleafはこれを受け取ってHTMLに埋め込みます。

ブラウザで表示すると、h1タグの中身がサーバーのデータで置き換わる仕組みです。

3. JavaScriptとThymeleafを組み合わせる必要性（フロントとサーバーのデータ連携）

近年のWebアプリケーションでは、単にサーバーがHTMLを返すだけでなく、JavaScriptで画面を動的に制御するケースが増えています。そこで重要になるのが、「Thymeleafで生成したデータをJavaScriptで使う方法」です。

Thymeleafでは、th:inline="javascript"という属性を使うことで、サーバーから渡されたデータをそのままJavaScriptに埋め込むことができます。これにより、画面をリロードせずに動的データを扱うことが可能になります。

例えば、コントローラからリスト型のデータを渡して、JavaScriptでそれを処理する例を見てみましょう。


@Controller
public class DataController {

    @GetMapping("/list")
    public String list(Model model) {
        List<String> users = Arrays.asList("太郎", "花子", "次郎");
        model.addAttribute("users", users);
        return "list";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>JavaScript連携</title>
</head>
<body>
    <h2>ユーザー一覧</h2>
    <ul id="userList"></ul>

    <script th:inline="javascript">
        /*<![CDATA[*/
        let users = [[${users}]];
        /*]]>*/
        const list = document.getElementById("userList");
        users.forEach(name => {
            const li = document.createElement("li");
            li.textContent = name;
            list.appendChild(li);
        });
    </script>
</body>
</html>

このように、サーバーで定義したusersのリストを、JavaScriptに直接渡して処理できます。これが「ThymeleafとJavaScriptの動的連携」の基本的な形です。

この方法を使えば、Ajaxを使わずにサーバーサイドデータをフロント側に反映できるため、軽量なWebアプリを簡単に構築できます。

次の記事では、より複雑なデータ構造をJavaScriptと連携させる方法や、動的に更新する仕組みについて詳しく説明していきます。

4. コントローラからThymeleafへデータを渡す方法（Modelの使い方）

ここからは、実際にコントローラからThymeleafへデータを渡す流れを詳しく見ていきます。Spring MVCのModelクラスを使用すると、Javaの変数やオブジェクトを簡単にHTMLテンプレートへ送ることができます。

開発環境は、pleiadesでGradleプロジェクトを作成する前提です。依存関係の追加もpleiadesのチェック機能で簡単に行えるため、初心者でも安心です。

Thymeleafでは、コントローラがデータをModelに登録し、そのデータをHTML側でth:textやth:eachなどの属性を使って受け取ります。


@Controller
public class ProductController {

    @GetMapping("/product")
    public String showProduct(Model model) {
        model.addAttribute("name", "ノートパソコン");
        model.addAttribute("price", 98000);
        return "product";
    }
}

このコードでは、商品名と価格をサーバー側で設定し、テンプレートに渡しています。ThymeleafはこれらのデータをHTMLに埋め込む役割を果たします。

テンプレート側では、次のように変数を受け取って表示できます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品情報</title>
</head>
<body>
    <h2 th:text="${name}">商品名</h2>
    <p>価格：<span th:text="${price}">0</span>円</p>
</body>
</html>

このように${}構文でModelからデータを取得できます。これがThymeleafの基本的なデータバインディングの仕組みです。

5. Thymeleaf内でJavaScriptにデータを渡す方法（th:inline="javascript"の活用）

次に、ThymeleafとJavaScriptを連携させる方法を見ていきます。サーバー側のデータをJavaScriptで扱いたいとき、Thymeleafのth:inline="javascript"属性がとても便利です。

この機能を使うことで、Thymeleafの変数をJavaScriptの変数に変換し、動的データとして扱うことができます。たとえば、商品の価格や在庫情報をサーバーから受け取り、JavaScriptで動的に表示を切り替えるといった場面で活用できます。


@Controller
public class JsDataController {

    @GetMapping("/stock")
    public String stock(Model model) {
        model.addAttribute("product", "スマートフォン");
        model.addAttribute("stock", 25);
        return "stock";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>在庫情報</title>
</head>
<body>
    <h2>在庫状況</h2>
    <div id="stockInfo"></div>

    <script th:inline="javascript">
        /*<![CDATA[*/
        let product = [[${product}]];
        let stock = [[${stock}]];
        /*]]>*/
        const info = document.getElementById("stockInfo");
        info.textContent = product + "の在庫は" + stock + "個です。";
    </script>
</body>
</html>

ここでは、コントローラから渡されたproductとstockの値をJavaScriptに埋め込んでいます。Thymeleafがテンプレート処理を行う際に、これらの変数を自動で展開してくれます。

その結果、ブラウザでは「スマートフォンの在庫は25個です。」という動的なテキストが表示されます。

この仕組みを活用することで、サーバー側の状態をリアルタイムに反映するようなページを作ることができます。特に、Ajaxを使わずにサーバーデータを直接JavaScriptに流し込みたい場合に便利です。

6. 実際のHTMLテンプレート例（変数展開やリストデータの利用）

ここまでの内容を踏まえて、もう少し複雑なテンプレート例を紹介します。複数の商品データをサーバーから受け取り、それをJavaScriptで処理するケースを考えてみましょう。


@Controller
public class ItemController {

    @GetMapping("/items")
    public String items(Model model) {
        List<Map<String, Object>> itemList = new ArrayList<>();
        itemList.add(Map.of("name", "ノートPC", "price", 95000));
        itemList.add(Map.of("name", "マウス", "price", 3000));
        itemList.add(Map.of("name", "キーボード", "price", 6000));
        model.addAttribute("items", itemList);
        return "items";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品リスト</title>
</head>
<body>
    <h2>商品一覧</h2>
    <ul id="itemList"></ul>

    <script th:inline="javascript">
        /*<![CDATA[*/
        let items = [[${items}]];
        /*]]>*/
        const list = document.getElementById("itemList");
        items.forEach(item => {
            const li = document.createElement("li");
            li.textContent = item.name + "：" + item.price + "円";
            list.appendChild(li);
        });
    </script>
</body>
</html>

このサンプルでは、複数の商品の情報をリストで受け取り、Thymeleafを通してJavaScriptに渡しています。[[${items}]]の部分が、サーバーで処理されたリストをJavaScript配列として展開します。

JavaScript側では、forEachを使って配列をループ処理し、HTML要素を動的に生成しています。これにより、データベースから取得した商品リストを即座に画面上に表示できるわけです。

このようにThymeleafとJavaScriptを組み合わせることで、動的データの連携がスムーズに行えます。フロントエンドの開発を行う際にも、Springのテンプレート構造を維持したまま柔軟にデータを扱える点が魅力です。

また、pleiadesでGradleを使って構築する場合も、設定はシンプルで、すぐに実行して動作確認ができます。初心者でも、少しずつコードを追加しながら動作を理解していくことが大切です。

次のステップでは、Thymeleafを用いたJavaScriptとの双方向連携や、JSON形式のデータを扱うテクニックについて学ぶとさらに理解が深まります。

7. JavaScript側で受け取ったデータの活用（表示・処理の具体例）

ここまでで、ThymeleafからJavaScriptへ動的データを渡す方法を学びました。ここでは、そのデータを実際にどのように活用するかを、具体的な例を通して見ていきましょう。データを受け取るだけでなく、表示や処理を工夫することで、より動的な画面を作ることができます。

たとえば、サーバー側から商品リストと在庫情報を受け取り、在庫が少ない商品だけを目立たせるような処理を考えてみます。これは、ThymeleafとJavaScriptの連携が理解できると簡単に実装できます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>在庫リスト</title>
</head>
<body>
    <h2>在庫状況</h2>
    <ul id="productList"></ul>

    <script th:inline="javascript">
        /*<![CDATA[*/
        let products = [[${products}]];
        /*]]>*/
        const list = document.getElementById("productList");
        products.forEach(p => {
            const li = document.createElement("li");
            li.textContent = p.name + "（在庫：" + p.stock + "）";
            if (p.stock < 5) {
                li.style.color = "red";
            }
            list.appendChild(li);
        });
    </script>
</body>
</html>

このように、サーバーから渡された配列データをJavaScriptで処理し、条件に応じて表示を変えることができます。特定の条件で色を変える、メッセージを追加するなどの処理も、Thymeleafと組み合わせれば簡単です。

ここで大切なのは、「ThymeleafがデータをJavaScriptへ正確に渡してくれる」という安心感です。これにより、サーバーの値をフロントエンドで自在に操作できるようになります。

8. 双方向の動的連携（JavaScriptからサーバーへ送る仕組みの考え方）

次に、JavaScriptからサーバーへデータを送るケースを考えてみましょう。たとえば、ユーザーが入力した値をサーバーで処理したいときなどです。Thymeleafはテンプレートエンジンなので直接通信は行いませんが、フォームやリクエストを通して双方向の連携が可能です。

以下の例では、入力フォームで在庫数を変更し、その値をサーバーに送信する仕組みを紹介します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>在庫更新</title>
</head>
<body>
    <h2>在庫更新フォーム</h2>
    <form th:action="@{/updateStock}" method="post">
        <label>商品名：</label>
        <input type="text" name="name" th:value="${productName}">
        <label>在庫数：</label>
        <input type="number" name="stock" id="stockValue" th:value="${stock}">
        <button type="submit">更新</button>
    </form>
</body>
</html>


@Controller
public class StockController {

    @PostMapping("/updateStock")
    public String updateStock(@RequestParam String name, @RequestParam int stock, Model model) {
        // サーバー側で在庫更新処理を行う
        model.addAttribute("message", name + "の在庫を" + stock + "に変更しました。");
        return "result";
    }
}

このように、JavaScriptで入力を補助しながら、最終的にフォーム送信でサーバーと連携する流れを作ることができます。必要に応じてJavaScriptで動的にフォームの値を変えることも可能です。

さらに応用すると、Ajax通信を使ってページをリロードせずにサーバーとデータをやり取りすることもできます。ただし、今回のテーマでは@Controller構成に限定しているため、最初はフォーム送信の流れを理解することが大切です。

Thymeleafの役割はあくまでテンプレート生成ですが、JavaScriptと組み合わせることで「送る」「受け取る」の双方向連携が自然に実現できるのです。

9. 初心者がつまずきやすいポイントとデバッグのコツ

最後に、ThymeleafとJavaScriptを連携させるときに初心者がつまずきやすいポイントを整理しておきましょう。テンプレートエンジン特有の構文や、JavaScriptとの埋め込み処理の違いを理解しておくと、エラーを防ぎやすくなります。

まずよくあるのが、[[${変数}]]の書き方を間違えるケースです。ThymeleafではJavaScriptの中で値を埋め込む際、th:inline="javascript"を忘れると正しく展開されません。この属性を忘れると、画面上で「[[${product}]]」のように文字列のまま出てしまうことがあります。

もう一つの注意点は、データ型です。数値や文字列、リストなどがJavaScriptで正しく扱えるように、サーバー側でデータを整形しておくことが大切です。特にMapやListをJavaScriptに渡す場合、構造がそのままオブジェクトや配列になるため、ブラウザの開発者ツールで中身を確認しておくと良いでしょう。

デバッグの際は、ブラウザのコンソールを積極的に使うことがポイントです。Thymeleafが出力したJavaScriptの変数がどのような値になっているかを確認することで、連携部分の不具合を素早く見つけることができます。


console.log(product);
console.log(stock);

このようにログを出力するだけでも、サーバーから正しく値が渡っているかを簡単に確認できます。また、pleiades環境でGradleプロジェクトを構築している場合、実行コンソールにもエラーメッセージが表示されるため、エラーの原因を特定しやすいです。

最後に、初心者がよく混乱するのが「サーバー側とフロント側の責任の分担」です。ThymeleafはあくまでHTMLを生成する役割であり、動作や画面制御はJavaScriptが担います。この考え方を理解すると、エラーの切り分けがしやすくなります。

もし画面が想定通りに動かない場合は、「サーバーでデータが正しく渡っているか」「Thymeleafの埋め込みが正しく書かれているか」「JavaScriptで正しいタイミングで処理しているか」を順に確認すると良いでしょう。

ThymeleafとJavaScriptの連携は、最初は少し複雑に感じますが、一度動作を理解すると非常に強力なツールになります。pleiades＋Gradle環境で実行しながら、少しずつ動かして確認することで、テンプレートエンジンとフロントエンドの仕組みが自然に身についていきます。

これで、ThymeleafとJavaScriptによる動的データの管理と連携の基本が理解できたと思います。これからは、実際のプロジェクトでこれらを活かしながら、より高度な動的ページを作っていくことができるでしょう。

Thymeleaf javascriptと動的データの管理方法｜初心者でもわかる連携の基本