0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sugaiketadao

静的HTML - いまさらながら SIer向けフレームワークを自作した（10年ぶり3回目） #004

Last updated at Posted at 2026-02-04

はじめに

今回は 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フレームワーク リンク

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?