Thymeleaf javascriptへの変数渡しまとめ！初心者向け

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

新人

「先輩、Thymeleafでサーバーの変数をJavaScriptに渡す方法ってあるんですか？」

先輩

「もちろんあるよ。ThymeleafはサーバーサイドでHTMLを生成するテンプレートエンジンだから、変数をHTMLやJavaScriptに埋め込むことができるんだ。」

新人

「なるほど！サーバー側の値をブラウザ側で使えるようにするってことですね。具体的にどうやって渡すんですか？」

先輩

「いい質問だね。それじゃあ、ThymeleafとJavaScriptを連携して変数を渡す仕組みを一緒に見ていこうか。」

1. Thymeleafとは？テンプレートエンジンの基本

Thymeleaf（タイムリーフ）は、Spring Frameworkで広く使われるテンプレートエンジンです。HTMLファイルの中にth:textやth:ifなどの属性を使って、サーバーサイドで値を埋め込みながら動的にページを生成することができます。

テンプレートエンジンとは、サーバーでHTMLを動的に生成する仕組みのことです。例えば、ログインしているユーザー名をページに表示したり、条件によって表示内容を切り替えたりするときに使います。

Thymeleafの特徴は、HTMLを直接ブラウザで開いても崩れない点です。つまり、テンプレートとしても通常のHTMLとしても使えるため、デザイナーとエンジニアの両方が扱いやすい構造になっています。

ここでのポイントは、「Thymeleafはサーバー側で動く」ということです。つまり、HTMLを生成するときにすでに変数の値が埋め込まれている状態になります。

SpringアプリケーションでThymeleafを使うには、pleiades環境でプロジェクトを作成し、Gradleの依存関係でThymeleafを追加するのが一般的です。Pleiadesのチェック機能を使えば簡単に導入できます。

基本的なコントローラは次のように書けます。


@Controller
public class HelloController {

    @GetMapping("/hello")
    public String showPage(Model model) {
        model.addAttribute("message", "こんにちは、Thymeleaf！");
        return "hello";
    }
}

この例では、@Controllerを使ってModelに値を渡しています。Thymeleafはこのmessageという変数をHTMLテンプレートで利用できるようにします。

次のようにHTML側で受け取ることができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Hello Thymeleaf</title>
</head>
<body>
  <h3 th:text="${message}">ここにメッセージが表示されます</h3>
</body>
</html>

このように、Thymeleafのth:text属性を使えば、サーバーで設定した変数をHTMLに埋め込むことができます。

Thymeleafは、変数を使った動的なHTML生成や条件分岐に非常に強力で、Spring MVCと自然に連携できるのが特徴です。

2. JavaScriptとの連携の考え方（サーバー変数をクライアントへ渡す仕組み）

ここからは、ThymeleafとJavaScriptを組み合わせる方法を学びましょう。Webアプリケーションでは、サーバーで取得したデータをJavaScriptに渡して、画面上の動作を制御するケースがよくあります。

Thymeleafを使えば、サーバーの変数をJavaScript内に簡単に埋め込むことができます。ポイントは、th:inline="javascript"を使うことです。これにより、Thymeleafが変数をJavaScriptコードの中に直接埋め込んでくれます。

まず、コントローラでサーバー変数を設定します。


@Controller
public class DataController {

    @GetMapping("/data")
    public String sendData(Model model) {
        model.addAttribute("userName", "太郎");
        model.addAttribute("age", 25);
        return "data";
    }
}

次に、ThymeleafテンプレートでJavaScriptに変数を渡します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ThymeleafとJavaScriptの連携</title>
</head>
<body>
  <h3>ThymeleafからJavaScriptへ変数を渡す例</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var user = [[${userName}]];
    var age = [[${age}]];
    console.log("ユーザー名:", user);
    console.log("年齢:", age);
    /*]]>*/
  </script>
</body>
</html>

このように、[[${userName}]]と書くことで、サーバー側の変数がJavaScriptの変数に埋め込まれます。ブラウザのコンソールを開くと、「ユーザー名: 太郎」「年齢: 25」と出力されます。

この仕組みは、サーバーから受け取ったデータをJavaScriptで使いたいときに非常に便利です。例えば、条件分岐やボタンの有効化・無効化、画面の非同期表示などを行うときに活用できます。

