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

新人

「先輩、Thymeleaf使ってJavaScriptのonclickイベントってどうやって設定するんですか？」

先輩

「ThymeleafではJavaScript inlineを活用して、ボタンなどにonclickイベントを簡単につけられるよ。pleiades環境でも同じだよ。」

新人

「具体的にはどんなふうに書けばいいですか？」

先輩

「まずはonclickの基本と、Thymeleafのinlineを使った書き方から説明していくね。」

1. ThymeleafでJavaScriptを使う意味とonclickイベントの基本

Spring MVCで@Controllerを使ってModelに値を渡したり、pleiades＋Gradle環境で開発しているとき、Thymeleafのinline機能を使えばJavaScriptへ値を簡単に渡せます。onclickイベントはユーザーがボタンをクリックしたときなどに処理を実行するためのJavaScriptの基本機能です。テンプレートからイベント処理を設定することで動的な画面操作が可能になります。

2. JavaScript inlineを活用したonclickイベントの書き方

JavaScript inlineを使うには、<script th:inline="javascript">タグと[[ ]]構文がポイントです。onclickイベントでは、th:onclick属性を使えばHTMLに直接関数呼び出しを設定できます。ボタンなどにクリック処理を簡単に埋め込めます。


<button th:onclick="|showMessage('[[${message}]]')|">メッセージ表示</button>

<script th:inline="javascript">
  function showMessage(msg) {
    alert("サーバーから：" + msg);
  }
</script>

このように、Modelから渡した値がonclickイベントの引数としてJavaScript関数に渡せます。

3. サンプルボタンにonclickイベントを設定する簡単な例

では、実際にコントローラとテンプレートを使った例を見てみましょう。


@Controller
public class ClickController {
  @GetMapping("/click-demo")
  public String clickDemo(Model model) {
    model.addAttribute("message", "クリックされたよ！");
    return "click-demo";
  }
}

次に、Thymeleafテンプレートclick-demo.htmlです。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>onclickイベントデモ</title></head>
<body>
  <h2>onclickイベントのサンプル</h2>
  <button th:onclick="|showMessage('[[${message}]]')|">クリックしてメッセージ</button>

  <script th:inline="javascript">
    function showMessage(msg) {
      console.log(msg);
      alert(msg);
    }
  </script>
</body>
</html>

ボタンをクリックすると、Modelに設定したmessageの内容がアラートとコンソールに表示されます。pleiades環境でもすぐに動かせるベーシックな例です。

4. イベント発火時にサーバーの値を利用する具体例

onclickイベントをクリックしたときにサーバー側の値を使いたいときは、Modelから渡したデータをスクリプト内に埋め込めば簡単に使えます。例えば、ユーザー名をボタンを押したときに表示する例を見てみましょう。


@Controller
public class UserController {
  @GetMapping("/user-click")
  public String userClick(Model model) {
    model.addAttribute("username", "太郎");
    return "user-click";
  }
}

次に、Thymeleafテンプレートです。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>User Click Demo</title></head>
<body>
  <h2>ユーザー名表示デモ</h2>
  <button th:onclick="|displayUser('[[${username}]]')|">名前を表示</button>

  <script th:inline="javascript">
    function displayUser(name) {
      alert("こんにちは、" + name + "さん！");
    }
  </script>
</body>
</html>

このようにModelのusernameをonclickで引数として渡し、クリック時に「こんにちは、太郎さん！」と表示できます。動的な内容をボタン操作で活かす基本形です。

5. よくあるエラーとその解決方法

初心者がonclickイベント付きで値渡しをするときに遭遇しやすいエラーとその対応策をご紹介します。

文字列の引用符忘れ

文字列引数をシングルクオートで囲まないと、SyntaxErrorになります。


<button th:onclick="|displayUser([[${username}]])|">NG</button>

正しくは以下のように直します。


<button th:onclick="|displayUser('[[${username}]]')|">OK</button>

エスケープされない値

名前に引用符や特殊文字が含まれていると、onclickの中でJavaScript構文エラーになる可能性があります。Thymeleaf側でth:utextやエスケープ用の関数を使い、文字を適切に扱いましょう。

関数定義のスコープ漏れ

