ThymeleafとJavaScriptのonclickで引数を渡す方法を完全解説！初心者でもわかる値の受け渡し

Thymeleaf javascript onclickで引数を渡す方法

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

新人

「先輩、ThymeleafでボタンをクリックしたときにJavaScriptのonclickで値を渡したいんですけど、どうやればいいんですか？」

先輩

「いい質問だね。ThymeleafとJavaScriptを連携してonclickイベントで値を扱うのは、Springアプリ開発でもよく使うテクニックだよ。」

新人

「サーバーの値をJavaScriptに渡したいときって、変数の書き方とか気をつけることありますか？」

先輩

「あるよ。Thymeleafの式展開の仕組みを理解しておかないと、onclickの中で値が正しく渡らなかったり、undefinedになることもあるんだ。」

新人

「なるほど……。じゃあ、まず基本の構造から教えてください！」

1. ThymeleafとJavaScriptのonclick連携とは？

Thymeleafは、Spring BootアプリケーションでHTMLテンプレートを生成するテンプレートエンジンです。サーバーサイドでJavaの値をHTML内に埋め込み、ブラウザに送信することができます。一方、onclickイベントは、ユーザーがボタンなどをクリックした際にJavaScriptの関数を実行する仕組みです。

この2つを組み合わせることで、「サーバーのデータをJavaScript関数に引数として渡す」という動作が可能になります。たとえば、商品IDやユーザー名などをボタンクリックで処理したいときに便利です。

Springの@Controllerで渡したデータをThymeleafで表示し、それをonclickに埋め込むのがポイントです。

2. onclickイベントでサーバーの値を使うための基本構造

Thymeleafでonclickに引数を渡すには、テンプレート内で変数を埋め込む必要があります。以下は基本的な構造の例です。


<button type="button" onclick="showMessage('[[${message}]]')">クリックして表示</button>

上記のように、[[${変数}]]というThymeleaf式でサーバー側の値をHTML内に展開します。この書き方は、「テキストモード展開」と呼ばれ、JavaScriptの中で使う際に便利です。

ここで重要なのは、クォート（シングルクォートやダブルクォート）の扱いです。onclick内ではJavaScriptの文字列として渡す必要があるため、Thymeleafの変数を展開する部分を必ずクォートで囲みましょう。

また、Springの@Controllerでは以下のようにモデルに値を追加しておきます。


@Controller
public class SampleController {
    @GetMapping("/onclick")
    public String showPage(Model model) {
        model.addAttribute("message", "ThymeleafからJavaScriptへようこそ！");
        return "onclick-sample";
    }
}

このようにしておくと、HTML側で${message}を展開できるようになります。

3. 簡単なサンプル：ボタンから値を渡してJavaScriptで受け取る

それでは、実際にThymeleafとJavaScriptを使ってonclickで引数を渡すサンプルを見てみましょう。

以下はテンプレートファイル（onclick-sample.html）の例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>onclickの引数サンプル</title>
    <script>
        function showMessage(value) {
            console.log("受け取った値:", value);
            alert("JavaScriptで受け取った値: " + value);
        }
    </script>
</head>
<body>
    <h2>ThymeleafとJavaScriptのonclickサンプル</h2>
    <button type="button" onclick="showMessage('[[${message}]]')">メッセージを表示</button>
</body>
</html>

このコードでは、Thymeleafの[[${message}]]がサーバーから受け取った値（たとえば「ThymeleafからJavaScriptへようこそ！」）に展開されます。ボタンをクリックすると、JavaScriptのshowMessage関数が呼ばれ、その引数として展開済みの文字列が渡されます。

実際のブラウザのコンソールでは、以下のように出力されます。


受け取った値: ThymeleafからJavaScriptへようこそ！

アラートウィンドウにも同じメッセージが表示され、サーバーの値がJavaScriptで正しく受け取れていることが確認できます。

このように、ThymeleafとJavaScriptのonclickイベントを組み合わせることで、動的な値の受け渡しが可能になります。特にSpringの@Controller構成でのフロント側の連携では、非常に基本となる部分です。

次のステップでは、コントローラからの値をさらに複雑に扱ったり、複数の引数を渡す方法を解説していきます。

