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

新人

「先輩、ThymeleafでJavaScriptに値を渡すってよく見ますけど、どんな仕組みですか？」

先輩

「簡単に言うと、テンプレート内でモデルとして渡した値をJavaScriptの変数にセットする方法だよ。pleiades＋Gradle環境でも同じだ。」

新人

「@Controllerでコントローラを作って、Modelに値を入れたら、それをJavaScriptでも使えるんですか？」

先輩

「その通り。th:inline="javascript"を使えば、Thymeleafの値をJavaScriptに埋め込めるよ。

1. ThymeleafでJavaScriptに値を渡すとは？

ThymeleafはサーバーサイドでHTMLを生成するテンプレートエンジンです。Spring MVCで@Controllerを使ってModelに値をセットし、それをテンプレートで展開します。JavaScriptへ値を渡すことで、クライアント側で動的な処理や表示制御が可能になります。

pleiades＋Gradle環境でも、Thymeleafに値を渡す流れは同じです。Modelに入れた値をJavaScriptで使えば、画面上で柔軟な動きを実現できます。

2. JavaScriptに値を渡す仕組みと基本の書き方

JavaScriptにThymeleafの値を渡すには、th:inline="javascript"という属性を使います。これにより、[[ ]]構文が有効になり、サーバーサイドの変数を安全にJavaScriptに注入できます。


<script th:inline="javascript">
  var count = [[${count}]];
  var message = "[[${message}]]";
</script>

このように、数値や文字列をJavaScript変数として取り込めます。数値はそのまま、文字列は必ず引用符で囲むのがポイントです。

3. JavaScriptへの簡単な値渡し例

では、簡単な値渡しの例を見てみましょう。まずコントローラです。


@Controller
public class DemoController {
    @GetMapping("/demo")
    public String demo(Model model) {
        model.addAttribute("count", 3);
        model.addAttribute("message", "こんにちはThymeleaf");
        return "demo";
    }
}

次に、demo.htmlでJavaScriptに値を渡します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <h2>JavaScript値渡しデモ</h2>
  <script th:inline="javascript">
    var count = [[${count}]];
    var msg = "[[${message}]]";
    for(var i=0;i<count;i++){
      console.log(msg + " 回数：" + (i+1));
    }
  </script>
</body>
</html>

このようにModelからもらった値をJavaScriptで使えるようになります。pleiades環境でも簡単に試せるので初心者でも安心です。

4. 変数に渡す場合の具体例

JavaScriptにThymeleafの変数を渡すとき、単純な値だけでなく、配列やオブジェクトも扱えます。たとえば、サーバー側でリストやマップをModelに追加して、そのままJavaScriptの変数にすることが可能です。これにより、画面上で動的なリスト描画やフィルタ処理を行いやすくなります。


@Controller
public class ListController {
    @GetMapping("/list")
    public String list(Model model) {
        List<String> items = Arrays.asList("りんご", "みかん", "バナナ");
        model.addAttribute("items", items);
        return "list";
    }
}

次に、テンプレート側では以下のように書きます。


<script th:inline="javascript">
  var fruits = /*[[${items}]]*/ [];
  console.log(fruits);  // ["りんご","みかん","バナナ"]
</script>

この構文では、/*[[${items}]]*/を使うことでJavaScriptのコメント内にJSON形式でリストが埋め込まれます。JavaScript上でそのまま配列として扱えるため、forEachやfilterといったメソッドで簡単に操作できます。

また、Mapやオブジェクトを渡したいときは同様の手順です。事前にモデルへ追加し、テンプレート側でコメント付き構文を使えば、JavaScriptに安全に渡せます。

5. JavaScriptでの受け取り方のポイント

JavaScriptでThymeleafから渡された値を受け取るときは、変数のスコープや型に注意が必要です。たとえば、配列の受け取りを間違えるとundefinedや文字列になるケースがあるので、型チェックを行いながら扱うのが安心です。

具体的には、次のような書き方がポイントです。


<script th:inline="javascript">
  var fruits = /*[[${items}]]*/ [];
  if (Array.isArray(fruits)) {
    fruits.forEach(function(f) {
      console.log("果物：" + f);
    });
  } else {
    console.error("fruitsは配列ではありません");
  }
</script>

このようにArray.isArrayを使えば、期待した値が配列であるか確認できます。数値や文字列などの型も、typeof演算子やisNaN関数でチェックすることで型が違うことでの混乱を防げます。