また、数値や真偽値（true／false）はそのまま渡せますが、文字列の場合は自動的にクォートが付加される点にも注意が必要です。もし値が複雑なオブジェクトであれば、JSON形式に変換して渡すのが一般的です。

例えば次のように書くと、JSON形式のデータをJavaScriptで受け取ることもできます。


<script th:inline="javascript">
  /*<![CDATA[*/
  var userInfo = /*[[${userInfo}]]*/ {};
  console.log(userInfo);
  /*]]>*/
</script>

この方法は、SpringコントローラでMapやDTOを渡したいときにも応用できます。Thymeleafはサーバー変数を安全に埋め込むため、JavaScriptとの連携が自然で扱いやすいのです。

ここまでで、サーバー変数をJavaScriptに渡す基本構造を理解できたと思います。次の記事では、条件分岐やイベント連動など、より実践的な「動的な連携方法」を学んでいきましょう。

3. @ControllerからThymeleafへ値を渡す方法

ここでは、Springの@ControllerクラスからThymeleafに値を渡す具体的な流れを見ていきましょう。開発環境はpleiadesを使用し、依存関係はGradleで管理します。プロジェクトを作成したら、まずはコントローラを作成します。ここでのポイントは、Modelオブジェクトを使ってテンプレートに値を渡すことです。

次のサンプルでは、ユーザー名と年齢をThymeleafテンプレートに渡しています。


@Controller
public class UserController {

    @GetMapping("/user")
    public String showUser(Model model) {
        model.addAttribute("name", "花子");
        model.addAttribute("age", 28);
        return "user";
    }
}

model.addAttributeで設定した値は、HTMLテンプレート内で${name}や${age}として参照できます。Thymeleafはリクエスト時にこの値をHTMLへ埋め込み、ブラウザで見える形に変換します。

例えば、次のようなHTMLファイル（user.html）を作成します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ユーザー情報</title>
</head>
<body>
  <h2 th:text="'名前: ' + ${name}"></h2>
  <h2 th:text="'年齢: ' + ${age} + '歳'"></h2>
</body>
</html>

これを実行すると、Thymeleafが${name}と${age}をサーバー側で展開し、HTMLとして「名前: 花子」「年齢: 28歳」と出力します。つまり、ブラウザにはプレーンなHTMLが返るため、JavaScriptや他の要素からも容易に扱える状態になります。

この流れがThymeleafの基本です。サーバーで生成された値をテンプレートに差し込むことで、静的HTMLでは実現できない動的な画面表示を可能にしています。

4. ThymeleafからJavaScriptに変数を埋め込む（th:inline="javascript"の使い方）

ここからは、ThymeleafとJavaScriptを連携させて、サーバーの変数をスクリプト内で扱う方法を学びましょう。Thymeleafには、JavaScript内に安全に変数を埋め込むための専用機能th:inline="javascript"があります。

通常のHTMLのscriptタグでは、サーバーの変数を直接使うことはできません。しかし、th:inline="javascript"を指定することで、Thymeleafがサーバー側の値をJavaScript構文として展開してくれます。

次の例を見てみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ThymeleafとJavaScriptの連携</title>
</head>
<body>
  <h3>サーバー変数をJavaScriptで使う</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var userName = [[${name}]];
    var userAge = [[${age}]];
    console.log("ユーザー名:", userName);
    console.log("年齢:", userAge);
    /*]]>*/
  </script>
</body>
</html>

ここでの重要ポイントは、変数を囲む構文[[${変数名}]]です。これはThymeleafがJavaScript内で正しい形式に展開するための特別な書き方です。もしこれを忘れると、ただの文字列として扱われてしまい、正しい値が渡りません。

また、Thymeleafは文字列型の変数に自動でクォート（"）を付けてくれます。たとえば上記では「花子」という文字列が"花子"の形でJavaScriptに出力されるため、安全に扱えます。数値型の場合はクォートを付けず、そのまま数値として出力します。

もしサーバー側でMapやDTOを使って複数の値を渡したい場合、Thymeleafが自動的にJSON形式で展開してくれるので、次のように書くことも可能です。


<script th:inline="javascript">
  /*<![CDATA[*/
  var userInfo = /*[[${userInfo}]]*/ {};
  console.log(userInfo);
  /*]]>*/
</script>

このようにしておけば、JavaScript側でオブジェクトとして直接アクセスでき、userInfo.nameやuserInfo.ageのように参照できます。

