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

新人

「先輩、ThymeleafでJavaScriptを呼び出したり、値を渡したりする方法ってありますか？HTMLとJavaScriptがどうつながるのかがよく分からなくて……」

先輩

「良いところに気づいたね。Thymeleafでは、Javaの値をHTMLテンプレートに埋め込むだけでなく、JavaScriptと連携させることもできるんだ。たとえば、コントローラで渡した値をJavaScriptの変数に設定できるよ。」

新人

「なるほど！でも、どうやってHTMLの中でJavaScriptとThymeleafをつなぐんですか？」

先輩

「じゃあ、基本から順に見ていこうか。Thymeleafのテンプレートエンジンの仕組みと、JavaScript連携の基本を学ぶとスッキリ理解できるよ。」

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

まず、Thymeleaf（タイムリーフ）とは、Spring Frameworkでよく使われるテンプレートエンジンです。テンプレートエンジンとは、Javaのサーバーサイドで処理したデータをHTMLファイルに埋め込む仕組みのことを指します。Thymeleafを使うと、HTMLに直接Javaの値を表示したり、条件分岐を行ったりすることが簡単にできます。

たとえば、Springの@Controllerで値を渡して、それをHTML上に表示することができます。


@Controller
public class SampleController {
    @GetMapping("/sample")
    public String samplePage(Model model) {
        model.addAttribute("message", "こんにちは、Thymeleafの世界へ！");
        return "sample";
    }
}

このコントローラでは、messageという属性をHTMLに渡しています。これをThymeleafで受け取って表示するHTMLは次のようになります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleafの基本</title>
</head>
<body>
    <p th:text="${message}">メッセージがここに入ります</p>
</body>
</html>

このように、th:textを使うことで、Javaから渡された値をHTML上に動的に表示することができます。

2. HTML内でJavaScriptとThymeleafを連携させる考え方

次に、JavaScriptとThymeleafの連携について見ていきましょう。Thymeleafのテンプレートでは、Javaの値をJavaScriptに渡すために、特別な構文が用意されています。これはth:inline="javascript"という指定を使う方法です。

通常、HTMLの中でJavaScriptを記述するときは次のように書きますが、Thymeleafの場合はth:inlineを使って変数展開を有効にします。


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

この例では、コントローラから渡されたmessageをJavaScriptの変数に代入しています。これにより、JavaScript内でサーバーサイドの値を扱えるようになります。つまり、ThymeleafがHTMLを生成するときに、[[${message}]]が実際の文字列（例：「こんにちは、Thymeleafの世界へ！」）に置き換わるという仕組みです。

この連携により、Javaの変数をフロントエンドのJavaScriptで扱えるようになるため、動的な画面表示やイベント処理がより柔軟になります。

3. JavaScriptからThymeleafの値を扱うための準備

では、実際にThymeleafとJavaScriptを連携させるために、どんな準備が必要でしょうか。まず、Springプロジェクトの構成を確認してみましょう。今回の前提では、開発環境はpleiades＋Gradleを使い、Mavenではありません。プロジェクト作成時に「Thymeleaf」にチェックを入れて依存関係を追加すれば、自動的に設定されます。


plugins {
    id 'org.springframework.boot' version '3.2.0'
    id 'io.spring.dependency-management' version '1.1.0'
    id 'java'
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
}

この設定を行えば、Thymeleafが利用可能な状態になります。次に、JavaScriptとThymeleafの値を連携させるためのHTMLを作成しましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafとJavaScriptの連携</title>
</head>
<body>
    <h3>サーバーから渡されたメッセージ</h3>
    <p th:text="${message}">ここにメッセージが入ります</p>

    <script th:inline="javascript">
        let msg = [[${message}]];
        alert("サーバーからのメッセージ：" + msg);
    </script>
</body>
</html>

このようにすることで、サーバーサイドのJavaの値をJavaScriptで直接利用することができます。たとえば、画面のロード時にアラートでメッセージを表示したり、動的に要素を変更したりすることが可能です。