onclickで呼び出す関数が定義されていないと、ReferenceErrorになります。必ず<script th:inline="javascript">内や外部スクリプトで定義しましょう。

6. onclickイベントで複雑な処理を呼び出すときのポイント

onclickで複雑な処理を呼び出すときは、コードの可読性とスコープ管理に気を遣う必要があります。以下のポイントに注意しましょう。

即時関数でスコープを分ける

グローバル変数や関数を汚染しないように、IIFE（即時実行関数）を使うと安全です。


<script th:inline="javascript">
(function(){
  function complexProcess(msg) {
    console.log("処理開始：" + msg);
    // 複雑な処理
  }
  window.startProcess = complexProcess;
})();
</script>

<button th:onclick="|startProcess('[[${message}]]')|">処理開始</button>

非同期処理を使うとき

fetchやPromiseなどの非同期処理をonclickで呼びたいときは、async関数を定義してスムーズに連携できます。


<script th:inline="javascript">
async function fetchData(id) {
  const res = await fetch('/api/data?id=' + id);
  const obj = await res.json();
  console.log(obj);
}
</script>
<button th:onclick="|fetchData([[${itemId}]])|">データ取得</button>

可読性のために関数名をわかりやすく

onclick属性に多くの処理を直接書くのではなく、関数名だけを書くほうがHTMLもJavaScriptもすっきりし、メンテナンスしやすくなります。

7. セキュリティ面の注意点と安全なonclickイベントの書き方

onclickイベントを設定するときには、セキュリティ面にも十分注意が必要です。特にサーバーから渡された値をJavaScriptの引数として渡す場合、クロスサイトスクリプティング（XSS）攻撃のリスクを考慮しましょう。例えば、ユーザーが入力した文字列をそのままonclickの引数として埋め込むと、悪意のあるスクリプトが実行されてしまう可能性があります。

安全なonclickイベントの書き方としては、まずサーバーから渡す値を必ずサニタイズし、エスケープ処理を施すことが大切です。Thymeleafでは通常、[[ ]]構文で自動的にHTMLエスケープされますが、onclick属性の中では手動で引用符で囲むなどの対策が重要です。

安全にonclickイベントを設定する例


<button th:onclick="|safeClick('[[${#strings.escapeJavaScript(message)}]]')|">安全なクリック</button>

<script th:inline="javascript">
  function safeClick(msg) {
    alert("安全に表示：" + msg);
  }
</script>

この例では、#strings.escapeJavaScript()関数を使ってサーバーから渡す文字列をJavaScript用にエスケープしています。これにより、文字列内に引用符や特殊文字があっても安全にonclickイベントに渡せるようになります。

また、可能な限りonclick属性に複雑なロジックを書かず、関数内に処理をまとめることで、XSSのリスクを低減できます。関数は<script th:inline="javascript">内に記述し、HTML側では引数だけを渡すようにするのがベストプラクティスです。

8. ポイントと活用のヒント

ここまで、ThymeleafのJavaScript inline機能を活用して、onclickイベントを安全に設定する方法を解説してきました。最後に、初心者が覚えておくべきポイントをまとめます。

onclickイベントはth:onclick属性でHTMLに書くことで、サーバー側の値を渡せる。
サーバーから渡す値は[[ ]]構文を使い、必ず引用符で囲むこと。
複雑な処理はonclick属性に直接書かず、関数にまとめると安全でメンテナンスしやすい。
エスケープ処理やサニタイズを必ず行い、XSSリスクを避ける。

これらのポイントをしっかり理解しておけば、実践的な画面操作やユーザー操作の制御をThymeleafとJavaScriptで簡単に実装できます。pleiades環境での開発でも同じ流れで進められるので、すぐに試してみてください。

9. 実践的なアドバイスと今後の学び方

初心者のうちは、onclickイベントの設定やサーバーの値の扱い方に慣れるまで、実際に小さなサンプルを作って試すのがおすすめです。Spring MVCのコントローラでModelに値を入れて、それをThymeleafのテンプレートで受け取り、onclickイベントで表示させる例を繰り返し練習しましょう。

