1. ThymeleafとJavaScriptの連携の基本

Thymeleafは、Springのテンプレートエンジンで、HTMLにサーバー側のデータを埋め込めます。JavaScriptと組み合わせると、サーバーから渡した配列やオブジェクトをそのままJavaScriptで扱えて、動的な画面を簡単に作れます。

開発環境はpleiades＋Gradle、@Controllerからデータを渡す構成を想定しています。Bootstrapなどは使わず、Thymeleaf＋JavaScriptだけで完結させます。

2. JavaScriptで配列を操作する基礎

JavaScriptで配列を扱うときは、forEachやmap、filterなどのメソッドを使うのが基本です。配列をループしたり、新しい配列を作ったり制御できます。


<!DOCTYPE html>
<html>
<head><title>配列操作サンプル</title></head>
<body>
  <script>
    let fruits = ["リンゴ","バナナ","オレンジ"];
    fruits.forEach(function(fruit) {
      console.log("果物：" + fruit);
    });
    let upper = fruits.map(function(fruit) {
      return fruit.toUpperCase();
    });
    console.log(upper); // ["リンゴ","バナナ","オレンジ"] を大文字表示
  </script>
</body>
</html>

この例ではforEachで配列を繰り返し、mapで変換した新しい配列を作っています。これらはThymeleafから受け取った配列でも同じように使えます。

3. サーバーから渡された配列データをJavaScriptで操作する方法

Pleiades＋Gradle環境で@ Controllerから配列を渡し、Thymeleafテンプレート内でJavaScript変数として受け取る方法について説明します。


@Controller
public class FruitController {
    @GetMapping("/fruits")
    public String fruits(Model model) {
        model.addAttribute("fruits", List.of("リンゴ","バナナ","オレンジ","イチゴ"));
        return "fruits";
    }
}

上記のコントローラで定義した配列を、th:inline="javascript"属性を使ってJavaScript側に埋め込んで操作します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>配列取得サンプル</title></head>
<body>
  <script th:inline="javascript">
    let fruits = /*[[${fruits}]]*/[];
    console.log(fruits); // ["リンゴ","バナナ","オレンジ","イチゴ"]
  </script>
</body>
</html>

この方法により、サーバー側で定義した文字列配列をそのままJavaScriptで操作できるようになります。

4. よく使う配列操作（forEach、map、filterなど）の具体例

取得した配列に対して、forEach、map、filterといった配列操作を行い、表示や加工に活かす具体例を紹介します。

配列の内容をリスト表示する（forEach）


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>配列表示サンプル</title></head>
<body>
  <ul id="fruitList"></ul>
  <script th:inline="javascript">
    let fruits = /*[[${fruits}]]*/[];
    const ul = document.getElementById("fruitList");
    fruits.forEach(function(fruit) {
      const li = document.createElement("li");
      li.textContent = fruit;
      ul.appendChild(li);
    });
  </script>
</body>
</html>

配列を加工して別の配列を作る（map）


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>配列加工サンプル</title></head>
<body>
  <script th:inline="javascript">
    let fruits = /*[[${fruits}]]*/[];
    let upperFruits = fruits.map(function(fruit) {
      return fruit + " ��";
    });
    console.log(upperFruits);
  </script>
</body>
</html>

条件で配列を絞り込む（filter）


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>配列絞り込みサンプル</title></head>
<body>
  <script th:inline="javascript">
    let fruits = /*[[${fruits}]]*/[];
    let filtered = fruits.filter(function(fruit) {
      return fruit.indexOf("ン") !== -1;
    });
    console.log(filtered); // 「リンゴ」「イチゴ」など「ン」を含む要素
  </script>
</body>
</html>

複数の配列操作を組み合わせる

mapとfilterを組み合わせて、条件に合う要素を加工する方法もよく使われます。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>複合操作サンプル</title></head>
<body>
  <script th:inline="javascript">
    let fruits = /*[[${fruits}]]*/[];
    let result = fruits
      .filter(f => f.length >= 3)
      .map(f => f + "★");
    console.log(result);
  </script>
</body>
</html>

このように、サーバーから受け取った配列をJavaScriptで自在に操作できると、画面の表示や動作を豊かにできます。

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

実際のSpring＋Thymeleaf＋JavaScriptプロジェクトでは、ユーザーリストや商品リストなどの配列操作が頻出します。たとえば管理画面でユーザー一覧を取得し、JavaScriptで表示制御やフィルター、並べ替えを行うケースです。

ユーザー一覧に絞り込みと表示切り替えを実装


@Controller
public class UserController {
  @GetMapping("/users")
  public String users(Model model) {
    model.addAttribute("users", List.of("田中","鈴木","佐藤","高橋"));
    return "users";
  }
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>ユーザー絞り込み</title></head>
<body>
  <input id="search" placeholder="名前で絞り込む"/>
  <ul id="userList"></ul>
  <script th:inline="javascript">
    let users = /*[[${users}]]*/[];
    let input = document.getElementById("search");
    let ul = document.getElementById("userList");
    function render(list) {
      ul.innerHTML = "";
      list.forEach(u => {
        let li = document.createElement("li");
        li.textContent = u;
        ul.appendChild(li);
      });
    }
    input.addEventListener("input", function(){
      let filtered = users.filter(u => u.includes(input.value));
      render(filtered);
    });
    render(users);
  </script>
</body>
</html>

このコードでは、入力欄に文字を入力するとJavaScriptで配列をフィルターし、その結果をHTMLリストとして表示します。初心者でも実用感あるUI操作を体験できます。

6. 配列操作で注意すべきポイント

配列操作をするときは、文字列の大文字・小文字や空白、null・undefinedなどに注意が必要です。また、配列が空の場合の処理や、リアルタイム入力中の応答の負荷も考慮しましょう。

大文字・小文字の違いを吸収する方法


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>大文字小文字対応</title></head>
<body>
  <input id="search" placeholder="名前で絞り込む"/>
  <ul id="userList"></ul>
  <script th:inline="javascript">
    let users = /*[[${users}]]*/[];
    let input = document.getElementById("search");
    let ul = document.getElementById("userList");
    input.addEventListener("input", function(){
      let val = input.value.toLowerCase();
      let filtered = users.filter(u => u.toLowerCase().includes(val));
      // ...render略
    });
  </script>
</body>
</html>

空配列への対応とエラーチェック

配列が未定義や空の場合に備えて、JavaScript側で事前チェックを入れると安全です。


if (!Array.isArray(users) || users.length === 0) {
  ul.textContent = "ユーザーが見つかりません";
} else {
  render(users);
}

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

Pleiades＋GradleでSpringプロジェクトを作り、@Controllerで配列データを渡す基本を押さえる。
Thymeleafのth:inline="javascript"を使ってJavaScriptに配列を取得し、forEachやmap、filterで操作してみる。
ユーザー検索機能や商品フィルタなどの実用的な機能をJavaScriptで実装して、画面表示を動的に変えてみる。
エラーハンドリングや入力チェック、大文字小文字対応など、実務的な処理を追加して完成度を高めていく。

こうした手順で進めることで、Spring＋Thymeleaf＋JavaScriptの組み合わせによる配列操作の理解が深まり、実際のWebアプリケーション開発に役立ちます。