ThymeleafとJavaScriptを連携させる場合は、HTMLの中にロジックを埋め込みすぎないように注意が必要です。サーバーで値を渡し、JavaScript側では画面操作に専念する設計が理想的です。

5. JavaScriptでThymeleaf変数を使って条件分岐する例

次は、Thymeleafから渡された変数を使って、JavaScript側で条件分岐を行う例を見ていきましょう。条件分岐（if文）を使えば、サーバーからの値に応じて動的に画面を変えることができます。

例えば、年齢によって表示メッセージを切り替えるような処理です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>条件分岐のサンプル</title>
</head>
<body>
  <h3>Thymeleaf変数を使ったJavaScript条件分岐</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var userAge = [[${age}]];
    if (userAge >= 20) {
        alert("成人ユーザーです");
    } else {
        alert("未成年ユーザーです");
    }
    /*]]>*/
  </script>
</body>
</html>

このサンプルでは、[[${age}]]でサーバーから受け取った値をJavaScriptの変数userAgeに格納しています。その後、if文で値を判定して、年齢が二十歳以上なら「成人ユーザー」、それ以外なら「未成年ユーザー」とメッセージを出しています。

このように、ThymeleafとJavaScriptを組み合わせることで、サーバーサイドの値を動的な画面処理に利用できます。たとえば、ボタンの表示・非表示を切り替えたり、ユーザーの状態に応じたガイドメッセージを出したりといった工夫が可能です。

ただし、注意点としてJavaScript内でThymeleafの式構文を書くときには、必ずth:inline="javascript"を付けることです。これを付け忘れると、Thymeleafの変数展開が行われず、スクリプト内がそのまま出力されてしまいます。

初心者がよくつまずくのは、スクリプトの中で変数が文字列になっているかどうかの確認を怠ることです。例えば、var age = "[[${age}]]";のように書くと文字列扱いになり、比較がうまく動作しません。正しくはvar age = [[${age}]];のようにクォートを付けない形にしましょう。

また、JavaScriptのalertやconsole.logを使って実際の値を確認すると、デバッグがしやすくなります。サーバーで設定した値が正しく渡っているかを常にチェックする習慣をつけておくと良いでしょう。

Thymeleafのth:inline構文を正しく理解すれば、サーバー変数を自由自在にJavaScriptに渡せるようになります。これはSpringアプリケーションで動的なWebページを作るうえで非常に強力なテクニックです。

6. JavaScript側で値を動的に変更して画面表示を切り替える応用

ここでは、Thymeleafから渡された変数をJavaScript側で動的に変更し、画面の内容を切り替える応用的な方法を解説します。これを理解すると、サーバーから受け取ったデータをもとに、ユーザー操作に応じたリアルタイムな画面制御が可能になります。

まず、サーバー側では@Controllerから値を渡します。


@Controller
public class DynamicController {

    @GetMapping("/dynamic")
    public String showDynamicPage(Model model) {
        model.addAttribute("userName", "山田太郎");
        model.addAttribute("status", "active");
        return "dynamic";
    }
}

次に、HTMLテンプレート（dynamic.html）側では、Thymeleafの変数をJavaScriptで受け取り、ページ表示を切り替えます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>動的な画面切り替え</title>
</head>
<body>
  <h3 id="statusMessage">ステータスを表示します</h3>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var status = [[${status}]];
    var name = [[${userName}]];

    if (status === "active") {
        document.getElementById("statusMessage").textContent = name + " さんは現在アクティブ状態です。";
    } else {
        document.getElementById("statusMessage").textContent = name + " さんは現在非アクティブです。";
    }
    /*]]>*/
  </script>
</body>
</html>

このように、サーバーから渡された変数statusをJavaScriptで判定し、HTMLの内容を動的に書き換えることができます。ページを再読み込みすることなく、条件に応じて内容を変える動的な画面制御の第一歩です。

実際の開発現場では、ユーザーの状態やフラグ値に応じて、ボタンの活性・非活性を切り替えたり、メッセージを変更するようなケースで多く使われます。

7. onclickイベントと組み合わせた動的制御の例

次に、ボタンをクリックしたときにThymeleafから渡された変数を使って動的に処理を行う例を見ていきましょう。onclickイベントを使うことで、ユーザー操作に応じて画面の状態を変更できます。

