Webアプリケーションにおける一覧画面は、ユーザーにとって最も使用頻度の高い機能の一つです。
Spring BootとJavaScriptを組み合わせることで、バックエンドとフロントエンドの連携が効率的になり、一覧データの操作性も向上します。
本記事では、Spring Bootをサーバー側に置き、フロントではJavaScriptでデータを扱う方法について、実践的かつシンプルに解説します。
サンプルコードとともに、実際のプロジェクトでもすぐに応用できる知識を紹介します。
1．一覧データの基本構造とSpring Bootの役割
Spring Bootでは、一覧画面に表示するデータをControllerで取得し、Thymeleafなどのテンプレートエンジンを用いてHTMLに埋め込むのが基本的なパターンです。
たとえば、@GetMapping("/user/list") のようなエンドポイントに対して、Service層でDBアクセスを行い、取得したリストをModelに追加してViewに返します。
このようにHTMLに直接データを埋め込む方式では、JavaScriptから動的にデータを取得・操作することが難しい場合があります。
そのため、JavaScriptで一覧データを柔軟に扱いたい場合は、JSON形式でのデータ出力（REST APIの提供）とJavaScriptによるフェッチ処理が重要になります。
出典；How to Filter HTML Table Data in Spring Boot Using JavaScript and …
2．JavaScriptで一覧データを取得・描画する方法
JavaScriptを活用して一覧データを扱うには、以下のような構成が一般的です。
まず、Spring Boot側に@RestControllerでエンドポイントを用意し、@GetMapping("/api/users")のような形でJSONデータを返します。
フロントエンドでは、以下のようにfetch関数を使ってデータを取得し、DOM操作でテーブルに反映します。
fetch("/api/users")
.then(response => response.json())
.then(data => {
const tbody = document.getElementById("user-table-body");
tbody.innerHTML = ""; // 既存の行をクリア
data.forEach(user => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.email}</td>
`;
tbody.appendChild(row);
});
});
この方法なら、再描画やフィルタリング、並び替えなどの処理も柔軟に実装できます。
さらに、DataTablesやAG Gridといったライブラリを導入することで、複雑な操作も簡易に実装可能です。
🎁 Sponsors: Amazon | Prime | Music | Audible | Kindle Unlimited 🎁