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

新人

「先輩、Thymeleafを使ってJavaScriptに引数を渡す方法を教えてください！」

先輩

「もちろんだよ。ThymeleafはJavaScriptへの引数渡しにも便利な機能を持っているんだ。Gradleプロジェクトの開発でも役立つから、順番に見ていこう。」

新人

「どんな流れで引数を渡すのか、気になります！」

先輩

「まずはJavaScript引数の基本と、Thymeleafならではのポイントを解説するよ。」

1. JavaScript引数の基本とThymeleafでの扱い方

JavaScriptでは、関数に引数を渡すことで処理を柔軟に制御できます。例えばfunction showAlert(msg)のように、msgを受け取ってalertで表示します。

Thymeleafを使う場合、Modelで渡したサーバーサイドの値をJavaScript引数として埋め込むことができます。pleiades環境＋Gradleのプロジェクトでも同じ仕組みです。Thymeleafでは、[[${変数}]]構文を使うのがポイントです。

2. JavaScript inlineを使った引数の安全な書き方

Thymeleafでは、JavaScriptにサーバーの値を渡すときにth:inline="javascript"を活用するのがおすすめです。これにより、サーバーサイドの値をJavaScript変数に埋め込む際に自動的にエスケープしてくれるので、初心者でも安全に使えます。

例えば、次のようにmessageをサーバーサイドから渡す場合です。


@Controller
public class MessageController {
    @GetMapping("/message-demo")
    public String messageDemo(Model model) {
        model.addAttribute("message", "こんにちは、世界！");
        return "message-demo";
    }
}

そして、HTMLテンプレートでは以下のように書きます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>引数渡しデモ</title>
  <script th:inline="javascript">
    var message = /*[[${message}]]*/ "デフォルトメッセージ";
  </script>
</head>
<body>
  <button onclick="showAlert(message)">表示</button>
  <script>
    function showAlert(msg){
      alert(msg);
    }
  </script>
</body>
</html>

このようにth:inline="javascript"を使うと、サーバーの値を安全にJavaScriptの変数として利用できます。

3. サンプルコード：単純な引数渡しの例

ここまでの内容をまとめて、実際に動くサンプルコードを紹介します。初心者でもpleiades環境で簡単に試せる内容です。

コントローラクラス


@Controller
public class DemoController {
    @GetMapping("/demo")
    public String demo(Model model) {
        model.addAttribute("username", "花子");
        return "demo";
    }
}

HTMLテンプレート


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Thymeleaf引数デモ</title>
  <script th:inline="javascript">
    var username = /*[[${username}]]*/ "ゲスト";
  </script>
</head>
<body>
  <h2>ThymeleafからJavaScriptへ引数渡し</h2>
  <button onclick="greetUser(username)">ユーザー名を表示</button>
  <script>
    function greetUser(name){
      alert("こんにちは、" + name + "さん！");
    }
  </script>
</body>
</html>

この例では、コントローラから渡したusernameをJavaScriptのgreetUser関数に引数として渡しています。クリックすると「こんにちは、花子さん！」と表示されます。

4. 複雑なオブジェクトの引数としての扱い方

ここまでで文字列などの単純な引数渡しを解説してきましたが、実際の開発ではオブジェクトや配列など複雑なデータをJavaScriptに渡すこともよくあります。Thymeleafでは、サーバー側で用意したオブジェクトをJSON文字列に変換し、JavaScriptでパースして扱うのが便利です。

サーバー側でオブジェクトをモデルにセット


@Controller
public class UserController {
  @GetMapping("/user-info")
  public String userInfo(Model model) {
    Map<String, Object> user = new HashMap<>();
    user.put("name", "太郎");
    user.put("age", 25);
    user.put("email", "taro@example.com");
    model.addAttribute("user", user);
    return "user-info";
  }
}

HTMLテンプレートでJSON化して渡す


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>オブジェクト渡しデモ</title>
  <script th:inline="javascript">
    var user = /*[[${user}]]*/ {};
  </script>
</head>
<body>
  <h2>オブジェクトの引数渡し</h2>
  <button onclick="showUserInfo(user)">ユーザー情報表示</button>
  <script>
    function showUserInfo(userObj){
      alert("名前: " + userObj.name + "\\n年齢: " + userObj.age + "\\nメール: " + userObj.email);
    }
  </script>
</body>
</html>

