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

新人

「先輩、Thymeleafの変数ってどうやってJavaScriptに埋め込むんですか？」

先輩

「Thymeleafはサーバーサイドのテンプレートだから、HTMLに埋め込む変数の値を直接書き出すことができるんだ。JavaScriptに渡すときはその仕組みを活かすんだよ。」

新人

「なるほど！サーバーで持っている値をそのまま使えるんですね。具体的にはどうやるんですか？」

先輩

「じゃあ、ThymeleafとJavaScriptの役割から順に見ていこう！」

1. ThymeleafとJavaScriptの基本的な役割と特徴

Thymeleafは、サーバーサイドでHTMLを生成するテンプレートエンジンです。HTMLの中にth:textなどの属性を使って、サーバー側の変数やオブジェクトの値を埋め込むことができます。Javaの@Controllerでモデルにセットした変数を、HTMLに表示するのが得意です。

一方で、JavaScriptはブラウザ側で動作する言語で、ユーザーの操作に応じて画面を動的に変える役割を持ちます。たとえば、ボタンを押したときにリストを更新したり、非同期通信（Ajax）でデータを取得したりします。

ThymeleafとJavaScriptを組み合わせると、初期表示はサーバーで作り、動的な操作はJavaScriptに任せる形になります。これにより、ユーザー体験が向上し、効率的なアプリケーション開発ができます。

次に、ThymeleafとJavaScriptで変数をやり取りする基本的な方法を見ていきましょう。

2. 変数の埋め込み方法の概要とメリット

Thymeleafでは、サーバー側で持っているデータをHTMLに直接埋め込むことができます。この仕組みを利用すると、サーバーから渡されたデータをJavaScriptに渡すことが簡単になります。

具体的には、Thymeleafのth:text属性やth:utext属性を使い、HTMLタグ内に変数の値を書き出す方法があります。たとえば、次のように書くことで、messageという変数をHTMLに埋め込めます。


<p th:text="${message}"></p>

ここで、${message}の部分はサーバー側で用意した値に置き換わります。HTMLに直接出力されるので、JavaScriptでも扱えるようになります。

JavaScriptで使うときは、次のようにHTMLの要素の中に変数を書き出しておき、それをJavaScriptで取得します。


<span id="msg" th:text="${message}"></span>
<script>
const msg = document.getElementById('msg').textContent;
console.log('サーバーから受け取ったメッセージ:', msg);
</script>

この例では、id="msg"のタグにThymeleafの変数${message}が書き出され、JavaScriptがtextContentで取得しています。こうすることで、サーバー側の変数をJavaScriptの中で使うことができます。

メリットとしては、以下の点が挙げられます。

サーバー側の値を簡単にJavaScriptへ渡せる
画面初期表示時のデータを柔軟に設定できる
サーバーとフロントエンドの連携がスムーズになる

次回は、具体的なコード例をさらに見ていきましょう。ThymeleafとJavaScriptの基本的な連携方法をしっかり理解することで、より便利なWebアプリケーションを作れるようになります。

3. Thymeleafの変数埋め込み方法

Thymeleafでは、th:textを使って安全にHTMLに変数を出力できます。特殊文字もエスケープされるので安心です。例えば、userNameという変数を次のように出力します。


<p th:text="${userName}">ユーザー名</p>

そのほか、HTMLをそのまま埋め込む場合にはth:utextを使います。例えば、サーバー側でHTML構造を生成して渡したいときに便利です。


<div th:utext="${htmlContent}"></div>

この方法を使うと、入力データの見た目を自由に制御でき、ユーザーへの表示を柔軟に設計できます。

4. JavaScript内でのThymeleaf変数の使い方

ThymeleafでHTMLに埋め込んだ変数は、JavaScriptからも取得できます。たとえば、下記のように埋め込めば、コード内で直接使えます。


<script>
  const userName = /*[[${userName}]]*/ 'デフォルト';
  console.log('ユーザー名:', userName);
</script>

この書き方をすると、Thymeleafが描画時にuserNameを文字列リテラルとしてJavaScriptに注入してくれます。これにより、DOM操作なしでスムーズにサーバー変数を使うことができます。

