1. リストデータとは？（基本的な説明）

リストデータとは、複数の同じ種類のデータをまとめて管理するデータ構造のことです。Javaでは、ListやArrayListといったクラスを使って、複数の要素を順番に格納します。例えば、名前の一覧や商品の一覧などがリストデータとしてよく扱われます。

Webアプリケーションでは、リストデータをサーバー側で用意し、ThymeleafでHTMLに埋め込んで表示します。JavaScriptを使うことで、表示後にリストの内容を動的に更新したり、追加・削除したりできます。リストデータを正しく扱うことで、動的で便利な画面を作れるようになります。

リストデータの基本的なイメージは次のようになります。


List<String> names = new ArrayList<>();
names.add("太郎");
names.add("花子");
names.add("次郎");

この例では、3つの名前を持つリストデータを作成しています。このリストをThymeleafで表示し、JavaScriptで操作するのが、今回の解説のポイントです。

2. リストデータをThymeleafとJavaScriptで操作する全体の流れ

ThymeleafとJavaScriptでリストデータを操作する基本的な流れは次の通りです。

サーバー側の@Controllerでリストデータを用意する
ThymeleafテンプレートでリストデータをHTMLとして表示する
JavaScriptで表示されたリストを操作する（例：追加・削除・並べ替え）
必要に応じて、操作結果をサーバーに送信する

例えば、サーバー側で作った名前リストをHTMLの


<ul>
  <li th:each="name : ${names}" th:text="${name}"></li>
</ul>

ここでth:each属性を使うことで、サーバー側のリストデータを一括で表示できます。このリストに対して、JavaScriptを使って新しい要素を追加するなどの操作を行うことができます。

例えば、JavaScriptで新しい要素を追加する例は以下のようになります。


<script>
function addName(name) {
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = name;
  ul.appendChild(li);
}
</script>

このように、Thymeleafで初期リストを作成し、JavaScriptで追加・削除などを操作することで、リストデータを柔軟に管理できます。

次回は、実際にJavaScriptでリストを操作する具体例や、サーバー側の受け口について詳しく解説していきます。

3. JavaScriptでリストデータを操作する基本的なコード例

ここでは、JavaScriptを使ってリストデータを追加・削除・並び替えする基本的なコードを紹介します。まず、シンプルなHTMLとボタンを用意します。


<ul id="nameList">
  <li>太郎</li>
  <li>花子</li>
</ul>
<input type="text" id="newName" placeholder="追加する名前">
<button id="addBtn">追加</button>
<button id="removeBtn">削除</button>
<button id="sortBtn">並べ替え</button>

次に、JavaScriptでそれぞれのボタンに機能を付けます。


<script>
const list = document.getElementById('nameList');
document.getElementById('addBtn').addEventListener('click', () => {
  const name = document.getElementById('newName').value.trim();
  if (name === '') return;
  const li = document.createElement('li');
  li.textContent = name;
  list.appendChild(li);
});
document.getElementById('removeBtn').addEventListener('click', () => {
  if (list.lastElementChild) {
    list.removeChild(list.lastElementChild);
  }
});
document.getElementById('sortBtn').addEventListener('click', () => {
  Array.from(list.children)
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => list.appendChild(li));
});
</script>

このコードにより、入力した名前をリストに追加し、最後の要素を削除し、名前順に並べ替える三つの操作が可能になります。

4. @Controllerを使ったサーバー側のリストデータ受け口

次に、サーバー側でリストデータをJavaScriptから取得・保存する仕組みを作ります。ThymeleafとJavaScriptで連携するため、@Controllerを使ってエンドポイントを用意します。


@Controller
public class ListController {
  private List<String> names = new ArrayList<>(Arrays.asList("太郎","花子"));

  @GetMapping("/names")
  @ResponseBody
  public List<String> getNames() {
    return names;
  }

  @PostMapping("/names/add")
  @ResponseBody
  public List<String> addName(@RequestBody Map<String,String> req) {
    names.add(req.get("name"));
    return names;
  }
}