さらに、変数名の命名も重要です。th:inlineで埋め込む変数は、グローバル変数になりがちなので、必要に応じてオブジェクト内にまとめたり、IIFE（即時呼び出し関数）を使ってスコープを狭めるのも良い方法です。

6. よくあるエラーと注意点

初心者がThymeleafでJavaScript値渡しをするとよく起きるエラーとその解決方法をいくつかご紹介します。

JSONパースエラー

コメント付き構文（/*[[...]]*/）を使わず、普通のtextareaタグやscriptタグ内に値を出力した場合、JSONの形式が崩れてパースエラーになることがあります。必ずコメント付き構文を使い、JSON形式を維持しましょう。

文字列の引用漏れ

文字列をそのまま埋め込むと、値にスペースや日本語が含まれる場合、JavaScript側でSyntaxErrorが発生することがあります。必ず引用符を使って囲むようにしてください。

型の不一致

ModelにIntegerやDoubleを渡しているのに、JavaScriptでは文字列として扱われているケースがあります。parseIntやparseFloatを使って数値に変換し、必要に応じて型チェックを行いましょう。


<script th:inline="javascript">
  var count = /*[[${count}]]*/ 0;
  if (typeof count !== "number") {
    count = parseInt(count);
  }
  console.log("countの型：" + typeof count); 
</script>

スコープの競合

JavaScriptの変数名が既存のグローバル変数と被ると、意図しない挙動を引き起こすことがあります。変数名は一意に、必要ならオブジェクトでまとめてスコープを管理しましょう。

以上の注意点を守ることで、ThymeleafとJavaScriptの値渡しが安全で効率よく実装できるようになります。

7. セキュリティ面の注意とベストプラクティス

ThymeleafでJavaScriptに値渡しする場合、セキュリティ面は非常に大切です。特に、ユーザーの入力や外部APIからの値など、信頼できないデータをJavaScriptで扱うときは、クロスサイトスクリプティング（XSS）攻撃のリスクがあります。

Thymeleafのth:inline="javascript"は自動でHTMLやJavaScript用にエスケープしてくれますが、コメント付き構文/*[[...]]*/を使う場合でも、値の形式に合わせたサニタイズが重要です。モデルに入れる前に、サーバー側でStringEscapeUtils.escapeEcmaScript()のようなライブラリを使ってエスケープ処理をしておくと安心です。

また、テンプレート内で直接JavaScriptルーチンを記述する際は、できるだけ最小限にし、ロジックが複雑になる場合は外部JavaScriptファイルに切り出すことで、保守性とセキュリティの両面でメリットがあります。


model.addAttribute("userInput", StringEscapeUtils.escapeEcmaScript(userInput));

このように、コントローラ側で値をエスケープしてからModelに追加することで、テンプレートで値を安全に扱えます。XSS対策は初心者にもとても重要なので、必ず習慣にしましょう。

8. ポイント整理

ここまでの内容を振り返り、初心者でも覚えておきたい重要なポイントをまとめます。

JavaScriptに値を渡すときはth:inline="javascript"やコメント付き構文を使って安全に展開すること。
文字列は必ず引用符で囲む、数値はparseIntやparseFloatなどで型を保証する。
配列やオブジェクトを渡す場合は、JSON形式で変数展開し、Array.isArrayなどで型チェックを行う。
セキュリティ対策として、サーバー側でエスケープ処理を行い、テンプレート内の直接記述は最小限に抑える。
変数名のスコープ管理や外部ファイルの活用で、可読性と保守性を高める。

初心者が安心して実装できるように、これらのポイントは忘れず押さえてください。

9. 実践的なアドバイスやヒント

ここからは、実際の開発現場で役立つちょっとした工夫やヒントをご紹介します。

外部JavaScriptファイルに分離してキャッシュを活かす

最初はテンプレート内でJavaScriptを試し、その後記述が増えてきたら外部ファイルに切り分けます。そうすることで、ブラウザキャッシュを利用でき、パフォーマンスが向上します。

IIFEで即時実行関数を使う

グローバル変数の衝突を避けるために、以下のようにIIFEを活用すると安全です。


<script th:inline="javascript">
(function(){
  var msg = "[[${message}]]";
  console.log(msg);
})();

ブラウザの開発者ツールを活用しよう

値が正しくJavaScriptに渡されているかは、まずブラウザのコンソールでconsole.log()して確認しましょう。ネットワークタブで変数展開部分のHTMLを確認するのも効果的です。

ユニットテストやE2Eテストで検証する