また、複数の変数をまとめて埋め込むときは、JSONに変換して一度に読み込む手法がオススメです。


<script>
  const data = /*[[${myData}]]*/ {};
  console.log(data);
</script>

これにより、ユーザー情報や設定などをオブジェクトとして扱えるようになります。

5. サーバー側（@Controller）での変数の受け渡し

今回使うサンプルでは、@ControllerでJavaオブジェクトをモデルに登録し、HTMLに渡します。


@Controller
public class SampleController {

  @GetMapping("/sample")
  public String showPage(Model model) {
    String userName = "佐藤太郎";
    Map<String,Object> myData = new HashMap<>();
    myData.put("id", 123);
    myData.put("role", "admin");
    model.addAttribute("userName", userName);
    model.addAttribute("myData", myData);
    return "sample";
  }
}

上の例では、userName と myData をThymeleafに渡しています。これらはHTMLで${userName}、${myData}として使えます。

実際にHTMLとJavaScriptで使うと次のようになります。


<p th:text="${userName}"></p>
<script>
  const userName = /*[[${userName}]]*/ '';
  const myData = /*[[${myData}]]*/ {};
  console.log(userName, myData.role);
</script>

こうすることで、サーバーの値をJavaScript変数として直接扱え、動的な処理や画面変更が簡単になります。

以上が、ThymeleafとJavaScriptを使って変数を埋め込み、活用する方法です。次回以降でさらに便利な方法やエラー対処法を紹介していきます。

6. よくあるエラーやつまずきポイント

ThymeleafとJavaScriptで変数を埋め込むとき、初心者がつまずきやすいポイントを紹介します。

● ${...} が表示されない

HTMLに${userName}を書いたのに、そのまま表示される場合、Modelに値を追加していない可能性があります。@Controllerでmodel.addAttribute("userName", userName)を忘れないようにしましょう。

● JavaScript側で空文字やundefinedになる

const userName = /*[[${userName}]]*/ '';のように書きますが、Thymeleafの構文が正しく評価されないことがあります。その場合、HTMLの構文エラーやテンプレート名の間違いをチェックしましょう。

● JSONオブジェクトが文字列扱いになる

/*[[${myData}]]*/でJSONとして埋め込んでも、シングルクォーテーションで囲まれて文字列になることがあります。以下のようにth:inline="javascript"を付けて、JavaScript内で正しく評価されるようにしましょう。


<script th:inline="javascript">
  const data = /*[[${myData}]]*/ {};
</script>

この設定がないと、変数が正しくオブジェクトとして扱えません。

● HTMLエスケープによる誤出力

th:textでは特殊文字が自動でエスケープされます。そのため、HTML構造をそのまま埋め込みたいときはth:utextを使い分けましょう。ただし、XSSリスクには注意が必要です。

7. 初心者向けの学習アドバイスや実践ポイントまとめ

最後に、ThymeleafとJavaScriptを使って変数を埋め込む学習のコツをまとめます。

小さなサンプルから始めよう
「文字列一つ→オブジェクト→配列」の順に進めることで、構文の理解がしやすくなります。
Modelとテンプレートの一致を確認
model.addAttribute("userName", ...)と${userName}の名前が一致しているかを必ずチェックしてください。
th:inline="javascript"はセットで覚える
JavaScript内に変数を埋め込むときは、この属性を忘れずに。忘れると変数が文字列化されて動かなくなります。
th:text と th:utext を使い分けよう
通常はth:textで安全に出力し、HTMLタグをそのまま出力したいときだけth:utextを使いましょう。
エラーはブラウザで確認
JavaScriptのコンソールにundefinedやSyntaxErrorが出たら、埋め込んだ変数や構文を見直します。
実際に手を動かす学習が鉄則
本やネットの記事を「読むだけ」ではなく、自分でコードを書いて実行してみることが理解への近道です。
変数を使った動的表示に挑戦
たとえば、「現在ログイン中のユーザー名表示」や「設定情報を元に画面構成を切り替える」など、実際に使える機能を作ってみましょう。

今回紹介した内容をしっかり練習することで、ThymeleafとJavaScriptの変数連携を安全かつ効率的に使えるようになります。次は Ajax やフォームとも組み合わせた応用的な実装に挑戦してみてください！