この例では、GETで現在の名前リストを取得し、POSTで名前を追加する二つのエンドポイントを用意しています。@ResponseBodyを使ってJSON形式でデータを返却します。

5. ThymeleafとJavaScriptを組み合わせたリスト操作例

最後に、Thymeleafで初期表示し、JavaScriptでサーバーと連携する応用例を紹介します。


<ul id="nameList" th:each="name : ${names}">
  <li th:text="${name}"></li>
</ul>
<input type="text" id="newName" placeholder="追加する名前">
<button id="addBtn">追加</button>

<script>
fetch('/names')
  .then(res => res.json())
  .then(names => {
    const ul = document.getElementById('nameList');
    ul.innerHTML = '';
    names.forEach(n => {
      const li = document.createElement('li');
      li.textContent = n;
      ul.appendChild(li);
    });
  });

document.getElementById('addBtn').addEventListener('click', () => {
  const name = document.getElementById('newName').value.trim();
  if (name === '') return;
  fetch('/names/add', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({name})
  })
  .then(res => res.json())
  .then(names => {
    const ul = document.getElementById('nameList');
    ul.innerHTML = '';
    names.forEach(n => {
      const li = document.createElement('li');
      li.textContent = n;
      ul.appendChild(li);
    });
  });
});
</script>

この構成により、初期データ表示や名前追加機能をページ遷移なしで実現できます。サーバーとリストデータを同期し、動的に更新する便利な操作例です。

今回はJavaScriptでのリスト追加とThymeleafでの初期表示、サーバーとの通信を組み合わせた例を学びました。後半では、エラー対策や学習アドバイスを紹介します。

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

ThymeleafとJavaScriptでリスト操作を実装するとき、初心者がつまずきやすいポイントを整理しました。

th:eachで表示されない：サーバー側のModelにnamesが含まれていないと表示されません。Model.addAttribute("names", names);を忘れずに。
fetchのURLが違う：エンドポイントのパスを間違えるとエラーになります。コンソールの404を確認しURLを正しく修正しましょう。
Content-Type未指定：POST時にContent-Type: application/jsonを指定しないと@RequestBodyが空になります。
JSONパースエラー：サーバーの返却データがJSON形式でないとresponse.json()が失敗します。@ResponseBodyを入れ忘れるケースに注意。
ボタンの連打による重複登録：追加時にボタンを一時的に無効化する工夫が必要です。
DOM再描画で選択状態が消える：リストを再描画するとチェック状態などがリセットされます。状態保存やindex活用がポイントです。

例えば、ボタン連打を防ぐサンプルは次の通りです。


<script>
document.getElementById('addBtn').addEventListener('click', async () => {
  const btn = document.getElementById('addBtn');
  btn.disabled = true;
  const name = document.getElementById('newName').value.trim();
  if (name) {
    await fetch('/names/add', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({name})
    });
    // リスト更新処理...
  }
  btn.disabled = false;
});
</script>

このようにすることで、連打による重複登録を防ぎ、ユーザー体験を向上させられます。

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

最後に、リストデータの操作を学ぶときに役立つアドバイスをまとめます。

小さなサンプルからスタート：まずは「名前を入力して追加する」「最後の要素を削除する」といった基本操作だけを実装してみましょう。
console.logでデバッグ：fetch前後の状態や取得したリスト内容を
やコンソールに表示して挙動を確認しましょう。
ModelとJavaScriptの連携を理解：Thymeleafのth:eachで表示し、JavaScriptで更新する一連の流れを意識して実装すると理解が深まります。
状態の再描画対応を学ぶ：要素を追加・削除すると既存のDOMが変わります。選択済み要素などを維持する方法を学ぶのも重要です。
公式ドキュメントを活用：Spring公式のThymeleaf連携ガイドやfetch APIのリファレンスを参照すると理解が進みます。
アプリケーションへ応用：リストに編集機能やチェックボックス機能を加え、もっと実践的なUXを目指してみましょう。
Pleiadesの支援機能を活用：オートコンプリートやモデル生成支援を使って、コードを書く時間を短縮できます。