Thymeleaf javascript onclickイベント活用法｜初心者でもわかる動的データ連携の基本

Thymeleaf javascript onclickイベント活用法

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

新人

「先輩、ThymeleafとJavaScriptを組み合わせてボタンをクリックしたときにデータを動的に処理したいんですが、どうすればいいんでしょうか？」

先輩

「それなら、onclickイベントを使うのが基本だね。Thymeleafでは、サーバー側のデータをHTMLに埋め込みつつ、JavaScriptで処理を動かせる仕組みがあるんだよ。」

新人

「onclickってHTMLの属性ですよね？どうやってThymeleafの変数を一緒に使うんですか？」

先輩

「そうそう。単なるHTMLのイベント属性なんだけど、Thymeleafの式展開を使えばサーバーサイドの値をJavaScriptに安全に渡せるんだ。今から基本の流れを見ていこう。」

1. onclickイベントとは？

HTMLのonclickイベントは、ユーザーがボタンやリンクなどをクリックしたときに実行されるJavaScriptの処理を定義する仕組みです。たとえば次のように書くと、ボタンをクリックした瞬間にアラートを表示できます。


<button onclick="alert('ボタンがクリックされました！')">クリック</button>

このように、onclickは非常に単純な仕組みですが、Thymeleafと組み合わせることでサーバーから渡された値をJavaScriptで扱えるようになります。Springアプリケーションでデータをコントローラから渡し、ThymeleafでHTMLを生成し、JavaScriptのonclickイベントでその値を処理するという流れが基本です。

たとえば在庫管理画面で「詳細を見る」ボタンを押したとき、商品IDをonclickでJavaScript関数に渡して詳細情報を表示するといった使い方ができます。これがThymeleafとJavaScriptの動的連携の第一歩です。

JavaScript単体でもonclickは使えますが、サーバーからデータを動的に取得してHTMLに埋め込む場合、Thymeleafを使うとコードが簡潔で安全になります。ThymeleafはHTMLテンプレートの中にJavaのオブジェクトを直接埋め込むことができるため、サーバーとフロントエンドの橋渡しを自然に行えるのです。

2. Thymeleafでonclickイベントを使う意義

Thymeleafでは、Javaのコントローラから渡されたデータをHTML内でth:textやth:attrを使って展開できます。onclickイベントに動的な引数を渡す場合も、この仕組みを活用します。

まず、Springのコントローラ側でリストデータなどをModelに追加します。以下は商品の一覧をHTMLに渡す例です。


@Controller
public class ProductController {

    @GetMapping("/products")
    public String showProducts(Model model) {
        List<Product> products = List.of(
            new Product(1, "りんご", 10),
            new Product(2, "みかん", 3),
            new Product(3, "ぶどう", 7)
        );
        model.addAttribute("products", products);
        return "product_list";
    }
}

そして、Thymeleafテンプレートでth:eachを使って商品を繰り返し表示しながら、onclickイベントに動的な値を渡します。


<table>
    <tr th:each="p : ${products}">
        <td th:text="${p.name}"></td>
        <td>
            <button th:attr="onclick=|showStock('${p.name}', ${p.stock})|">在庫を見る</button>
        </td>
    </tr>
</table>

<script th:inline="javascript">
    /*<![CDATA[*/
    function showStock(name, stock) {
        alert(name + " の在庫数は " + stock + " 個です。");
    }
    /*]]>*/
</script>

このように、th:attrを使うことでonclickイベントにサーバーから渡されたデータを組み込むことができます。ポイントはパイプ記号（| |）で囲むことで、Thymeleafが式を正しく評価してHTMLに反映するようにしている点です。

さらに、th:inline="javascript"を指定することで、JavaScriptの中でもThymeleafの式を使ってサーバー側のデータを参照することができます。これにより、より複雑な処理を安全に実装できます。

onclickイベントを単にJavaScriptで定義するよりも、Thymeleafでサーバーサイドデータと組み合わせることで、ユーザーごとや商品ごとの動的な動作を実現できるのが最大のメリットです。

この仕組みを理解しておくと、フォーム送信やAjax通信の前段階として、ボタン操作だけでデータを動的に操作できるようになります。Spring MVCとThymeleafの組み合わせは、こうしたUIイベント制御にとても向いています。