この例では、サーバーサイドのMapがThymeleafを通じてJSONとして埋め込まれ、JavaScriptのuser変数として安全に渡されます。

5. よくあるエラーとその対策

サーバーサイドの値をJavaScriptに渡す際、初心者が陥りがちなエラーとその解決策を紹介します。

文字列の引用符が不足してSyntaxError

Thymeleafの埋め込み式を使うとき、JavaScriptの文字列として適切に引用符で囲む必要があります。特にth:inline="javascript"を忘れると、JSONとして埋め込まれないため、エラーになります。

オブジェクトのプロパティがundefinedになる

サーバー側のオブジェクトがnullの場合、JavaScript側でアクセスするとundefinedになります。サーバーサイドで必ず初期化するか、JavaScriptでif文で安全にアクセスしましょう。

特殊文字のエスケープ忘れによる構文エラー

ユーザー入力に特殊文字が含まれる場合、そのままJavaScriptに渡すと構文エラーになることがあります。th:inline="javascript"を必ず使って、Thymeleafにエスケープを任せるのが安全です。

6. 変数のスコープ管理と安全性のポイント

JavaScriptにサーバーの値を渡すとき、スコープ管理を正しく行うことが安全なコードを書くポイントです。

グローバルスコープを避ける工夫

JavaScriptの変数をグローバルに宣言すると、他のスクリプトとの衝突リスクがあります。IIFE（即時関数）を使って、スコープを限定するのがおすすめです。


<script th:inline="javascript">
(function(){
  var user = /*[[${user}]]*/ {};
  window.showUserInfo = function(){
    alert("ユーザー名: " + user.name);
  }
})();
</script>

この書き方では、user変数は関数の中に限定され、必要なshowUserInfoだけをwindowに公開します。

サーバー変数の安全な利用

ユーザーが入力した値をサーバーに渡し、それをJavaScriptに渡す場合、XSS対策が重要です。Thymeleafはth:inline="javascript"でエスケープを自動化してくれますが、セキュリティ意識を持って開発を進めることが大切です。

読みやすい変数名とコメント

外部ファイルやスクリプトが増えると、変数名がかぶりやすくなります。なるべく具体的な変数名を使い、必要に応じてコメントを残すことでメンテナンス性が高まります。

これらのポイントを押さえれば、Thymeleafを使ったJavaScript引数渡しが安全でスムーズに行えます。次のステップでは実践例や複雑なユースケースの紹介を予定しています。

7. セキュリティ面での注意点と安全な引数の書き方

ThymeleafでJavaScriptに引数を渡すときは、セキュリティ面でも注意が必要です。特に、ユーザーが入力した値をサーバーサイドで受け取り、そのままJavaScriptに渡すときは、XSS（クロスサイトスクリプティング）攻撃に注意しなければなりません。サーバーサイドの値をJavaScriptで扱う際は、必ずth:inline="javascript"を使ってエスケープ処理を任せるのが安全です。

例えば、ユーザーが入力したcommentを表示する例を見てみましょう。


@Controller
public class CommentController {
  @GetMapping("/comment-demo")
  public String commentDemo(@RequestParam String comment, Model model) {
    model.addAttribute("comment", comment);
    return "comment-demo";
  }
}

HTMLテンプレートでは次のように記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>コメント表示デモ</title>
  <script th:inline="javascript">
    var userComment = /*[[${comment}]]*/ "";
  </script>
</head>
<body>
  <h2>コメント確認</h2>
  <button onclick="alert(userComment)">コメントを表示</button>
</body>
</html>

このようにth:inline="javascript"を使うことで、コメントにスクリプトが含まれていても自動的に安全な形に変換されます。特に、ユーザーがHTMLタグやスクリプトを混入させる攻撃を防ぐために、必ずこの方法を使いましょう。

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

Thymeleafを使ってJavaScriptに引数を渡す方法は、シンプルな文字列だけでなく、オブジェクトや配列などさまざまなデータを渡せるのが大きな魅力です。安全に渡すポイントは、th:inline="javascript"を正しく使うことです。これを忘れると、構文エラーやセキュリティ上の問題が起きやすくなるので気を付けてください。

さらに、渡した値を使うJavaScript側のコードは、必ずHTML読み込み後に実行するようにDOMContentLoadedイベントを活用しましょう。これにより、HTML要素がまだ読み込まれていないタイミングで実行してしまうエラーを防げます。