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

新人

「先輩、ThymeleafでボタンをクリックしたときにJavaScriptを実行したいんですが、どうすればいいですか？」

先輩

「それならth:onclick属性を使うと便利だよ。HTMLのonclickとJavaScriptを組み合わせる方法だね。」

新人

「なるほど…。でも、そもそもonclickってどんな意味なんですか？」

先輩

「いい質問だね。それじゃあまずは、HTMLのonclickについて説明してから、Thymeleafのth:onclickの使い方に入ろう。」

1. HTMLのonclick属性とは？（JavaScriptとの連携）

HTMLのonclick属性は、ボタンやリンクなどの要素がクリックされたときに、指定したJavaScriptコードを実行するための仕組みです。例えば、ユーザーがボタンをクリックしたときに、アラートを表示する処理などを簡単に記述できます。

以下は、HTMLだけでonclickを使ってJavaScriptを実行する基本的な例です。


<button onclick="alert('クリックされました！')">クリックしてね</button>

このようにonclick属性の中に直接JavaScriptを書くことで、簡単な動作を実装できます。ただし、テンプレートエンジンであるThymeleafと組み合わせる場合は、少し工夫が必要です。

2. Thymeleafのth:onclickとは？（基本構文と目的）

Thymeleafでは、通常のHTML属性の代わりにth:プレフィックスを使って、サーバー側で値を動的に埋め込むことができます。th:onclickは、JavaScriptのonclick属性と連携させるために使われる属性です。

基本的な構文は以下のようになります。


<button th:onclick="'showMessage()'">クリックして表示</button>

この例では、showMessage()というJavaScript関数が、ボタンをクリックしたときに呼び出されます。文字列としてJavaScript関数を'…'で囲む点に注意してください。

JavaScript側の関数は、通常HTML内の<script>タグの中や外部JSファイルに記述します。以下は、関数をHTML内に記述した例です。


<script>
    function showMessage() {
        alert("こんにちは！ThymeleafとJavaScriptの連携です。");
    }
</script>

このように、HTMLとJavaScriptを連携させることで、ユーザーの操作に応じて動的な挙動を実装することができます。

なお、th:onclickを使うことで、ボタンに設定する処理を動的に切り替えることも可能です。例えば、条件によって呼び出す関数名を変更したり、引数を動的に埋め込んだりすることもできます。

以下は、変数を使ってJavaScriptに値を渡す例です。


<button th:onclick="'greetUser(' + '\'' + ${userName} + '\'' + ')'">あいさつ</button>

ここでは、Thymeleafの変数${userName}をJavaScript関数greetUserの引数として渡しています。


<script>
    function greetUser(name) {
        alert("こんにちは、" + name + "さん！");
    }
</script>

このようにth:onclickは、HTMLとJavaScriptの橋渡しをする便利な機能であり、Spring Bootの開発現場でもよく使われます。

開発環境としては、pleiadesでGradleプロジェクトを作成し、@Controllerを使ったSpring MVC構成で、テンプレートとしてThymeleafを組み込む形が一般的です。

3. th:onclickでJavaScript関数を呼び出す方法

Thymeleafのth:onclick属性を使うことで、テンプレート内からJavaScript関数を柔軟に呼び出すことができます。特に、HTMLとJavaScriptを明確に分離して開発したい場合に便利です。

基本的な呼び出し方法は、先ほど紹介したように関数名を'…'で囲んで指定する方法です。


<button th:onclick="'sayHello()'">こんにちは</button>

JavaScript側には、対応する関数を定義しておきましょう。


<script>
    function sayHello() {
        alert("ThymeleafからJavaScriptを呼び出しました！");
    }
</script>

このようにth:onclickを使えば、JavaScriptの関数呼び出しをテンプレート上で明示的に制御できます。テンプレートエンジンの役割として、表示内容だけでなく、動的な振る舞いもコントロールできるのが魅力です。

4. イベント発火時にパラメータを渡す方法（thisやIDの扱い）

th:onclickでは、JavaScriptの関数に引数を渡すことも可能です。特に、クリックされた要素自体やそのIDなどを渡すことで、イベント処理が柔軟になります。

以下は、クリックされたボタン要素自体（this）を関数に渡す例です。


<button th:onclick="'handleClick(this)'">このボタンを渡す</button>

JavaScript側では、thisを受け取って、ボタンの内容や属性にアクセスできます。


<script>
    function handleClick(element) {
        alert("ボタンの内容: " + element.innerText);
    }
</script>

また、ボタンにidを設定して、そのIDを引数として渡すこともよくあります。Thymeleafの変数を含めることで、より動的なイベント処理が可能です。


<button th:id="'btn_' + ${item.id}" th:onclick="'handleItemClick(' + '\'' + ${item.id} + '\'' + ')'">
    選択
</button>

このように、ThymeleafのEL式（${item.id}）と文字列を組み合わせることで、JavaScript関数にサーバー側のデータを渡すことができます。これは、Springの@ControllerからModelに詰めたデータを、JavaScript処理に橋渡しする基本的なテクニックです。

5. よくあるミスとその対処法（クォートの忘れ、式展開の失敗など）

初心者がth:onclickを使う際によくつまずくポイントのひとつが、クォート（引用符）の扱いです。JavaScriptでは、文字列を'や"で囲む必要がありますが、Thymeleafではそれをさらに'…'で囲む必要があるため、クォートが二重になります。

例えば、以下のようなコードで


<button th:onclick="'showAlert(' + ${message} + ')'">表示</button>

このように記述してしまうと、JavaScript上でshowAlert(こんにちは)のようになり、シンタックスエラーになります。JavaScript側では文字列を'こんにちは'のように囲む必要があるため、Thymeleaf側で\'' + ${message} + '\''のように書く必要があります。