3. コントローラで動的データを準備する方法（Modelの使い方）

ThymeleafのonclickイベントでJavaScriptとデータを連携させるには、まずSpringコントローラでModelにデータを登録することが重要です。Modelはビュー（HTMLテンプレート）に値を渡すための仕組みで、サーバーサイドのデータを画面上に反映させる役割を持っています。pleiades環境でGradleプロジェクトを作成し、依存関係を設定した状態であれば、以下のように簡単に記述できます。


@Controller
public class UserController {

    @GetMapping("/users")
    public String showUsers(Model model) {
        List<User> users = List.of(
            new User(1, "山田太郎", "東京"),
            new User(2, "鈴木花子", "大阪"),
            new User(3, "田中一郎", "福岡")
        );
        model.addAttribute("users", users);
        return "user_list";
    }
}

このコードでは、ユーザーのリストをModelに登録してビューに渡しています。Thymeleaf側では、${users}を通してこのデータを利用できます。onclickイベントでJavaScript関数にユーザー情報を渡すには、ここで用意したデータをHTML上のボタンなどに紐づけていく流れになります。

初心者がつまずきやすいのは「Modelに登録した変数をどのようにHTMLで参照するか」です。Thymeleafでは変数を${}の形式で参照し、テンプレート内で自由に展開できます。SpringコントローラとThymeleafテンプレートの橋渡しとして、Modelは欠かせない存在です。

4. Thymeleafテンプレートでonclickイベントを埋め込む実践例

次に、Modelから渡されたユーザー情報をThymeleafで表示し、onclickイベントに組み込む実践的な例を見てみましょう。ボタンをクリックしたときに、そのユーザーの情報をJavaScriptで処理する仕組みを作ります。


<table border="1">
    <tr>
        <th>ID</th>
        <th>名前</th>
        <th>地域</th>
        <th>操作</th>
    </tr>
    <tr th:each="u : ${users}">
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.area}"></td>
        <td>
            <button th:attr="onclick=|showUserInfo('${u.name}', '${u.area}')|">詳細</button>
        </td>
    </tr>
</table>

<script th:inline="javascript">
/*<![CDATA[*/
    function showUserInfo(name, area) {
        alert(name + " さんの地域は " + area + " です。");
    }
/*]]>*/
</script>

このサンプルでは、th:eachでユーザー情報を繰り返し表示しながら、onclickイベントを設定しています。th:attr属性を使うことで、Thymeleafの変数展開を利用しながらonclickに引数を埋め込むことが可能です。

注意点として、文字列をJavaScript関数の引数として渡す場合には、シングルクォート' 'で囲む必要があります。これを忘れると、HTMLとしては正しいものの、JavaScriptの実行時にエラーが発生してしまいます。また、Thymeleafではパイプ記号| |を使って文字列全体を囲うことで、テンプレート内の式を正しく扱えるようにしています。

さらに、onclickイベントの中で直接値を参照するよりも、JavaScript関数を定義して処理を分離するのが望ましいです。これにより、再利用性が高まり、コードの見通しも良くなります。特に複数のボタンが存在する場合、onclickイベントを整理しておくことで保守性が大きく向上します。

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

ThymeleafでJavaScriptを利用する際に重要なのが、th:inline="javascript"の指定です。これを付けることで、JavaScript内部でもThymeleafの式を直接使えるようになります。これにより、サーバーサイドの値を安全にJavaScriptに埋め込むことができます。

以下は、サーバーから渡されたリストをJavaScriptの変数として扱う例です。onclickイベントとは別に、データをJavaScriptで制御する際の基礎にもなります。


<script th:inline="javascript">
/*<![CDATA[*/
    let users = [[${users}]];
    console.log(users);
    users.forEach(u => {
        console.log(u.name + "（" + u.area + "）");
    });
/*]]>*/
</script>

このように[[${users}]]と書くことで、Thymeleafがサーバー側のオブジェクトをJSON形式に変換し、JavaScriptで扱える形に出力してくれます。これは非常に便利で、onclickイベントで呼び出す関数の中でも活用できます。

