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

新人

「ThymeleafとJavaScriptで動的にデータをやり取りする方法ってありますか？」

先輩

「あるよ。サーバー側のモデルから値を渡して、JavaScriptで画面を動的に変更できるんだ。」

新人

「具体的にはどうすればいいですか？」

先輩

「まずはThymeleafの基本と、JavaScriptとの連携イメージから見てみよう！」

1. Thymeleafとは？

Thymeleaf（タイムリーフ）はSpringと相性が良いテンプレートエンジンで、HTMLにサーバー側の動的な値を埋め込むことができます。Pleiades＋Gradle環境で、@Controllerアノテーションを使ったJavaクラスから値を渡して、画面に反映する用途に適しています。

例えば、ユーザー名やリスト表示などをHTMLに動的に挿入するのに便利です。Bootstrapなどのライブラリは使わず、純粋にThymeleafとJavaScriptで実装します。

2. JavaScriptとThymeleafの基本的な連携イメージ

Thymeleafでは、th:inline="javascript"を指定した scriptタグの中で、サーバーから渡された値をJavaScript変数として取得できます。これにより、動的データをJavaScriptで扱えるようになり、条件分岐や画面制御などが可能になります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>連携サンプル</title></head>
<body>
  <script th:inline="javascript">
    /* サーバーから渡された動的データを受け取る */
    let username = '[[${username}]]';
    let count = [[${count}]];
    console.log(username, count);
  </script>
</body>
</html>

こうすることで、JavaScript内でサーバーのデータを活用でき、リアクティブなUI作りに役立ちます。

3. サーバー側から渡した動的データをJavaScriptに取り込む方法

Pleiades＋Gradle環境で作成したSpringプロジェクトでは、@ControllerクラスからThymeleafにモデル属性を渡せます。その値をJavaScriptで利用すると、フロントエンドが動的に反応する画面が実現できます。


@Controller
public class DataController {
    @GetMapping("/dynamic")
    public String dynamicData(Model model) {
        model.addAttribute("username", "田中太郎");
        model.addAttribute("notifications", List.of("メッセージ1", "アラート2", "更新3"));
        return "dynamic";
    }
}

このように渡されたusernameやnotificationsを、ThymeleafテンプレートでJavaScript変数として受け取ります。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>動的データ取得サンプル</title></head>
<body>
  <script th:inline="javascript">
    let username = '[[${username}]]';
    let notifications = /*[[${notifications}]]*/[];
    console.log(username);
    console.log(notifications);
  </script>
</body>
</html>

これにより、サーバーから渡された文字列や配列をJavaScriptが受け取り、画面に反映できるようになります。

4. 動的データをJavaScriptで活用する具体的なサンプルコード

以下は、サーバーから渡された
ユーザー名や通知リストを使って、画面にメッセージを表示する例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>通知表示サンプル</title></head>
<body>
  <h1 id="welcome"></h1>
  <ul id="alerts"></ul>
  <script th:inline="javascript">
    let username = '[[${username}]]';
    let notifications = /*[[${notifications}]]*/[];
    document.getElementById("welcome").textContent = username + "さん、ようこそ！";
    const ul = document.getElementById("alerts");
    notifications.forEach(n => {
      const li = document.createElement("li");
      li.textContent = n;
      ul.appendChild(li);
    });
  </script>
</body>
</html>

このサンプルでは、ユーザー名と通知配列をJavaScriptで受け取り、forEachでリスト表示しています。初心者でも理解しやすい動的UIの例です。

5. よく使うThymeleafの属性の基本的な使い方

効率よく動的データを扱うには、Thymeleafの属性を活用することが重要です。

`th:inline="javascript"`

JavaScript内でサーバーからの値を安全に埋め込むために使います。文字列や配列、数値などをJavaScript変数に割り当てられます。

`th:text`

HTML要素のテキストをサーバー側の値で置き換える際に使用します。DOM操作で値を設定する代わりに、あらかじめHTML内に表示させたい場合に有効です。


<p th:text="${username} + 'さん、こんにちは！'"></p>

`th:utext`

HTMLを含むテキストをそのまま表示させたい場合に使います。ここでは使っていませんが、動的にリッチな内容を挿入したいときに役立ちます。

`th:attr`

属性値を動的に設定するときに便利です。data属性にサーバー値を入れて、JavaScriptで利用するパターンなどに使えます。


<div th:attr="data-user=${username}"></div>
<script>
  let user = document.querySelector('div').dataset.user;
  console.log(user);
</script>

6. 動的データ連携のメリットと注意点

サーバーから渡された動的データをJavaScriptで扱えると、ユーザー体験が向上します。例えば、ページ遷移せずにアラートリストを更新したり、フォーム入力に応じて即座に画面表示を切り替えたりできます。これにより、SPA的な使い勝手をPleiades＋Gradle環境で提供可能です。

ただし注意点もあります。大量データをJavaScriptに渡すとパフォーマンスが低下する恐れがあります。また、th:inline="javascript"で文字列を埋め込む際、XSS（クロスサイトスクリプティング）対策として、ユーザー入力を扱う場合はエスケープ処理が必要です。さらに、型変換ミスやundefinedエラーを避けるため、JavaScript側で型チェックや存在チェックを入れることをおすすめします。

7. 実際のプロジェクトでの活用例

実際の業務アプリでは、サーバー側でセッションからユーザー情報や通知などをModelに追加し、JavaScriptで利用するパターンが多いです。以下は実用的なケース例です。

チャットや通知機能のリアルタイム表示


@Controller
public class ChatController {
  @GetMapping("/chat")
  public String chat(Model model) {
    model.addAttribute("user", "佐藤花子");
    model.addAttribute("messages", List.of("こんにちは","おはようございます","こんばんは"));
    return "chat";
  }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>チャット画面</title></head>
<body>
  <h2 id="user"></h2>
  <ul id="msgList"></ul>
  <script th:inline="javascript">
    let user = '[[${user}]]';
    let messages = /*[[${messages}]]*/[];
    document.getElementById("user").textContent = user + "さんのチャット";
    messages.forEach(m => {
      let li = document.createElement("li");
      li.textContent = m;
      document.getElementById("msgList").appendChild(li);
    });
  </script>
</body>
</html>

このような構成にすると、ログインユーザーやメッセージ一覧を動的に表示でき、SPA風の使いやすいUIを実現できます。

8. 初心者向けのステップアップ方法

Pleiades＋GradleでSpringプロジェクトを構築し、@ControllerでModelに動的データを追加する基礎を理解しましょう。
Thymeleafテンプレートでth:inline="javascript"を使ってJavaScript変数に結びつけ、文字列・配列・数値を取り扱えるようにしましょう。
動的データを使ってDOM操作でリスト表示、条件表示、リアルタイム更新などを実装し、インタラクティブな画面を作りましょう。
XSSや型エラー、パフォーマンスに注意しつつ、モデル設計とJavaScript処理のバランスを考慮しましょう。
さらに学びたい場合は、Thymeleafのth:ajaxやWebSocket連携なども調査して、より高度な動的連携に挑戦してみましょう。

この流れで学ぶことで、Spring＋Thymeleaf＋JavaScriptによる動的データ連携の理解が深まり、実務でもすぐに役立てられるスキルになります。