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

新人

「先輩、Thymeleafを使ってJavaScriptで変数を扱う方法を知りたいです！」

先輩

「いいね。Thymeleafではサーバーサイドの値をJavaScriptに渡す方法があるんだ。Gradleプロジェクトでも同じようにできるから、順番に説明するね。」

新人

「サーバーサイドの変数をJavaScriptで使うって、ちょっと難しそうですけど大丈夫ですか？」

先輩

「大丈夫だよ。基本から丁寧に説明していくから、安心して！」

1. JavaScriptの変数の基本とThymeleafでの役割

まずはJavaScriptの変数の基本を簡単におさらいしておこう。JavaScriptではvar、let、constを使って変数を宣言できるんだ。例えば、下のように書けるよ。


<script>
  let message = "こんにちは！";
  const userName = "花子";
  var age = 25;
</script>

このようにして変数に値を入れておくと、JavaScriptの処理の中で自由に使えるようになるよ。

次に、Thymeleafを使うと、サーバーサイドの変数をHTMLに埋め込めるんだ。Spring MVCで@Controllerを使ったプロジェクトで、Modelにセットした値をThymeleafでHTMLに渡せるよ。pleiades環境＋Gradleでも同じ仕組みで使えるから安心だね。

2. Thymeleafのサーバーサイド変数をJavaScriptに埋め込む基本

サーバーサイドの変数をJavaScriptに埋め込むには、Thymeleafの[[${変数}]]構文を活用するよ。ただし、HTML内のJavaScriptで使うときは、th:inline="javascript"を忘れずに書くのがポイントだ。

例として、サーバーから「メッセージ」という文字列をJavaScriptに渡すサンプルコードを紹介するね。

コントローラクラス


@Controller
public class MessageController {
    @GetMapping("/show-message")
    public String showMessage(Model model) {
        model.addAttribute("message", "サーバーからのメッセージです！");
        return "show-message";
    }
}

HTMLテンプレート


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>変数の埋め込みデモ</title>
  <script th:inline="javascript">
    let serverMessage = /*[[${message}]]*/ "デフォルトメッセージ";
  </script>
</head>
<body>
  <h2>ThymeleafからJavaScriptへ変数渡し</h2>
  <button onclick="showServerMessage()">メッセージ表示</button>
  <script>
    function showServerMessage(){
      alert(serverMessage);
    }
  </script>
</body>
</html>

この例では、サーバーサイドのmessageをserverMessageというJavaScriptの変数に埋め込んでいるんだ。th:inline="javascript"のおかげで、サーバーの値が自動的にエスケープされて安全にJavaScriptで使えるようになるよ。

ボタンをクリックすると、サーバーから渡された「サーバーからのメッセージです！」がアラートで表示される仕組みなんだ。

3. JavaScript inline機能とth:inlineの役割

Thymeleafでサーバーサイドの変数をJavaScriptに渡すとき、重要な役割を果たすのがth:inline="javascript"です。この属性を使うことで、サーバーサイドの値を安全にJavaScriptに埋め込むことができます。

なぜこれが大事かというと、サーバーサイドの値にはユーザー入力などが含まれることがあります。そのままJavaScriptに埋め込むと、スクリプトエラーやセキュリティリスクになることがあるんだ。Thymeleafのth:inlineを使うと、自動的にエスケープしてくれるから安心なんだよ。

例えば、次のようにHTMLに直接埋め込むと問題が起こる可能性があるよ。


<script>
  let userInput = "${message}";
</script>

この書き方だと、サーバー側で「"（ダブルクォーテーション）」などが含まれていると、JavaScriptで正しく扱えなくなることがあるんだ。

一方、th:inline="javascript"を使えば、サーバー側の値が安全にJavaScriptの変数にセットされるよ。

4. サンプルコード：サーバーの値をJavaScript変数に渡す例

それでは実際に、サーバーサイドの値をJavaScriptの変数に渡す具体的な例を見てみよう。ここでは、コントローラでユーザー名を渡して、それをJavaScriptのアラートで表示する例を紹介するね。

コントローラクラス


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

HTMLテンプレート


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ユーザー情報表示</title>
  <script th:inline="javascript">
    let username = /*[[${username}]]*/ "ゲスト";
  </script>
</head>
<body>
  <h2>ユーザー情報を表示するデモ</h2>
  <button onclick="showUserName()">ユーザー名を表示</button>
  <script>
    function showUserName(){
      alert("ようこそ、" + username + "さん！");
    }
  </script>
</body>
</html>

この例では、model.addAttribute("username", "田中太郎")でサーバーサイドにセットされたユーザー名が、JavaScriptのusername変数に埋め込まれているんだ。th:inline="javascript"のおかげで、値の中に記号や空白があっても安全に扱えるようになっているよ。

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