例えば、ボタンをクリックしたときにサーバーから渡されたデータを参照し、条件に応じてメッセージを変えるような処理を作ることもできます。


<script th:inline="javascript">
/*<![CDATA[*/
    let users = [[${users}]];
    function showMessage(id) {
        let user = users.find(u => u.id === id);
        if (user) {
            alert(user.name + " さんの地域は " + user.area + " です。");
        } else {
            alert("ユーザーが見つかりません。");
        }
    }
/*]]>*/
</script>

<table>
    <tr th:each="u : ${users}">
        <td th:text="${u.name}"></td>
        <td>
            <button th:attr="onclick=|showMessage(${u.id})|">確認</button>
        </td>
    </tr>
</table>

この構成では、onclickイベントを通じてユーザーIDをJavaScript関数に渡し、JavaScript側で配列を参照して対応するユーザー情報を取得しています。こうした仕組みを理解しておくと、サーバーとフロントエンドの橋渡しがとてもスムーズになります。

特に、ThymeleafでJavaScriptにデータを渡す際には、th:inline="javascript"を忘れずに指定することがポイントです。これをつけないと、[[${}]]の部分が展開されず、JavaScript内で正しく動作しなくなってしまいます。

また、onclickイベントに複雑な処理を直接書き込むのではなく、関数として切り出しておくことで、テストやデバッグがしやすくなります。これは初心者にとっても重要な習慣で、後々の開発効率に大きく関わります。

ここまで理解すれば、ThymeleafとJavaScriptのonclickイベントを使って、動的にデータを操作できるようになります。次のステップでは、サーバーから取得したデータを動的に更新する応用例や、ボタンを使ったAjax連携などにも応用できます。

6. onclickイベントでサーバーから受け取ったデータを使う応用例

ここからは、ThymeleafとJavaScriptのonclickイベントをさらに応用して、サーバー側から渡されたデータを活用する実践的な例を紹介します。たとえば、ボタンをクリックしたときに特定の商品の詳細情報を画面上に動的に表示するケースです。これは在庫管理や予約システムなど、あらゆるアプリケーションで役立ちます。

まず、Springのコントローラで商品データをModelに登録します。このとき、商品名や在庫数などをJavaのリストとして用意しておきます。


@Controller
public class StockController {

    @GetMapping("/stocks")
    public String showStocks(Model model) {
        List<Product> products = List.of(
            new Product(1, "りんご", 10),
            new Product(2, "みかん", 5),
            new Product(3, "ぶどう", 2)
        );
        model.addAttribute("products", products);
        return "stock_list";
    }
}

このデータをThymeleafテンプレートで受け取り、onclickイベントを使って特定の商品情報を表示します。JavaScriptの中でThymeleafから受け取ったデータを参照するため、th:inline="javascript"を利用します。


<table border="1">
    <tr>
        <th>商品名</th>
        <th>在庫</th>
        <th>操作</th>
    </tr>
    <tr th:each="p : ${products}">
        <td th:text="${p.name}"></td>
        <td th:text="${p.stock}"></td>
        <td><button th:attr="onclick=|showDetail(${p.id})|">詳細を見る</button></td>
    </tr>
</table>

<script th:inline="javascript">
/*<![CDATA[*/
    let products = [[${products}]];
    function showDetail(id) {
        let product = products.find(p => p.id === id);
        if (product) {
            alert(product.name + " の在庫は " + product.stock + " 個です。");
        }
    }
/*]]>*/
</script>

このサンプルでは、onclickイベントでボタンを押すと、その行に対応する商品の在庫情報がアラートで表示されます。重要なのは、Thymeleafの[[${products}]]がJSON形式のデータとしてJavaScriptに埋め込まれている点です。これにより、JavaScriptがサーバー側のリストを直接操作できるようになります。

このように、ThymeleafとJavaScriptを組み合わせることで、サーバーのデータをフロントエンドで即座に扱えるようになり、ユーザー操作に対して即時応答が可能になります。Ajaxを使わずとも、軽量な動的画面を実現できるのが大きな特徴です。

7. 動的なボタン生成とonclickの活用（繰り返し処理とデータバインド）