ここまで理解できれば、ThymeleafでJavaScriptを呼び出す基本的な仕組みをマスターしたことになります。次の記事では、実際にJavaScript関数へThymeleafの値を渡したり、動的に画面を操作する応用編を解説していきましょう。

4. JavaScript内でThymeleaf変数を使う基本構文

ここからは、Thymeleaf JavaScript 連携の実践編として、th:inline="javascript"を使った変数の扱い方をもう少し詳しく見ていきましょう。

新人

「先輩、さっきのth:inline="javascript"っていう指定、実際にはどんなときに必要なんですか？」

先輩

「良い質問だね。Thymeleafは基本的にHTMLを生成するためのテンプレートだから、JavaScriptの中で変数を展開したい場合は、通常のHTMLのように書くだけでは動かないんだ。」

新人

「なるほど。つまり、JavaScript内でThymeleafの値を使うには特別な書き方が必要なんですね。」

先輩

「その通り。具体的には、次のように書くと、サーバー側の値をJavaScriptで扱えるようになるよ。」


<script th:inline="javascript">
    let userName = [[${userName}]];
    let age = [[${age}]];
    console.log("ユーザー名:", userName);
    console.log("年齢:", age);
</script>

このように書くと、Springの@Controllerから渡されたuserNameやageが、そのままJavaScript変数として扱えるようになります。ThymeleafがHTMLを生成する段階で、これらの変数が実際の値に置き換えられるため、JavaScript側で自由に利用できます。

ポイントは、[[${変数名}]]という書き方です。この二重角括弧構文を使うことで、JavaScript内で値を埋め込むことができます。

また、もし値が文字列の場合、自動的にダブルクォーテーションで囲まれるため、安心して使うことができます。Thymeleafが適切にエスケープ処理を行うため、HTMLやJavaScriptでのセキュリティリスクを減らせる点も大きなメリットです。

5. コントローラから渡した値をJavaScriptに表示する例

次に、コントローラからJavaScriptに値を渡す具体的な例を見てみましょう。これは、画面ロード時にメッセージを表示したり、JavaScriptで値を動的に処理したいときに役立ちます。


@Controller
public class UserController {
    @GetMapping("/user")
    public String userPage(Model model) {
        model.addAttribute("userName", "田中太郎");
        model.addAttribute("age", 28);
        return "user";
    }
}

そして、HTML側で次のように書くことで、JavaScriptから値を扱うことができます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf JavaScript 連携例</title>
</head>
<body>
    <h3>ユーザー情報</h3>
    <p>名前：<span th:text="${userName}">名前</span></p>
    <p>年齢：<span th:text="${age}">年齢</span></p>

    <script th:inline="javascript">
        let name = [[${userName}]];
        let userAge = [[${age}]];
        alert("ユーザー名：" + name + "（" + userAge + "歳）");
    </script>
</body>
</html>

この例では、コントローラで渡したデータをHTMLとJavaScriptの両方で利用しています。Thymeleafを使うことで、サーバーサイドとフロントエンドの情報共有がスムーズになり、画面の動的な更新が簡単になります。

実際にこのページを実行すると、画面ロード時にJavaScriptのalertでユーザー名と年齢が表示されます。つまり、Thymeleafのテンプレート内でJavaScriptに直接値を埋め込んでいるわけです。

もし複数の値を扱う場合でも、同じ構文で複数の変数を展開できます。この柔軟性が、Thymeleafがフロント連携に強い理由の一つです。

6. JavaScript関数にThymeleafの値を引数として渡す方法

ここまでで、Thymeleafの値をJavaScript内で使う方法は理解できたと思います。次は、さらに実践的なケースとして、Thymeleafの値をJavaScript関数に渡す方法を見てみましょう。

新人

「先輩、たとえばボタンを押したときに、Thymeleafの値を関数に渡すことってできますか？」

先輩