4. コントローラから値を渡してonclickで扱う方法

ここでは、Springの@Controllerから複数の値をThymeleafへ渡し、それをonclickで利用する方法を詳しく見ていきます。実際のアプリ開発では、単一のメッセージではなく、IDや名前など複数の値をJavaScriptへ引き渡す場面が多いです。

まず、Java側のコントローラを作成して、モデルに値を設定します。開発環境はpleiades＋Gradleで、依存関係はSpring Webを追加しておきましょう。


@Controller
public class UserController {

    @GetMapping("/user-list")
    public String showUsers(Model model) {
        model.addAttribute("userId", 101);
        model.addAttribute("userName", "田中太郎");
        return "user-list";
    }
}

上記のように、userIdとuserNameをサーバーサイドで用意します。次に、これをHTMLテンプレートのボタンに埋め込み、クリック時にJavaScriptで受け取ってみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ユーザー情報のonclickサンプル</title>
<script>
  function showUserInfo(id, name) {
      console.log("ユーザーID:", id);
      console.log("ユーザー名:", name);
      alert("選択されたユーザー：" + name + "（ID：" + id + "）");
  }
</script>
</head>
<body>
<h2>Thymeleafでサーバーの値をJavaScriptに渡す</h2>
<button type="button" 
        onclick="showUserInfo([[${userId}]], '[[${userName}]]')">
        ユーザー情報を表示
</button>
</body>
</html>

ここでのポイントは、数値（ID）と文字列（名前）を区別して扱うことです。Thymeleafでは数値を直接展開できますが、文字列はクォートで囲む必要があります。つまり、'[[${userName}]]'のようにシングルクォートを使うことで、JavaScript文字列として正しく解釈されます。

この状態でブラウザを開いてボタンをクリックすると、console.logには次のように出力されます。


ユーザーID: 101
ユーザー名: 田中太郎

これで、Springコントローラの値がJavaScriptのonclickイベントで動的に利用できるようになりました。

5. 複数の引数を渡す場合の書き方

次に、Thymeleafで複数の引数をonclickに渡す方法を紹介します。たとえば、ID・名前・メールアドレスなど複数のデータをまとめて関数に送るケースです。Thymeleafでは、コンマで区切って複数の値を渡すことができます。


<button type="button" 
        onclick="showUserDetails([[${user.id}]], '[[${user.name}]]', '[[${user.email}]]')">
        詳細を表示
</button>

JavaScript側では、対応する数の引数を受け取る関数を用意します。


<script>
function showUserDetails(id, name, email) {
    console.log("ID:", id);
    console.log("名前:", name);
    console.log("メール:", email);
    alert("ユーザー情報: " + name + "（" + email + "）");
}
</script>

Thymeleafの式展開を利用すると、サーバーから受け取ったデータを簡単にonclickイベントに引き渡せます。ただし、文字列のクォートが抜けていると、ブラウザで「Uncaught SyntaxError」といったエラーが発生します。特に、全角文字や日本語名を扱う場合には、クォートを正しく付けることが大切です。

また、サーバーから受け取るデータが空の場合でもエラーが出ないように、th:ifを使ってボタンの表示を制御するのも実践的な方法です。


<button th:if="${user != null}"
        onclick="showUserDetails([[${user.id}]], '[[${user.name}]]', '[[${user.email}]]')">
        詳細を表示
</button>

このようにThymeleafでは、動的に展開される値の有無を条件分岐で安全に制御できるため、onclickイベントとの連携がより堅牢になります。

6. 動的に生成される要素へのonclick設定（ループ処理とth:each）

実際のアプリでは、ユーザー一覧や商品リストなど、複数の要素を動的に生成してonclickを設定するケースが多くあります。その際に活躍するのがth:each属性です。

以下の例では、コントローラから複数のユーザーリストを渡し、それをHTMLで繰り返し表示します。


@Controller
public class UserListController {

    @GetMapping("/users")
    public String showUserList(Model model) {
        List<User> users = List.of(
            new User(1, "佐藤花子", "hanako@example.com"),
            new User(2, "鈴木一郎", "ichiro@example.com"),
            new User(3, "高橋未来", "mirai@example.com")
        );
        model.addAttribute("users", users);
        return "user-list-loop";
    }
}