Thymeleafの出力結果に対してユニットテストを行ったり、SeleniumやCypressなどでE2Eテストを行い、値が正しくJavaScriptに渡されているかを確認すると品質の安定につながります。

以上のアドバイスは、pleiades＋Gradle環境でもそのまま活用できます。まずは小さなテンプレートで動かしながら、徐々に応用パターンに挑戦してみてください。

今回の記事を参考に、ThymeleafでJavaScript連携をマスターし、ユーザーに快適な動的Web体験を提供していきましょう！

まとめ

ThymeleafとJavaScriptの値渡しを理解するための総整理

この記事では、Thymeleafを使ってJavaScriptへ値を渡す方法について、基本的な仕組みから実践的な使い方、さらにエラー対策やセキュリティ面まで段階的に確認してきました。 Spring MVCで@Controllerを使い、Modelに値を格納し、それをThymeleafテンプレートで受け取り、 JavaScriptの変数として展開する流れは、サーバーサイドとクライアントサイドをつなぐ重要な橋渡しです。この仕組みを正しく理解することで、画面上での動的な表示制御やユーザー操作への応答が、無理なく実装できるようになります。

特に重要なのが、th:inline="javascript"の存在です。この指定があることで、Thymeleaf独自の[[ ]]構文やコメント付き構文/*[[...]]*/が有効になり、サーバー側の値を安全にJavaScriptへ埋め込めます。数値、文字列、配列、オブジェクトといったさまざまな型を扱えるため、検索条件や一覧データ、設定情報など、実務でよく使われるデータ連携を柔軟に実装できます。 pleiadesとGradleの環境でも同じ書き方が使えるため、初心者でも迷わず試せる点も大きなメリットです。

型と書き方を意識することが安定した実装につながる

JavaScriptに値を渡す際にありがちな失敗として、文字列の引用符忘れや、配列をそのまま展開してしまうケースがあります。これらは一見すると小さなミスですが、実際の画面ではSyntaxErrorやundefinedといった形で現れ、原因が分からず悩むことになりがちです。そのため、文字列は必ず引用符で囲む、配列やオブジェクトはコメント付き構文でJSONとして渡す、そしてJavaScript側で型チェックを行う、という基本を徹底することが大切です。

また、変数のスコープ管理も重要なポイントです。テンプレート内に直接JavaScriptを書くと、グローバル変数が増えやすくなります。 IIFEを使ってスコープを限定したり、ある程度処理が増えてきたら外部JavaScriptファイルへ切り出すことで、可読性と保守性を高めることができます。これらの工夫は、チーム開発や長期運用を考えたときに大きな差となって表れます。

セキュリティを意識した値渡しの重要性

ThymeleafとJavaScriptを連携させる際に、忘れてはならないのがセキュリティ対策です。ユーザー入力をそのままJavaScriptに渡してしまうと、クロスサイトスクリプティングといった攻撃のリスクが高まります。 Thymeleafは自動エスケープ機能を備えていますが、それに頼りきりになるのではなく、コントローラ側で事前にエスケープ処理を行う習慣を身につけることが重要です。安全な値渡しを意識することで、実務でも安心して使えるテンプレート設計ができるようになります。

基本構成をもう一度確認するサンプル

最後に、ThymeleafからJavaScriptへ値を渡す基本形をあらためて整理しておきましょう。次の例は、Modelの値をJavaScript変数として扱う、最もシンプルで実践的な構成です。


<script th:inline="javascript">
  var count = /*[[${count}]]*/ 0;
  var message = "[[${message}]]";
  console.log("回数：" + count);
  console.log("メッセージ：" + message);
</script>

この形をベースにして、配列やオブジェクトへ応用していけば、多くの画面要件に対応できるようになります。小さなサンプルで動作を確認しながら、少しずつ複雑な処理に挑戦していくのがおすすめです。

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

生徒

「ThymeleafでJavaScriptに値を渡すのは難しそうだと思っていましたが、仕組みが分かると意外と整理されているんですね。」

先生

「そうだね。ポイントを押さえれば、 ModelとJavaScriptの連携は自然に書けるようになるよ。」

生徒

「配列やオブジェクトを渡せるのも便利ですね。一覧画面や検索条件で使えそうです。」

先生

「実務ではよく使う場面だね。型とセキュリティを意識すれば、安心して使えるよ。」

生徒

「まずは小さなサンプルから試して、慣れてきたら外部JavaScriptにも挑戦してみます。」