まとめ

今回は、ThymeleafとJavaScriptの連携において重要となる「サーバー側の変数をJavaScriptへ渡す方法」を中心に振り返りました。サーバーサイドのテンプレートエンジンであるThymeleafは、HTMLに直接値を書き出すことができ、JavaScriptはブラウザ側で動的処理を行うという役割分担があります。この特性を理解しておくと、初期表示のデータをサーバー側で生成し、ユーザーの操作に応じた画面更新をJavaScriptで行うという、メリハリのあるアプリケーション設計が可能になります。Thymeleafのth:textやth:utextを使えば、サーバーで設定した値を自然にHTMLに埋め込めるため、JavaScript側ではDOMから値を取得するだけで利用できます。特に、大規模な画面や動的なデータ表示が求められるアプリケーションでは、最初にサーバーから値を埋め込んでおくことで、通信回数を減らしたり、ユーザー体験を改善したりすることができます。たとえば、一覧画面のタイトル、ログイン中のユーザー名、APIで取得したデータの初期設定など、あらゆる場面でこの仕組みが役立ちます。また、ThymeleafはJavaのオブジェクトをそのまま扱えるため、複雑なデータ構造でも柔軟にHTMLへ反映できます。次に、JavaScript側で埋め込んだ値をどのように利用するのかについても理解が深まりました。DOM要素を取得してtextContentやinnerTextで値を取り出すシンプルな方法は、多くの場面で活用できます。初期化処理やフォームの動的反映、ボタン操作での処理など、JavaScriptとThymeleafの連携は想像以上に幅広い応用が可能です。以下に、今回学んだ内容の整理として、ThymeleafとJavaScriptを組み合わせたサンプルコードを紹介します。

Thymeleaf変数をJavaScriptに渡す基本サンプル


<div class="card p-3">
    <span id="serverValue" th:text="${serverMessage}" class="fw-bold"></span>
</div>

<script>
    const message = document.getElementById('serverValue').textContent;
    console.log('受け取ったメッセージ:', message);

    document.addEventListener('DOMContentLoaded', () => {
        const target = document.getElementById('resultArea');
        target.textContent = 'JavaScriptで表示: ' + message;
    });
</script>

<div id="resultArea" class="mt-3 p-2 border rounded"></div>

このように、Thymeleafでサーバーから渡された値をHTMLに埋め込み、その値をJavaScriptで取得して利用するという流れは、多くのシステムで使用されています。特に、ページの初期状態に重要なデータが必要な場合や、ユーザーの操作によって特定の情報をリアルタイムに変更したい場合など、両者を組み合わせることで画面表示の柔軟性が大きく向上します。今後の開発では、JavaScriptだけで動かす部分と、サーバー側で生成しておく部分を適切に分けて実装していくことが鍵となります。また、ThymeleafはHTMLの構造を崩さず自然な形で記述できるため、デザイナーやフロントエンド担当者がHTMLを編集する場合でも違和感がありません。テンプレートの読みやすさや保守性が高まるという点も、Thymeleafの大きなメリットのひとつです。今回の学びを基礎として、より複雑なJavaScriptとの連携やAPI通信と組み合わせた使い方にも挑戦していくことで、より高度な画面設計ができるようになるでしょう。

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

生徒：「Thymeleafの変数をJavaScriptに渡す方法って、すごくシンプルなんですね！」

先生：「そうなんです。HTMLに値を書き出してJavaScriptで拾えばいいので、実はとても自然な仕組みなんですよ。」

生徒：「最初は難しそうだと思っていましたが、DOMから値を取るだけならすぐに応用できそうです。」

先生：「そのとおり。初期表示にサーバー側の値を埋め込んでおけば、さらに動きのよい画面が作れます。」

生徒：「確かに、ユーザー情報や設定値をJavaScript側で使う場面って結構ありますね。」

先生：「今後はリストデータやオブジェクトの埋め込み、JSON化などの応用にも進むと、もっと便利に使いこなせるようになりますよ。」

生徒：「それも学んでみたいです！今日の内容をしっかり復習します。」

先生：「いいですね。ThymeleafとJavaScriptの連携は実務で本当によく使うので、身につけておいて損はありませんよ。」