「もちろんできるよ。Thymeleafでは、HTML属性の中でも変数展開が可能だから、イベント処理にも組み込めるんだ。」


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafとJavaScript関数の連携</title>
</head>
<body>
    <h3>ThymeleafからJavaScript関数へ引数を渡す</h3>
    <button th:onclick="'showUser(' + '\'' + ${userName} + '\'' + ')'">表示</button>

    <script th:inline="javascript">
        function showUser(name) {
            alert("クリックされたユーザー：" + name);
        }
    </script>
</body>
</html>

このサンプルでは、ボタンのonclick属性にThymeleafの変数を埋め込んでいます。th:onclickを使うことで、Javaの値をJavaScript関数の引数として直接渡せます。

たとえば、コントローラで「山田花子」というユーザー名を渡していた場合、生成されるHTMLは次のようになります。


<button onclick="showUser('山田花子')">表示</button>

このようにThymeleafの式展開により、HTML生成時に動的なコードを埋め込むことができるのです。これにより、Javaの値を使ってJavaScript関数を呼び出す仕組みを簡単に構築できます。

もし複数の値を扱いたい場合は、次のように複数の引数を渡すことも可能です。


<button th:onclick="'showUserInfo(' + '\'' + ${userName} + '\'' + ',' + ${age} + ')'">ユーザー情報</button>

<script th:inline="javascript">
    function showUserInfo(name, age) {
        console.log("ユーザー名：" + name + "、年齢：" + age + "歳");
    }
</script>

このように、ThymeleafとJavaScriptの連携をうまく活用することで、サーバーサイドからの動的なデータを直接フロントで操作できるようになります。

ThymeleafはJavaアプリケーションとHTMLテンプレートの橋渡し役として非常に便利であり、特にSpring MVC環境下では、フロント側のJavaScriptとの自然な連携が可能です。

次のステップでは、JavaScriptからThymeleafに値を返したり、動的にHTMLを変更するような実践的なサンプルを扱うことで、より高度なデータ連携を学んでいきます。

7. JavaScriptからThymeleafへ値を動的に反映させる実践例

ここでは、Thymeleaf JavaScript 動的連携の応用として、JavaScript側の処理結果をThymeleafに反映する方法を見ていきましょう。実際のWebアプリ開発では、ユーザーがボタンを押したり、フォームに入力した値を動的に画面へ反映させたい場面が多くあります。

新人

「先輩、JavaScriptで入力された値をThymeleafの画面上に反映するにはどうすればいいんですか？」

先輩

「良い質問だね。ThymeleafはHTMLを生成するテンプレートだから、基本的にサーバーからHTMLを作る役割だ。でも、JavaScriptを使えば、Thymeleafで生成された要素を動的に書き換えることができるんだ。」

たとえば、フォームの入力内容をそのまま画面の別の場所に表示する例を見てみましょう。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf JavaScript 動的反映</title>
</head>
<body>
    <h3>JavaScriptからThymeleaf要素を更新</h3>
    <input type="text" id="userInput" placeholder="メッセージを入力">
    <button onclick="updateMessage()">反映</button>

    <p id="displayArea" th:text="${message}">初期メッセージ</p>

    <script>
        function updateMessage() {
            const input = document.getElementById("userInput").value;
            document.getElementById("displayArea").textContent = input;
        }
    </script>
</body>
</html>

この例では、Thymeleafで初期値を表示し、JavaScriptでその内容を動的に変更しています。Thymeleafが生成したHTMLはクライアント側で自由に操作できるため、JavaScriptとThymeleafの連携が自然に行えます。

なお、サーバー側に値を再送信してThymeleafテンプレートを再生成する場合は、フォーム送信やAjax通信を利用する方法もあります。次の章では、そのような複数データを扱うケースを見ていきましょう。

8. 複数の値やオブジェクトをJavaScriptに渡すときのポイント

ここでは、ThymeleafからJavaScriptへ複数の値やオブジェクトを渡す方法を解説します。現場では、単一の文字列だけでなく、ユーザーリストや設定情報などの複雑なデータをJavaScriptに渡す場面がよくあります。

新人