Thymeleaf側のHTMLは次のようになります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ユーザー一覧</title>
<script>
function showInfo(id, name, email) {
    console.log("選択されたID:", id);
    console.log("名前:", name);
    console.log("メール:", email);
}
</script>
</head>
<body>
<h2>ユーザー一覧</h2>
<ul>
    <li th:each="user : ${users}">
        <span th:text="${user.name}"></span>
        <button type="button" 
                th:onclick="'showInfo(' + ${user.id} + ', \\' ' + ${user.name} + ' \\' , \\' ' + ${user.email} + ' \\' )'">
                表示
        </button>
    </li>
</ul>
</body>
</html>

上記のように、th:onclickを使うと、ループ内で動的にonclickを生成できます。注意点は、クォートのエスケープです。Thymeleafでは\'（バックスラッシュ＋シングルクォート）を使うことで、HTML内に正しくクォートが出力されます。

ブラウザで「表示」ボタンをクリックすると、コンソールには次のような出力が確認できます。


選択されたID: 2
名前: 鈴木一郎
メール: ichiro@example.com

このように、ThymeleafとJavaScriptを組み合わせることで、サーバー側から動的に値を渡し、ユーザーごとのデータをonclickで制御することができます。Springの@Controller構成と組み合わせれば、Webアプリの操作性を高める実践的なUI連携が実現できます。

次のパートでは、これらのonclickイベントをより安全かつ効率的に管理する方法を紹介していきます。

7. よくあるエラーと注意点（undefined・展開されない・クォートミス）

ThymeleafとJavaScriptのonclick連携では、値がうまく渡らないときに「undefined」や「展開されない」といったエラーが起きがちです。初心者の方が最初につまずくポイントでもあります。まず、「undefined」と表示される場合は、Thymeleafの変数が存在しない、もしくは変数名を間違えていることが多いです。${user.name}と${userName}のような表記揺れに注意しましょう。

次に、「展開されない」問題は、Thymeleafの式がJavaScript文字列として正しく処理されていない場合に発生します。特に、クォート（シングルクォートやダブルクォート）の位置がずれていると、HTML上では単なる文字列として扱われ、onclick内では意図した値になりません。たとえば、onclick="showName([[${user.name}]])"のようにクォートがないと、JavaScript側では識別子として解釈され、結果的にundefinedになります。

このため、文字列として扱いたい値は必ず'[[${user.name}]]'のようにシングルクォートで囲みましょう。また、HTMLエスケープにも注意が必要です。Thymeleafは安全のために自動でエスケープを行いますが、特殊文字を含む場合はth:utextやth:onclickを使って適切に展開するのがポイントです。

さらに、onclick属性の中で複雑な構文を書くと、クォートの対応が崩れやすくなります。初心者のうちは、シンプルな関数呼び出し構造を保ち、複数の引数を扱う際はそれぞれを丁寧に囲むことが安全です。特に日本語や空白を含む値では、シングルクォートを忘れるとブラウザで予期せぬ挙動になります。

8. 実践例：ボタンクリックでIDを渡して詳細情報を取得する

ここでは、Springの@ControllerとThymeleafテンプレートを組み合わせて、ボタンクリックでユーザーIDをJavaScriptへ渡し、そのIDを使って詳細情報を取得する例を見ていきましょう。開発環境はpleiades＋Gradle構成で統一します。

まず、コントローラを用意して、ユーザー情報のリストをモデルに渡します。


@Controller
public class DetailController {

    @GetMapping("/user-detail")
    public String showUserList(Model model) {
        List<User> users = List.of(
            new User(1, "山田太郎"),
            new User(2, "佐藤花子"),
            new User(3, "鈴木一郎")
        );
        model.addAttribute("users", users);
        return "user-detail";
    }
}