まず、テンプレートにボタンを設置します。クリック時にメッセージの表示内容が切り替わるようにしてみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>onclickイベントのサンプル</title>
</head>
<body>
  <h3 id="message">ボタンをクリックしてみましょう</h3>
  <button onclick="toggleStatus()">切り替え</button>

  <script th:inline="javascript">
    /*<![CDATA[*/
    var user = [[${userName}]];
    var active = true;

    function toggleStatus() {
        if (active) {
            document.getElementById("message").textContent = user + " さんは今オフラインになりました。";
        } else {
            document.getElementById("message").textContent = user + " さんはオンラインです。";
        }
        active = !active;
    }
    /*]]>*/
  </script>
</body>
</html>

このサンプルでは、onclick属性にtoggleStatus()関数を指定しています。クリックするたびにactiveの値が反転し、表示メッセージが交互に切り替わります。

Thymeleafで渡した変数userNameをJavaScript側でそのまま使うことで、ボタン操作とサーバー変数の組み合わせが自然に実現できます。これにより、ユーザーごとに異なるメッセージや操作結果を画面に即時反映するようなインタラクティブなUIが実現できます。

このような動的制御は、ログイン状態の確認、ボタンの切り替え、フォーム入力の動的チェックなどにも応用できます。特にシングルページアプリケーション風の動作を実現する際に便利です。

8. サーバーとクライアントを連携させるベストプラクティス（まとめ的内容）

ここまで学んできたように、ThymeleafとJavaScriptの連携は、サーバーサイドのデータをクライアント側で動的に扱うための重要な仕組みです。最後に、実践的な観点からベストプラクティスを整理しておきましょう。

① サーバーは「データの提供」、クライアントは「動作の制御」

Thymeleafの役割は、サーバーで変数をテンプレートに埋め込み、HTMLを生成することです。JavaScriptはそれをもとに画面の動作や見た目を制御します。サーバーとクライアントの役割を明確に分けておくことで、保守性が高まります。

② th:inlineを活用して安全に値を埋め込む

JavaScriptに値を渡すときは、必ずth:inline="javascript"を付けましょう。これを忘れると、サーバー変数が正しく展開されず、スクリプトエラーの原因になります。また、文字列の自動クォート機能を利用することで、意図しない文字列結合を防ぐことができます。

③ onclickやイベント連携で動的なUIを作る

ボタンやリンクなどのユーザー操作とサーバー変数を組み合わせることで、動的なインターフェースが実現できます。Thymeleaf変数を使えば、画面の状態をユーザー単位で切り替えることも可能です。

④ デバッグと動作確認の習慣をつける

ThymeleafでJavaScriptに値を渡すときは、console.log()を活用して、実際にどんな値が展開されているかを確認しましょう。サーバーで設定した値が正しくクライアントに届いているかを常にチェックすることで、予期せぬ不具合を防ぐことができます。

⑤ コードを整理して再利用性を高める

画面が複雑になると、スクリプト内にThymeleaf構文を多用しすぎて可読性が下がる場合があります。その場合は、必要な変数だけを渡し、JavaScript側でロジックを整理するのが効果的です。data-*属性を使うのもおすすめです。

ThymeleafとJavaScriptを上手に組み合わせると、サーバーサイドとクライアントサイドの橋渡しがスムーズになります。静的HTMLでは難しい「条件分岐」や「動的な表示切り替え」も、簡潔なコードで実現できるのが魅力です。

Springアプリケーション開発では、サーバーとクライアントをどのように連携させるかが品質を左右します。Thymeleafはその中核を担うテンプレートエンジンとして、シンプルかつ強力な機能を提供しています。

初心者のうちは、まず「サーバーで値を設定→Thymeleafで受け取る→JavaScriptで動かす」という流れを丁寧に確認しながら実装してみましょう。これを繰り返すうちに、自然と動的Webアプリの基本設計が身につきます。

まとめ

今回の記事では、Spring Boot開発において欠かせないテンプレートエンジン「Thymeleaf（タイムリーフ）」を使用し、サーバー側の変数をJavaScriptへ安全かつ効率的に渡す方法について詳しく解説してきました。Webアプリケーションの利便性を高めるためには、サーバーサイドで保持しているユーザー情報やステータスを、ブラウザ側のJavaScriptで動的に扱う技術が不可欠です。

ThymeleafとJavaScript連携の重要ポイント

