はじめに

今回は SIcore の 「独自HTML属性」 について解説します。

フレームワークが独自に定義する data-* 属性により、よくある実装パターンを簡潔に記述できるようになっています。

HTML⇔JSONの基本的な仕組み

SIcore では、HTML要素の name 属性（または data-name 属性）をキーとして、JSON形式でサーバーとデータをやり取りします。

基本的な流れ

【ブラウザ → サーバー】
PageUtil.getValues() 実行
    ↓
name属性を持つ HTML要素から値を取得して リクエストJSON 生成
    ↓
サーバーへ リクエストJSON 送信

【サーバー → ブラウザ】
サーバーから レスポンスJSON 受信
    ↓
PageUtil.setValues(res) 実行
    ↓
name属性/data-name属性を持つ HTML要素に レスポンスJSON の値をセット

この際、独自HTML属性（data-check-off-value、data-value-format-type など）により、値の変換やフォーマットが自動的に行われます。

この記事で書くこと

主要な独自HTML属性3つの紹介
- data-name 属性（表示専用要素）
- data-check-off-value 属性（チェックボックスのOFF値）
- data-value-format-type 属性（自動フォーマット）
それぞれのメリット

data-name属性：表示専用要素

用途

フォーム入力要素（<input>, <select> など）以外の要素にも値を表示したい場合に使用します。

実装例

<!-- 入力要素（name属性） -->
<input type="text" name="user_id">

<!-- 表示専用要素（data-name属性） -->
<span data-name="user_nm"></span>
<td data-name="list.pet_nm"></td>

JavaScript での動作

// 取得時：name属性のみ取得（data-nameは取得しない）
const req = PageUtil.getValues();

// セット時：nameとdata-name両方にセット
PageUtil.setValues(res);

メリット

<span>, <td> などの非入力要素にも値をセット可能
name 属性と同じ命名規則で統一できる
表示専用項目と入力項目を明確に分離できる

data-check-off-value属性：チェックボックスのOFF値

用途

チェックボックスがOFFの時にリクエストに含める値を定義します。

実装例

<!-- チェックON時: "1"、OFF時: "0" -->
<input type="checkbox" name="is_dog" value="1" data-check-off-value="0">

<!-- チェックON時: "true"、OFF時: "false" -->
<input type="checkbox" name="is_cat" value="true" data-check-off-value="false">

リクエストJSON

// チェックONの場合
// { "is_dog": "1", "is_cat": "true" }

// チェックOFFの場合（OFF値が自動的に含まれる）
// { "is_dog": "0", "is_cat": "false" }

メリット

通常の <form> ではOFF時に値が送信されないが、この属性により値が含まれる
チェックボックスのOFF時の値を明示的に定義できる
サーバー側でOFF値を補完する処理が不要になる

注意点

必須ではないDB検索条件では使用しないこと（値がない場合は条件に含めない仕様が一般的なため）。

data-value-format-type属性：自動フォーマット

用途

画面表示時に値を自動フォーマットし、リクエスト送信時に自動でアンフォーマット（元の形式に戻す）します。

設定値

設定値	フォーマットタイプ	入力値（例）	表示値
`num`	数値（カンマ区切り）	`1000000`	`1,000,000`
`ymd`	日付（YYYY/MM/DD）	`20251231`	`2025/12/31`
`hms`	時刻（HH:MI:SS）	`123456`	`12:34:56`

実装例

<!-- 数値（カンマ区切り） -->
<input type="text" name="income_am" data-value-format-type="num">

<!-- 日付（YYYY/MM/DD形式） -->
<input type="text" name="birth_dt" data-value-format-type="ymd">

<!-- 時刻（HH:MI:SS形式） -->
<input type="text" name="start_tm" data-value-format-type="hms">

JavaScript での動作

// レスポンスをブラウザ表示：自動フォーマット
PageUtil.setValues({
  income_am: "1200000",  // → 画面表示: "1,200,000"
  birth_dt:  "19870321", // → 画面表示: "1987/03/21"
  start_tm:  "093000"    // → 画面表示: "09:30:00"
});

// ブラウザ入力値からリクエスト生成：自動アンフォーマット
const req = PageUtil.getValues();
// {
//   income_am: "1200000",  // カンマ除去
//   birth_dt:  "19870321", // スラッシュ除去
//   start_tm:  "093000"    // コロン除去
// }

Java側での処理

// Java側ではアンフォーマット処理不要（アンフォーマット済みの値が届く）
BigDecimal income = io.getBigDecimal("income_am");      // 1200000
LocalDate birthDate = io.getDateNullable("birth_dt");   // 1987-03-21

// DBにそのまま登録可能
SqlUtil.insert(getDbConn(), "t_user", io);

メリット

表示用フォーマットとDB保存用の値を自動変換
Java・JavaScript でフォーマット処理を書く必要がない
見た目とデータを分離できる
サーバーAPIはDB形式の値をそのまま返すだけでよく、表示形式への変換が不要

その他の独自属性

フレームワーク内部で使用する属性として、以下も定義されています。

独自属性	用途	備考
`data-style-display-backup`	非表示前の `display` スタイル値	再表示する際に使用
`data-style-visibility-backup`	非表示前の `visibility` スタイル値	再表示する際に使用
`data-title-backup`	エラーメッセージ設定前の `title` 属性値	エラー表示をクリアする際に使用
`data-obj-row-idx`	配列データのインデックス値	おもに `<table>` で、リクエスト時にセットしてレスポンス時にエラー表示で使用
`data-radio-obj-name`	ラジオボタンの元の `name` 属性値	おもに `<table>` で、行ごとのグループ分けに使用

これらは主にフレームワーク内部で自動的に使用されるため、通常の実装で意識する必要はありません。

おわりに

SIcore の独自HTML属性により、よくある実装パターンが簡潔に記述できるようになります。

特に data-value-format-type 属性は、数値や日付のフォーマット処理をJavaとJavaScriptの両方で書く手間を省けるため、開発効率が向上します。

次回は、Map型設計について紹介する予定です。

関連記事リンク

他の記事もぜひご覧ください！

SIcoreフレームワークリンク

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

HP: https://onepg.com/ja/
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

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