ここでは、初心者がThymeleafでJavaScriptに変数を渡すときによくあるエラーと、その対策を解説するね。

サーバーの値がうまく渡されない

サーバー側でmodel.addAttributeを設定していないと、HTMLではデフォルトの値が表示されてしまうことがあるんだ。必ずコントローラで値を渡しているか確認しよう。

スクリプトエラーが発生する

HTML内のJavaScriptにサーバーの値を埋め込むとき、引用符や特殊文字がそのまま入ると構文エラーが起きることがあるよ。これを防ぐには、必ずth:inline="javascript"を使うことだね。

文字化けや日本語の表示がおかしい

サーバー側の文字コードやHTMLの<meta charset="UTF-8">が正しく設定されていないと、日本語が文字化けすることがあるよ。必ずHTMLにcharset="UTF-8"を入れて、ThymeleafテンプレートのファイルもUTF-8で保存しておこう。

これらのポイントを押さえれば、Thymeleafでサーバーの変数をJavaScriptに安全に渡せるようになるよ。次のセクションでは、さらに実践的なコツや注意点を解説していくね。

6. セキュリティ面の注意点と安全な変数の扱い方

Thymeleafでサーバーサイドの値をJavaScriptに渡すとき、特に大切なのがセキュリティ面の注意です。なぜなら、サーバーサイドの値にはユーザーが入力したデータが含まれることがあり、これをそのままJavaScriptに埋め込むと、XSS（クロスサイトスクリプティング）のリスクが出てくるんだ。

そこで活躍するのがth:inline="javascript"の自動エスケープ機能です。これを使うことで、サーバーサイドの値が正しくエスケープされて、スクリプトとして安全に扱えるようになります。

例えば、ユーザーが入力欄に<script>alert("攻撃");</script>と入れたとしても、Thymeleafはこれを文字列として扱い、JavaScriptの変数に埋め込むときに問題が起きないようにしてくれます。

以下に、セキュリティを意識したサンプルコードを示すね。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>安全な変数の扱い方</title>
  <script th:inline="javascript">
    let safeInput = /*[[${userInput}]]*/ "デフォルト入力";
  </script>
</head>
<body>
  <h2>サーバーから受け取った安全なデータ表示</h2>
  <button onclick="showSafeInput()">入力内容を表示</button>
  <script>
    function showSafeInput(){
      alert("入力内容: " + safeInput);
    }
  </script>
</body>
</html>

このように、th:inline="javascript"を常に使うことが、サーバーサイドの変数をJavaScriptに渡すときの基本的なセキュリティ対策なんだ。

7. まとめポイントと活用のコツ

ここまでThymeleafでサーバーサイドの変数をJavaScriptに渡す方法を見てきたね。改めてポイントを整理すると：

サーバーサイドの変数はmodel.addAttributeでセットしておく
JavaScriptに変数を渡すときは必ずth:inline="javascript"を使う
文字化けを防ぐためにcharset="UTF-8"を忘れない
変数名はできるだけ意味がわかる名前にする

この基本を守るだけでも、開発中のトラブルが大幅に減るよ。特に初心者は「サーバーサイドの値をHTMLに埋め込むときはth:inlineを必ず使う」という意識を持とう。

さらに、複雑なデータを扱うときは、サーバーサイドでMapやListをJSONに変換して渡す方法も役立つよ。ThymeleafはJSON化もサポートしているから、安心して使えるね。

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

実際の開発では、サーバーサイドの変数をJavaScriptに渡す場面はとても多いよ。例えば、ログイン中のユーザー名を表示したり、ユーザーの入力履歴を動的に扱ったりするシーンだね。

ここで大事なのは「自分で書いたコードを必ずテストすること」。JavaScriptのアラートなどを使って、サーバーから渡された値が正しく表示されるかを確認しておくと安心だよ。

そして、慣れてきたら、複雑なオブジェクトの扱いや、JavaScriptの関数に複数の引数を渡す方法も試してみよう。たとえば、次のような例だね。


<script th:inline="javascript">
  let userInfo = /*[[${user}]]*/ {};
</script>

この書き方なら、サーバーサイドのMapやListをJavaScriptでオブジェクトとして扱えるよ。クリックイベントで複数の情報をまとめて処理するようなケースでとても便利だね。

最後に、Spring MVCとThymeleafの連携をさらに深く学ぶためには、Spring公式ドキュメントや実際のサンプルプロジェクトを手元で試すことがおすすめだよ。自分の手を動かしながら、いろいろなパターンを試すうちに、JavaScriptとThymeleafの連携が自然に身についてくるはずだ。

これからも、JavaのWebアプリケーション開発をもっと楽しく、もっとスムーズに進めていこう！