動的リスト表示 - いまさらながら SIer向けフレームワークを自作した（10年ぶり3回目） #005

Last updated at 2026-02-06Posted at 2026-02-06

はじめに

前回は SIcore の HTMLモックアップがそのまま実装コードになる仕組みを紹介しました。

今回は、その仕組みをベースに 「動的リスト表示」 の実装方法を解説します。

サーバーから返された配列データを、テンプレートを用いて自動的にテーブル行やリスト要素として展開する仕組みを紹介します。

この記事で書くこと

動的リスト表示とは
テンプレートを用いた行の自動生成
実装手順とコード例
メリット

動的リスト表示とは

SIcore では、サーバーから返された配列データ [{}, {}] を、HTML のテンプレートを用いて自動的に行要素として展開できます。

従来の JSP などでは <c:forEach> を使ってループ処理を記述する必要がありましたが、SIcore では テンプレート行を用意するだけで配列データを自動展開できます。

実装手順とコード例

ステップ1：テンプレート行を定義する

テーブルの <tbody> 内に <script type="text/html"> タグでテンプレート行を定義します。

静的HTML（テンプレート行のみ）:

<table>
  <tbody id="list">
    <script type="text/html">
      <tr>
        <td><input name="list.pet_nm"></td>
        <td><input name="list.weight_kg"></td>
      </tr>
    </script>
  </tbody>
</table>

ポイント：

<tbody> に id="list" を付ける
テンプレート行は <script type="text/html"> で囲む（<template> に移行予定）
行要素の name 属性は list.項目名 の形式で記述する（list は JSON のキーと合わせる）

ステップ2：サーバーから配列データを取得して表示する

JavaScript:

// サーバーからレスポンスJSON受信
const req = PageUtil.getValues();
const res = await HttpUtil.callJsonService('/services/exmodule/ExampleListSearch', req);

// レスポンスJSON
// {
//   "list": [
//     {"pet_nm": "ポチ", "weight_kg": "5.0"},
//     {"pet_nm": "タマ", "weight_kg": "2.5"}
//   ]
// }

// レスポンスJSONから行を自動生成
PageUtil.setValues(res);

結果：HTMLに行が追加される

結果HTML（テンプレート行＋追加行）:

<table>
  <tbody id="list">
    <script type="text/html">
      <tr>
        <td><input name="list.pet_nm"></td>
        <td><input name="list.weight_kg"></td>
      </tr>
    </script>
    <tr>
      <td><input name="list.pet_nm" value="ポチ"></td>
      <td><input name="list.weight_kg" value="5.0"></td>
    </tr>
    <tr>
      <td><input name="list.pet_nm" value="タマ"></td>
      <td><input name="list.weight_kg" value="2.5"></td>
    </tr>
  </tbody>
</table>

PageUtil.setValues(res) により、配列データが自動的にテーブル行として展開されます。

明示的な行追加も可能

配列データを受け取らず、JavaScript で明示的に行を追加することもできます。

// 1行追加
PageUtil.addRow('list', {pet_nm: 'ポチ', weight_kg: '5.0'});

// 複数行追加
PageUtil.addRow('list', [
  {pet_nm: 'ポチ', weight_kg: '5.0'},
  {pet_nm: 'タマ', weight_kg: '2.5'}
]);

メリット

1. ループ処理の記述が不要

JSP の <c:forEach> や Thymeleaf の th:each のような記述が不要になります。テンプレート行を定義するだけで、配列データを自動展開できます。

2. HTMLモックアップからの移行が簡単

モックアップ段階で作成したテーブル行を <script type="text/html"> で囲むだけで、実装コードになります。

3. サーバー側はJSONを返すだけ

サーバー側（Java）はループ処理を意識せず、配列データを JSON で返すだけです。

// Javaコード
public void doExecute(Io io) {
  // DB検索
  final IoRows rows = SqlUtil.selectBulk(getDbConn(), SQL_SEL_PET);
  // 抽出結果セット
  io.putRows("list", rows);
}

おわりに

SIcore の動的リスト表示機能により、配列データの表示が簡潔に実装できるようになります。

次回は、独自HTML属性ついて紹介する予定です。

SIcoreフレームワークリンク

実装コードと資料はすべてこちらで公開しています。

GitHub: https://github.com/sugaiketadao/sicore-ja
サンプル画面の確認方法: https://github.com/sugaiketadao/sicore-ja#%EF%B8%8F-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95---vs-code
AI開発の始め方: https://github.com/sugaiketadao/sicore-ja#-ai%E9%96%8B%E7%99%BA%E3%81%AE%E5%A7%8B%E3%82%81%E6%96%B9

読んでいただきありがとうございました！
❤いいね！をしていただけると励みになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up