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

新人

「先輩、Thymeleafを使ってHTMLのボタンをクリックしたときに、変数をJavaScriptに渡す方法ってありますか？」

先輩

「いい質問だね！JavaScriptのonclickイベントで、Thymeleafの変数をJavaScriptに渡す方法があるんだ。」

新人

「それは便利そうですね！どうやって書いたらいいんですか？」

先輩

「まずはonclickイベントの基本と、Thymeleafでの変数の扱い方を理解しよう！」

1. onclickイベントの基本的な仕組み

まず、JavaScriptのonclickイベントの基本をおさらいしましょう。HTMLのボタンやリンクなどにonclick属性を追加することで、クリックされたときにJavaScriptの関数を実行できます。

例えば、シンプルなボタンの例です。


<button onclick="alert('こんにちは！')">クリックして挨拶</button>

このボタンをクリックすると、ブラウザのダイアログが「こんにちは！」と表示されます。onclickの中には、関数の呼び出しや処理を書くことができます。

しかし、実際の開発では、サーバーから受け取った値をJavaScriptに渡して、onclickイベントで使いたいことが多いですよね。そこで登場するのがThymeleafの変数です。

2. ThymeleafでのJavaScript変数の扱い方

Thymeleafは、Spring Bootの@Controllerクラスから渡したデータをHTMLテンプレートに埋め込む仕組みです。たとえば、コントローラからModelに渡した変数を、th:textや[[${}]]でHTMLに反映させます。

変数の埋め込みには、主に次の2つの方法があります。

テキストとして表示する方法: th:text属性や[[${}]]式を使います。
JavaScript内で使う方法: th:inline="javascript"を使うと、サーバーの値をJavaScript変数として渡せます。

サンプル：コントローラから渡した変数をHTMLで表示

下の例は、@Controllerクラスで「ユーザー名」を渡している場合です。


@Controller
public class SampleController {
    @GetMapping("/sample")
    public String sample(Model model) {
        model.addAttribute("userName", "たろう");
        return "sample";
    }
}

この「userName」をThymeleafテンプレートで表示するときは、次のように書きます。


<p th:text="${userName}">ここにユーザー名が入ります</p>

これで、ブラウザ上には「たろう」という名前が表示されます。

JavaScript内で使う場合のポイント

もしこのuserNameをJavaScript変数として使いたいなら、th:inline="javascript"を使います。


<script th:inline="javascript">
    var user = [[${userName}]];
    console.log(user);
</script>

これにより、JavaScriptの変数userに、サーバーから受け取った「たろう」が入る仕組みです。

このように、Thymeleafの変数は、HTMLのテキスト表示だけでなくJavaScriptの処理にも使えるのが便利です。

3. onclickイベントでThymeleaf変数を受け取る方法

ここでは、Thymeleafの変数をonclickイベントに渡す方法を具体的に見ていきます。サーバー側（Controller）から渡された値を、JavaScriptの関数に引数として渡すことで、柔軟に処理できます。

まずは、Controllerから渡された「ユーザーID」をonclickで渡す例です。


@Controller
public class SampleController {
    @GetMapping("/users")
    public String users(Model model) {
        model.addAttribute("userId", 123);
        return "users";
    }
}

この「userId」をHTML側のボタンに組み込んで、JavaScriptの関数に渡す方法がこちらです。


<button onclick="showUser([[${userId}]])">ユーザー情報を見る</button>
<script th:inline="javascript">
    function showUser(id) {
        console.log("選ばれたユーザーID:", id);
    }
</script>

このように、Thymeleafの変数を[[${}]]の中に埋め込めば、onclickでJavaScript関数に値を渡すことができます。

4. 実際のコード例と動作確認

次に、複数のユーザーを一覧表示し、それぞれにonclickイベントでIDを渡すサンプルを確認します。まずはControllerでリストを用意します。