実践的なアドバイスとしては、最初はサンプルコードをそのまま動かしてみることです。pleiades環境を使えば、Gradleで依存関係を管理しながらすぐにSpring MVCプロジェクトを作成できます。あとは、Controllerを作成し、model.addAttribute()で値を渡し、テンプレートでonclickイベントを試すだけです。

また、onclickイベントは画面の操作性を高める重要な仕組みです。今後さらにステップアップするには、次のような学習を続けるとよいでしょう。

JavaScriptの基本文法やイベントハンドリングの理解を深める。
非同期通信（AJAX）やfetch APIの使い方を学び、動的なデータ取得を試す。
セキュリティの基礎（XSS、CSRFなど）を学び、安全なWebアプリケーション開発を心がける。

JavaScriptやThymeleafを活用することで、画面の動的な操作ができるようになり、ユーザー体験を向上させるWebアプリケーションを作れます。何度も試しながら、少しずつ慣れていきましょう。

まとめ

ThymeleafとJavaScriptのonclickイベントを通して理解したこと

今回の記事では、ThymeleafとJavaScriptを組み合わせてonclickイベントを設定する方法について、基本から実践的な使い方、そしてセキュリティ面の注意点まで一通り確認してきました。 Spring MVCやSpring Bootを使ったWebアプリケーション開発において、サーバー側で用意したデータを画面上の操作に連動させることは非常に重要です。その中でもonclickイベントは、ボタンやリンクをきっかけに処理を実行できるため、ユーザー操作とJavaScript処理を結びつける基本中の基本と言えます。

Thymeleafでは、JavaScript inline機能を使うことで、コントローラからModelに詰めた値をそのままJavaScriptに渡せます。 th:onclick属性と[[ ]]構文を組み合わせることで、 HTMLとJavaScriptの間を自然につなげられる点は、他のテンプレートエンジンと比べても分かりやすい特徴です。 pleiades環境やGradleを使った一般的な開発環境でも同じ書き方ができるため、学んだ内容をそのまま実務や学習に活かしやすいのも大きなメリットです。

onclickイベント設計で意識したい実務視点

初心者のうちは、onclick属性の中に処理を直接書いてしまいがちですが、記事内でも触れたように、可読性と保守性を考えると関数呼び出しだけに留めるのが理想的です。 JavaScriptの処理は<script th:inline="javascript">内や外部ファイルにまとめ、 HTML側では「どの処理を呼ぶか」だけを書くようにすると、後からコードを読み返したときも理解しやすくなります。

また、サーバーから渡される値をonclickの引数として使う場合は、引用符の付け忘れやエスケープ漏れによるエラーが起きやすいポイントです。文字列は必ずシングルクオートで囲み、必要に応じて#strings.escapeJavaScript()を使うことで、 JavaScript構文エラーやXSSリスクを防ぐことができます。こうした細かな配慮が、安全で安定したWebアプリケーションにつながります。

サンプルコードで振り返る基本形

ここで、記事全体の内容を踏まえたシンプルなonclickイベントの基本形をもう一度確認してみましょう。サーバー側で値を用意し、ボタンのクリック時にJavaScriptで処理する流れは次のようになります。


<button th:onclick="|showAlert('[[${message}]]')|">クリック</button>

<script th:inline="javascript">
  function showAlert(msg) {
    alert(msg);
  }
</script>

この形をしっかり理解しておけば、メッセージ表示だけでなく、確認ダイアログの表示、非同期通信の開始、画面要素の切り替えなど、さまざまな処理へ応用できます。 onclickイベントは単なるボタン操作ではなく、画面とロジックをつなぐ重要な接点であることを意識して使っていきましょう。

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

生徒

「Thymeleafでonclickイベントを書くのって難しそうだと思っていましたけど、基本の形を覚えたら意外とシンプルですね。」

先生

「そうだね。ポイントはJavaScript inlineと引数の渡し方を理解することだよ。それが分かれば応用もしやすくなる。」

生徒

「onclickの中に直接処理を書くより、関数を呼ぶ形にしたほうが読みやすい理由もよく分かりました。」

先生

「実務では後から修正することも多いからね。可読性と安全性を意識して書くのが大事だよ。」

生徒

「エスケープ処理やセキュリティの話も勉強になりました。これからはその点も気をつけてonclickイベントを書いてみます。」