まず、最も重要なポイントは th:inline="javascript" 属性の使用です。これを使うことで、ThymeleafはJavaScriptの構文を理解し、サーバー変数を適切な形式（文字列ならクォート付き、数値ならそのまま）で展開してくれます。また、インライン表記の [[${変数名}]] を活用することで、スクリプト内での変数代入が非常にスムーズになります。

さらに、単一の値だけでなく、DTO（Data Transfer Object）やMapといった複雑なオブジェクト構造も、Thymeleafが自動的にJSON形式へとシリアライズしてくれるため、フロントエンド側でのデータハンドリングが飛躍的に楽になります。これにより、非同期通信（Ajax）を多用せずとも、ページ初期表示時に必要なデータを一括してJavaScriptに引き渡すことが可能となります。

実践的なサンプルプログラム

ここで、これまでの内容を凝縮した実践的なサンプルコードをおさらいしましょう。コントローラからリスト形式のデータを渡し、それをJavaScriptで受け取って動的にコンソール表示や画面制御を行う例です。


// Controller側の実装例
@Controller
public class SummaryController {
    @GetMapping("/summary")
    public String summaryPage(Model model) {
        // 文字列や数値の受け渡し
        model.addAttribute("pageTitle", "学習のまとめページ");
        model.addAttribute("accessCount", 1500);
        
        // オブジェクト（Map）の受け渡し
        Map<String, Object> config = new HashMap<>();
        config.put("theme", "dark");
        config.put("isPremium", true);
        model.addAttribute("userConfig", config);
        
        return "summary";
    }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${pageTitle}">タイトル</title>
</head>
<body>
    <h1 th:text="${pageTitle}"></h1>
    <p>現在のアクセス数: <span id="countDisplay">0</span></p>

    <script th:inline="javascript">
        /*<![CDATA[*/
        // 1. 基本的な変数の受け取り
        const title = [[${pageTitle}]];
        const count = [[${accessCount}]];
        
        // 2. オブジェクトの受け取り（自動的にJSONとして展開される）
        const config = [[${userConfig}]];

        console.log("タイトル:", title);
        console.log("アクセス数:", count);
        console.log("ユーザー設定:", config);

        // 3. JavaScriptでの動的処理
        document.addEventListener("DOMContentLoaded", function() {
            const display = document.getElementById("countDisplay");
            if (count > 1000) {
                display.style.color = "red";
                display.style.fontWeight = "bold";
            }
            display.textContent = count + "回（大人気！）";

            if (config.theme === "dark") {
                document.body.style.backgroundColor = "#333";
                document.body.style.color = "#fff";
            }
        });
        /*]]>*/
    </script>
</body>
</html>

このように、ThymeleafとJavaScriptを適切に組み合わせることで、静的なHTMLだけでは表現できない「ユーザー体験（UX）の高いWebサイト」を構築できます。特に、サーバーサイドのビジネスロジックの結果をJavaScriptのイベント処理やDOM操作に繋げる流れは、モダンなWeb開発の基礎となります。

最後になりますが、セキュリティ面（XSS対策など）においても、Thymeleafのインライン機能はエスケープ処理を適切に行ってくれるため、手動で文字列を連結するよりも遥かに安全です。ぜひ本記事の内容を参考に、自身のプロジェクトに活用してみてください。

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

生徒

「先生、まとめまで読んでようやく全体像が掴めました！Thymeleafって、ただHTMLを表示するだけじゃなくて、JavaScriptへの橋渡しも得意なんですね。」

先生

「その通り。特に th:inline="javascript" の便利さに気づけたのは大きいね。これが無いと、HTMLの隠し要素（input type="hidden"）に一度値を書き込んでからJavaScriptで取得する、なんていう面倒な手順が必要になるからね。」

生徒

「確かに！ [[${...}]] だけで、文字列に勝手にダブルクォートが付いたり、オブジェクトがJSONになったりするのは魔法みたいです。でも、デバッグが少し難しそうだなと感じました。」

先生

「良い視点だね。ブラウザの『ソースを表示』を見れば、Thymeleafが実際にどんなJavaScriptコードに書き換えたのかが丸見えになるんだ。実行エラーが出たときは、まず生成後のソースコードを確認する癖をつけるといいよ。」

生徒

「なるほど、サーバーで実行された結果がそのままスクリプトとして書き込まれるわけですね。これからSpring Bootで開発するときは、この連携を使いこなして、もっと動きのある画面を作ってみます！」