@Controller
public class UserController {
    @GetMapping("/userList")
    public String userList(Model model) {
        List<Integer> ids = List.of(101, 102, 103);
        model.addAttribute("ids", ids);
        return "userList";
    }
}

HTMLテンプレート側では、th:eachでリストをループし、各ユーザーにIDを渡すボタンを表示します。


<ul>
  <li th:each="id : ${ids}">
    <button onclick="showUser([[${id}]])">ユーザーID:[[${id}]] を表示</button>
  </li>
</ul>
<script th:inline="javascript">
  function showUser(id) {
    alert("ユーザーIDは " + id + " です");
  }
</script>

このサンプルをPleiades／Gradle環境で実行すると、ブラウザ上に３つのボタンが表示され、それぞれに異なるIDが渡されます。クリックすると、ダイアログでIDが確認でき、onclick変数渡しの動作がわかりやすく確認できます。

5. よくあるエラーや注意点

初心者の方がつまずきやすいポイントと注意点をまとめました。

IDが渡らない・undefinedになる

原因としてth:inline="javascript"が指定されていないケースが多いです。onclickでサーバー値を渡すなら、<script th:inline="javascript">を忘れずに書きましょう。

文字列型の値を渡すとき

数値でなく文字列を渡す場合は、'[[${value}]]'のようにシングルクォートで囲みましょう。そうしないとJavaScriptでエラーになります。


<button onclick="showName('[[${userName}]]')">名前を見る</button>
<script th:inline="javascript">
  function showName(name) {
    console.log("ユーザー名:", name);
  }
</script>

HTMLエスケープに注意

文字列に＜’や“などの記号が含まれる場合、表示が崩れたりエラーが起きることがあります。必要に応じてth:utextやエスケープ関数を使いましょう。

セキュリティに配慮する

onclickに直接値を埋め込む方法は簡単ですが、XSS（クロスサイトスクリプティング）対策を意識してください。信頼できるデータのみ渡すことと、必要に応じてサニタイズ処理を行うことが大切です。

動く環境を確認しよう

Pleiades＋Gradle環境で、ブラウザの開発者ツール（F12）を開き、実際に生成されたHTMLコードのonclick属性を確認しておくと、値が正しく埋め込まれているかすぐわかります。

6. コメントや可読性を保つコツ

onclickイベントに変数を渡すコードでは、コメントを丁寧に書くと後から見ても分かりやすくなります。例えば、どの変数がどこから来たのかや、関数の目的などをコメントで説明しておくと、可読性が上がります。


<script th:inline="javascript">
  // サーバーから渡されたユーザーIDを受け取る関数
  function showUser(id) {
    // idをアラートで表示
    alert("ユーザーIDは " + id + " です");
  }
</script>

また、クリックイベントに直接長い処理を書くと読みにくくなります。関数化して分けることで、見た目もすっきりし、再利用もしやすくなります。

変数名は分かりやすく

変数名はidだけでなくuserIdなど、意味が伝わる名前を使いましょう。こうすることで、コメントなしでもコードの意図が理解しやすくなります。

7. チーム開発でのonclickイベント活用例

チーム開発では、onclickに変数を渡す方法がとても役立ちます。たとえば、一覧画面で編集ボタンを押すと、その行のIDを渡してモーダルを開く、といった実装が便利です。


<ul>
  <li th:each="user : ${users}">
    <button onclick="openEditModal([[${user.id}]])">編集</button>
  </li>
</ul>

<script th:inline="javascript">
  function openEditModal(userId) {
    // 編集用モーダルを開く処理
    console.log("編集対象ユーザーID:", userId);
    // ここにモーダルを表示する処理を書く
  }
</script>

このように、onclickイベントで変数を渡して関数に処理を任せると、HTMLがすっきりして保守性が高まります。

また、コメントをテンプレートの上に入れておけば、他のメンバーがコードを見たときに処理内容をすぐ理解できるようになります。