「先輩、複数のデータをまとめてJavaScriptに渡したいときはどうすればいいですか？」

先輩

「そんなときは、ThymeleafでMapやListをモデルに渡して、それをJavaScriptのオブジェクトに変換すればいいよ。」

たとえば、次のようにコントローラでリストやマップを渡します。


@Controller
public class DataController {
    @GetMapping("/data")
    public String dataPage(Model model) {
        List<String> users = List.of("田中", "佐藤", "鈴木");
        Map<String, Integer> scores = Map.of("田中", 90, "佐藤", 80, "鈴木", 70);
        model.addAttribute("users", users);
        model.addAttribute("scores", scores);
        return "data";
    }
}

この値をHTML内のJavaScriptで受け取る場合、th:inline="javascript"を指定して次のように書きます。


<script th:inline="javascript">
    let userList = [[${users}]];
    let scoreMap = [[${scores}]];

    console.log("ユーザー一覧:", userList);
    console.log("スコア情報:", scoreMap);
</script>

このように、Thymeleafの式展開を使えば、ListやMapも自動的にJavaScriptの配列・オブジェクト形式に変換されます。つまり、JSONに変換する手間をかけずにサーバーサイドのデータをそのままフロントで扱えるのです。

また、キーと値を組み合わせて画面に表示することも簡単です。


<ul id="scoreList"></ul>

<script th:inline="javascript">
    for (let name in scoreMap) {
        const li = document.createElement("li");
        li.textContent = name + "：" + scoreMap[name] + "点";
        document.getElementById("scoreList").appendChild(li);
    }
</script>

これで、Thymeleafから渡した複数の値をJavaScriptで自由に操作できるようになります。Thymeleaf JavaScript 引数渡しを理解すれば、動的画面更新の幅が一気に広がります。

9. よくあるエラーとデバッグ方法（undefinedになる原因と対策）

最後に、初心者がつまずきやすい「変数がundefinedになる」エラーについて解説します。ThymeleafとJavaScriptの連携では、テンプレートの変数展開や引用符の扱いを間違えると、思わぬ不具合が発生します。

新人

「先輩、JavaScriptでundefinedが出るんですけど……。Thymeleafで値を渡してるのに、ちゃんと動きません。」

先輩

「それはよくあるね。原因は、Thymeleafでの値展開が正しく行われていないケースが多いんだ。ポイントを確認してみよう。」

まず、最も多いのが引用符の抜けです。たとえば次のようなコードです。


<script th:inline="javascript">
    let user = ${userName};
</script>

このように書くと、Thymeleafが値を展開する前にJavaScript構文エラーが発生します。正しくは次のように二重角括弧を使います。


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

また、値が文字列の場合、Thymeleafが自動的にダブルクォーテーションを付けてくれますが、もし値がnullや存在しない場合はundefinedとして扱われる点にも注意が必要です。その場合は、デフォルト値を設定しておくと良いでしょう。


<script th:inline="javascript">
    let user = [[${userName} ?: '未設定ユーザー']];
</script>

さらに、ブラウザの開発者ツール（F12キー）を活用することも大切です。コンソールで変数の中身を確認したり、console.log()を入れて動作を逐一チェックすることで、ThymeleafとJavaScriptのやり取りを可視化できます。

もし、値が正しく渡っていない場合は、まずコントローラ側でmodel.addAttribute()が設定されているかを確認し、次にHTMLのth:inline="javascript"指定が抜けていないかをチェックしてください。

この2つを守れば、多くの「undefined」トラブルは防ぐことができます。

最後に、ThymeleafとJavaScriptの動的連携を扱う上での心構えを伝えておきます。ThymeleafはあくまでサーバーでHTMLを生成する役割ですが、その出力を受け取るJavaScriptと組み合わせることで、まるでSPA（シングルページアプリ）のような動的な挙動を実現できます。つまり、JavaとHTML、そしてJavaScriptの「橋渡し」をうまく理解すれば、より実践的なWebアプリを作ることができるということです。