はじめに

今回は SIcore の特徴である 「静的HTML」 について解説します。

前回の「JSON限定」設計を実現するために、HTML をどのように扱っているのか、具体的なコード例とともに紹介します。

この記事で書くこと

静的HTMLとは
HTMLモックアップがそのまま実装コードになる仕組み
HTML と JSON の自動相互変換
name属性と data-name属性
テーブル行データの扱い方
メリット／デメリット

静的HTMLとは

SIcore では、HTML ファイルを 静的ファイル（.html） として配置し、サーバー側で HTML を動的生成しません。

つまり：

JSP、Thymeleaf、テンプレートエンジンは使わない
HTMLファイルはブラウザが直接取得する
値の表示は JavaScript が JSON から行う

これにより「HTMLモックアップ → 実装コード」への移行がスムーズになります。

HTMLモックアップがそのまま実装コードになる

設計フェーズで作成した HTML モックアップに name 属性を追加するだけで、実装コードとして機能します。

モックアップHTML:

<input type="text" value="サンプル太郎">
<input type="text" value="sample@example.com">

実装HTML（name属性を追加し、サンプル値削除）:

<input type="text" name="user_nm">
<input type="text" name="email">

これだけで、JavaScript から値を取得・設定できるようになります。

HTML と JSON の自動相互変換

SIcore の中核機能の一つが、HTML と JSON（厳密には連想配列）の自動相互変換です。

HTML → JSON（リクエスト生成）

HTML:

<input type="text" name="user_id" value="U001">
<input type="text" name="user_nm" value="マイク・デイビス">
<input type="text" name="email" value="mike.davis@example.com">

JavaScript:

// ブラウザ入力値からリクエストJSON生成
const req = PageUtil.getValues();

// 実行結果
// {
//   "user_id": "U001",
//   "user_nm": "マイク・デイビス",
//   "email": "mike.davis@example.com"
// }

JSON → HTML（レスポンス表示）

JavaScript:

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

// レスポンスJSON をブラウザ表示
PageUtil.setValues(res);

HTML（値がセットされる）:

<!-- レスポンス前 -->
<input type="text" name="user_id">
<span data-name="user_nm"></span>

<!-- レスポンス後 -->
<input type="text" name="user_id" value="U001">
<span data-name="user_nm">マイク・デイビス</span>

formタグ不要

従来の Web 開発では <form> タグで要素をグループ化し、submit イベントでサーバーに送信していましたが、SIcore では：

PageUtil.getValues() が自動で値を収集する
name 属性さえあれば取得可能
フォーム送信イベントを使用しない

これにより、HTML 構造がシンプルになり、複数のボタンで異なる処理を実行する場合も自然に記述できます。

name属性と data-name属性

name属性：入力と表示の両方

name 属性は、フォーム入力要素（<input>、<select> など）に付与します。

<input type="text" name="user_id">
<select name="country_cs">
  <option value="JP">日本</option>
  <option value="US">アメリカ</option>
</select>

PageUtil.getValues() で値を 取得できる
PageUtil.setValues() で値を セットできる

data-name属性：表示専用

本来 name 属性を持たない <span> や <td> でレスポンス表示する場合は、data-name 属性（SIcore 独自HTML属性）を付与します。

<span data-name="user_nm"></span>
<td data-name="income_am"></td>

PageUtil.getValues() では値を 取得しない（表示専用）
PageUtil.setValues() で値を セットできる

この使い分けにより、「入力項目」と「表示専用項目」を明確に区別できます。
フォーム入力要素には元々 name 属性があり、非フォーム要素にはないため、この使い分けは HTML 標準の仕様に沿った自然な形になっています。

テーブル行データの扱い方

配列データ（明細行など）も自動で JSON 変換されます。

HTML（テーブル行）:

<table>
  <tbody id="list">
    <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>

JavaScript:

const req = PageUtil.getValues();

// 実行結果
// {
//   "list": [
//     {"pet_nm": "ポチ", "weight_kg": "5.0"},
//     {"pet_nm": "タマ", "weight_kg": "2.5"}
//   ]
// }

name 属性を list.pet_nm のように「.（ドット）」で区切ることで、自動的に配列として扱われます。

メリット

HTMLモックアップをそのまま実装コードとして使用できる：設計と実装の乖離が少ない
テンプレートエンジンが不要：学習コストが低く、HTML の知識だけで実装できる
タグ不要：HTML 構造がシンプルになる
デザイナーとの協業がしやすい：サーバー側の知識がなくても HTML を編集できる
AIがコードを生成しやすい：一貫性のあるパターンでトークン消費が少ない

デメリット

HTMLの部品化ができない：ヘッダーやフッターなどの共通部分を各 HTML ファイルに記述する必要がある
- ただし、修正時の「全ファイル一括変更」は AI が得意なのでカバーできる

おわりに

「静的HTML」は、従来の JSP やテンプレートエンジンに慣れた方には最初は戸惑うかもしれません。

しかし、「HTMLモックアップがそのまま実装コードになる」 という体験は、設計と実装の間にある溝を埋め、開発効率を大きく向上させます。これは人間だけでなく AI にとっても同様です。設計書（HTMLモックアップ）と実装コードが近ければ近いほど、AI はより正確にコードを生成できます。

そして、「シンプルで一貫性のあるパターン」は AI によるコード生成の精度をさらに高めるため、この設計思想は AI 時代においてますます重要になると考えています。

次回は、この記事でも触れた「独自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

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