次に、Thymeleafテンプレートでボタンを生成します。クリックされたときにIDをJavaScriptへ渡し、コンソールに出力してみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>onclickでIDを渡す</title>
<script>
function getDetail(id) {
    console.log("取得対象のID:", id);
    document.getElementById("result").textContent = "選択されたIDは " + id + " です";
}
</script>
</head>
<body>
<h2>ThymeleafとJavaScriptのonclick連携例</h2>
<ul>
  <li th:each="user : ${users}">
    <span th:text="${user.name}"></span>
    <button type="button" th:onclick="'getDetail(' + ${user.id} + ')'">詳細を見る</button>
  </li>
</ul>
<div id="result"></div>
</body>
</html>

この構成では、各ユーザーに対応するボタンが生成され、クリック時に該当のIDがgetDetail()関数へ渡されます。JavaScript関数の中ではdocument.getElementById()でHTML要素を取得し、選択されたIDを動的に表示しています。

この書き方を使う理由は、Thymeleafがサーバーサイドで変数を展開し、HTMLを生成するためです。サーバーで${user.id}が実際の値に置き換わることで、JavaScriptの実行時に正しい引数が渡されます。もしThymeleaf式をクォートで囲まなかったり、エスケープが不完全だと、HTML上に正しいスクリプトが出力されません。

このように、onclickイベントに動的なIDを渡すことで、ユーザーごとの情報取得や画面遷移などを柔軟に制御できます。次のステップでは、より安全でメンテナンス性の高い書き方を紹介します。

9. 安全でメンテナンスしやすいonclickの書き方と開発のコツ

ThymeleafとJavaScriptを使ったonclick連携は便利ですが、コードが増えるにつれて保守性が低下しやすい部分でもあります。安全でメンテナンスしやすい構成を保つためには、いくつかのコツがあります。

まず、onclick属性に直接長いロジックを書かないことです。JavaScript側に関数を定義し、Thymeleaf側では関数呼び出しだけを記述するようにしましょう。これにより、HTMLテンプレートがシンプルになり、変更点を一箇所に集約できます。

次に、動的な値を安全に扱うために、可能であればHTMLのdata属性を活用する方法もあります。たとえば、次のように書くと、onclickを使わずにJavaScriptで値を取得できます。


<button type="button" th:attr="data-id=${user.id}" onclick="showData(this)">表示</button>
<script>
function showData(element) {
    const id = element.getAttribute("data-id");
    console.log("取得したID:", id);
}
</script>

この方法の利点は、onclickに直接Thymeleaf式を書かなくてもよい点です。値はHTML属性として保持されるため、展開ミスやクォートの問題を避けることができます。また、JavaScript側でthisキーワードを使うことで、クリックされた要素を簡単に特定できるのも便利です。

さらに、onclickイベントの登録をJavaScript側のaddEventListenerで行うと、より柔軟な設計が可能です。ThymeleafではHTML構造を生成し、JavaScriptが動的にイベントを設定するという分離設計が保たれます。これにより、HTMLとスクリプトが混在せず、保守性が格段に上がります。

最後に、開発中はブラウザの開発者ツールを活用して、onclickで渡された引数を確認する習慣をつけましょう。コンソール出力やアラートで値を追跡することで、Thymeleafの展開が意図通りに動作しているかを確かめられます。

このように、ThymeleafとJavaScriptのonclick連携では、単に動かすだけでなく、安全性・保守性・再利用性を意識した書き方が重要です。動的連携を意識した設計を行うことで、Springアプリ全体の品質を高めることができます。

まとめ

今回の記事では、Spring Bootの開発現場で非常によく使われる「Thymeleafの値をJavaScriptのonclickイベントに渡す方法」について、基本から応用まで詳しく解説してきました。Spring MVCの@Controllerで設定したModelの値を、いかにして安全かつ確実にフロントエンドのスクリプトへ受け渡すか、その重要性と具体的な記述ルールをご理解いただけたでしょうか。

記事の重要ポイントの振り返り

ThymeleafとJavaScriptを連携させる際の最大の鍵は、**「サーバーサイドでの展開タイミング」と「クライアントサイドでの解釈」の差を埋めること**にあります。以下の3点は特に意識すべきポイントです。