Thymeleafの強みは、サーバーサイドで繰り返し処理を行いながらHTMLを生成できる点にあります。特に、ボタンやリンクを動的に生成して、それぞれにonclickイベントを付与する場面では非常に便利です。

たとえば、商品の在庫数に応じてボタンの色や動作を変えるようなケースを考えてみましょう。在庫が少ない場合には警告色を表示し、クリックしたときに特別なメッセージを出すように設定します。


<table border="1">
    <tr>
        <th>商品名</th>
        <th>在庫</th>
        <th>操作</th>
    </tr>
    <tr th:each="p : ${products}">
        <td th:text="${p.name}"></td>
        <td th:text="${p.stock}"></td>
        <td>
            <button th:attr="onclick=|checkStock('${p.name}', ${p.stock})|"
                    th:style="${p.stock} < 5 ? 'background-color: pink;' : 'background-color: lightgreen;'">
                チェック
            </button>
        </td>
    </tr>
</table>

<script th:inline="javascript">
/*<![CDATA[*/
    function checkStock(name, stock) {
        if (stock < 5) {
            alert(name + " の在庫が少なくなっています！");
        } else {
            alert(name + " は十分な在庫があります。");
        }
    }
/*]]>*/
</script>

この例では、th:eachで行を繰り返しながら、ボタンのonclickに動的な値を埋め込んでいます。また、th:styleを使って条件に応じてボタンの見た目を変えています。Thymeleafは単なるテンプレートエンジンではなく、こうした条件分岐も簡単に扱えるのが魅力です。

さらに、JavaScriptの関数にサーバーから渡されたデータをそのまま引数として渡すことで、ボタンを押すたびに異なるメッセージを出すことができます。これはまさに「動的データ連携」の基本です。onclickイベントをうまく使いこなすことで、ユーザーの操作にリアルタイムで反応するインタラクティブな画面を作ることができます。

8. 初心者が注意すべきエラー例とデバッグのコツ

ThymeleafとJavaScriptを組み合わせたonclickイベントで、初心者がよく遭遇するのが「値が正しく渡らない」「JavaScriptが動かない」といった問題です。ここではその原因と対処法を解説します。

まず最も多いのが、Thymeleafで文字列を正しく囲まないことによるエラーです。onclickの引数に文字列を渡す場合、必ずシングルクォートで囲む必要があります。これを忘れるとJavaScriptの構文エラーになり、関数が実行されません。


<!-- 間違った例 -->
<button th:attr="onclick=|showInfo(${p.name})|">詳細</button>

<!-- 正しい例 -->
<button th:attr="onclick=|showInfo('${p.name}')|">詳細</button>

また、th:inline="javascript"を指定し忘れると、[[${}]]の部分が展開されずにそのまま文字列として出力されます。これによりJavaScript内でデータが読み取れなくなるため、動作確認時にはまずこの指定を見直すようにしましょう。

次に、デバッグの基本としてはブラウザの開発者ツール（F12キー）を使うことです。console.log()を使って変数の中身を確認すれば、サーバーから正しいデータが渡っているかを簡単にチェックできます。


<script th:inline="javascript">
/*<![CDATA[*/
    let products = [[${products}]];
    console.log(products); // サーバーから受け取ったデータを確認
/*]]>*/
</script>

さらに、onclickイベントを使う際にはHTMLとJavaScriptの分離も意識しておくと良いでしょう。Thymeleafのテンプレートが複雑になってくると、onclickの中で長い処理を書くのは避け、関数を別に定義しておくのが理想です。これにより、可読性が上がり、エラー発生時の特定も容易になります。

最後に、Thymeleafでは特殊文字の扱いにも注意が必要です。たとえば、<や>などをそのまま書くとHTMLエスケープの影響で正しく表示されない場合があります。これを避けるには、th:utextやCDATセクションなどを適切に使い分けましょう。

このように、onclickイベントを使ったJavaScript連携は一見シンプルですが、Thymeleaf特有の構文や変数展開の仕組みを理解しておくことで、安定した動作が実現できます。慣れてくると、ボタン操作だけでなく、入力フォームや動的メニューにも応用でき、Spring MVCの開発がより楽しくなるはずです。