<button th:onclick="'showAlert(' + '\'' + ${message} + '\'' + ')'">表示</button>

このようにクォートで囲むことで、JavaScript関数に文字列を正しく渡すことができます。

もうひとつのよくあるミスは、式展開の中で${…}の変数がnullだった場合です。このような場合、JavaScriptにundefinedが渡されてエラーになることがあります。

このようなときは、th:onclickで変数のデフォルト値を指定するか、サーバー側でModelに空文字などを設定しておくとよいでしょう。


<button th:onclick="'saySomething(' + '\'' + (${message} ?: 'デフォルト') + '\'' + ')'">挨拶</button>

Thymeleafでは、?:演算子を使って、nullの場合のフォールバック値を設定することができます。これにより、JavaScriptとの連携時の安全性が高まります。

また、JavaScript関数名や引数のスペルミスにも注意しましょう。テンプレートを変更したあとにブラウザで何も反応がない場合は、ブラウザの開発者ツールでエラー内容を確認することが大切です。

テンプレートエンジンとJavaScriptを連携させると、表現の自由度が高まる一方で、文法ミスによるトラブルも起こりやすくなります。特にth:onclickは文字列操作が絡むため、必ず出力結果を確認しながら実装を進めましょう。

6. コントローラとの連携でonclickイベントを活かす（Model属性との連携）

Thymeleafのth:onclickを活用することで、Springの@Controllerで用意したModel属性とJavaScriptを簡単に連携させることができます。これは、表示内容だけでなく、イベント処理に動的な情報を渡したいときに非常に便利です。

たとえば、コントローラ側でユーザー名や商品IDなどをModelにセットし、それをJavaScript関数の引数として渡すといった場面が考えられます。


@Controller
public class SampleController {

    @GetMapping("/item")
    public String showItem(Model model) {
        model.addAttribute("itemId", 1001);
        model.addAttribute("itemName", "サンプル商品");
        return "item";
    }
}

テンプレート側では、th:onclickを使ってコントローラから渡された値をJavaScript関数に渡すようにします。


<button th:onclick="'showItemInfo(' + '\'' + ${itemId} + '\',\'' + ${itemName} + '\'' + ')'">
    商品詳細を表示
</button>

JavaScript関数では、その情報を使ってアラート表示したり、他の処理に使うことができます。


<script>
    function showItemInfo(id, name) {
        alert("商品ID: " + id + "\n商品名: " + name);
    }
</script>

このように、サーバー側のデータを使ってボタンの動作を変えることができる点が、ThymeleafとJavaScriptの連携の強みです。

7. 複数のボタンで異なる動作を設定する方法

画面上に複数のボタンがある場合、それぞれに違うイベント処理を割り当てることは、ユーザー体験を向上させるためにも重要です。Thymeleafのth:eachとth:onclickを組み合わせることで、リスト表示されたデータに対して個別に動作を設定できます。

例えば、商品一覧を表示して、各商品に「カートに追加」と「詳細を見る」のボタンを持たせる場合は以下のように記述します。


<tr th:each="item : ${itemList}">
    <td th:text="${item.name}"></td>
    <td>
        <button th:onclick="'addToCart(' + ${item.id} + ')'">カートに追加</button>
        <button th:onclick="'showDetails(' + ${item.id} + ')'">詳細を見る</button>
    </td>
</tr>

JavaScriptでは、個別のIDを受け取って処理を切り分けます。


<script>
    function addToCart(itemId) {
        alert("商品 " + itemId + " をカートに追加しました。");
    }

    function showDetails(itemId) {
        location.href = "/item/detail/" + itemId;
    }
</script>

このように、同じテンプレート構造でもth:onclickによって動的なイベント処理を割り当てることができ、@ControllerからModel経由で受け取ったデータと連動させることで、非常に柔軟なユーザーインターフェースを実現できます。

8. JavaScriptとの連携を活かした実践例（確認ダイアログや画面遷移制御）

最後に、JavaScriptとの連携を活かした実践的な例を紹介します。よく使われるのが、確認ダイアログによる操作確認と、条件付きでの画面遷移制御です。

たとえば「削除ボタン」を押したとき、確認ダイアログを表示してから実際の画面遷移を行うようなケースです。以下のように実装します。


<button th:onclick="'confirmDelete(' + ${item.id} + ')'">削除</button>


<script>
    function confirmDelete(itemId) {
        const confirmed = confirm("本当に削除しますか？");
        if (confirmed) {
            location.href = "/item/delete/" + itemId;
        }
    }
</script>

このようにth:onclickを使えば、ThymeleafとJavaScriptの連携で「確認 → 実行」という実践的なイベント処理も簡単に実現できます。

他にも、フォームの入力チェックを行ったうえで送信処理を進めたり、特定の条件でボタンの処理内容を変えたりといった工夫が可能です。以下は、入力値が空の場合は送信を止める例です。


<form action="/submit" method="post" id="myForm">
    <input type="text" id="userInput" name="text">
    <button type="button" th:onclick="'submitForm()'">送信</button>
</form>

<script>
    function submitForm() {
        const input = document.getElementById("userInput").value;
        if (input.trim() === "") {
            alert("入力が必要です。");
            return;
        }
        document.getElementById("myForm").submit();
    }
</script>

このように、th:onclickとJavaScriptを組み合わせることで、ユーザー操作を丁寧に制御する実践的なアプリケーションが作れます。

Springの@Controllerと連携しながら、th:onclickを効果的に使えば、テンプレートエンジンとしてのThymeleafの力を最大限に活かせるようになります。Pleiades＋Gradle構成でも同様に扱えるので、開発環境としても初心者におすすめです。