テキストモード展開 [[${...}]] の活用： インライン記述を使うことで、HTML属性の中に直接Javaの変数を埋め込むことができます。
クォート（引用符）の適切な管理： 文字列として渡す場合は '[[${userName}]]' のようにシングルクォートで囲むことが必須です。これを忘れると、JavaScript側で変数名（識別子）として扱われ、ReferenceError の原因になります。
th:onclickによる動的生成： th:each などのループ処理内では、文字列結合を利用して関数呼び出しを組み立てる th:onclick が非常に強力です。

実戦で役立つサンプルプログラム

まとめとして、学んだ内容を凝縮した実践的なコードを紹介します。ユーザー一覧を表示し、ボタンを押すとその詳細情報をコンソールとアラートで表示する、現場で即活用できる構成です。


<!-- ユーザー情報の動的リスト表示とJavaScript連携の決定版 -->
<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>氏名</th>
                <th>アクション</th>
            </tr>
        </thead>
        <tbody>
            <!-- th:eachでリストを回し、各行に固有のIDと名前をセット -->
            <tr th:each="u : ${userList}">
                <td th:text="${u.id}">1</td>
                <td th:text="${u.name}">サンプル太郎</td>
                <td>
                    <!-- 数値はそのまま、文字列はエスケープしたクォートで囲むのがコツ -->
                    <button type="button" class="btn btn-primary"
                            th:onclick="'handleUserAction(' + ${u.id} + ', \'' + ${u.name} + '\')'">
                        詳細を確認
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
/**
 * ボタンクリック時に実行される関数
 * @param {number} userId - サーバーから渡されたユーザーID
 * @param {string} userName - サーバーから渡されたユーザー名
 */
function handleUserAction(userId, userName) {
    console.log("Processing ID:", userId);
    console.log("Processing Name:", userName);
    
    if (confirm("ID:" + userId + " の " + userName + " さんの詳細を表示しますか？")) {
        // ここに詳細画面への遷移や非同期通信（Fetch API等）の処理を記述
        alert("実行しました。開発者コンソールも確認してください。");
    }
}
</script>

より高度な開発を目指す方へ

今回の内容をマスターしたら、次は「メンテナンス性」に目を向けてみてください。記事の後半でも触れた通り、HTML内にJavaScriptを直接書く onclick 属性は便利ですが、規模が大きくなると管理が大変になります。そんな時は、data-* 属性（データ属性）を使用して値を保持し、JavaScript側で addEventListener を使ってイベントを一括管理する手法も検討してみましょう。これにより、HTML（見た目）とJavaScript（振る舞い）がより明確に分離され、テストしやすくバグの少ないコードになります。 Spring BootとThymeleafは、Javaエンジニアにとって非常に強力な武器です。今回学んだ「値の受け渡し」を完璧に使いこなし、ユーザーにとって使い心地の良いWebアプリケーションを構築していきましょう。

先生と生徒の振り返り会話

先生

「さて、今回の『ThymeleafからJavaScriptのonclickへ引数を渡す方法』についての学習はどうだったかな？特に印象に残った部分はどこだい？」

生徒

「はい！一番の驚きは、やっぱり『クォートの扱い』ですね。サーバー側では単なる文字列だと思っていても、JavaScriptに渡すときはちゃんとシングルクォートで囲まないと、変数だと勘違いされてエラーになっちゃうっていうのが、すごく納得できました。」

先生

「その通りだね。それは初心者だけでなく、慣れているエンジニアでもたまに忘れてデバッグに時間を取られるポイントなんだ。エラーが出たときに、ブラウザの『ソースを表示』で実際にどんなHTMLが出力されているか確認する癖をつけるといいよ。」

生徒

「あ、それ便利そうですね！あと、th:onclick の中で \' を使ってクォートをエスケープする書き方が少し難しかったですけど、練習してたら慣れてきました。リスト表示で一人一人のIDをボタンに埋め込めるようになると、一気にWebアプリっぽくなりますね！」

先生

「その意気だ。動的に生成される要素に対して、それぞれ正しい値を紐付ける。これができると、ユーザー管理画面や商品一覧など、作れるアプリの幅がぐっと広がるんだよ。次は、セキュリティ面を考慮して、値をエスケープせずに渡す方法や、JSON形式でまとめて渡す方法にも挑戦してみようか。」

生徒