AI にトラックの運賃・請求管理を作らせてみた — グループ化の背骨が3回目で結晶化（やってみた #162）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。トラック toB を厚く（配車#159・求貨求車#160・車両労務#161 に追加）——運賃・請求管理（運賃計算・運賃タリフ・燃料サーチャージ・請求書・入金消込）。経理担当向けの情報密度コンソール。

結果 — 4/5、グループ化の背骨が3回目で結晶化

tsc 緑・デスクトップ情報密度。cold AI（群青を一度も触っていない設定）：

本物の強い back-office キット。 運賃・請求/AR コンソールの ~85% を purpose-built な部品でカバーした。だが1つ、再発する穴（小計付きグループ表）を手組みした。

観測の核 — SectionList が3回目で結晶化

請求を荷主/締めごとにグループ化し、各グループに小計——3回目の手組みだった：

cold AI「grouped-list/section-list/grouped-table の primitive が無い。DataTable/ActionDataTable はフラットな TanStack 表で groupBy もセクション見出し行も per-group 小計フッターも無い。/docs/by-use-case 索引自身がそれを認める＝『小計付きグループ表』を plain DataTable に誘導し、グループ化の答えが無い。groupInvoices() を手組みし、グループごとに [見出し帯]+[ActionDataTable]+[小計用の Table] を積んだ。追加すべき最重要部品は grouped DataTable＝groupBy+セクション見出し+per-group 小計フッター。」

SectionList/GroupedList は taxi#149（月別乗車履歴）・bus#158（IC 日付台帳）でも手組み済＝3回目＝3-confirm。その場で build した：

• SectionList＝セクションの並び・各々 見出し帯（title+sublabel+右寄せグループ集計）の上に呼び出し側の本文行、任意のper-group 小計フッター。
• 本文非依存＝ListCard（モバイル履歴）/Table（デスクトップ請求）/符号付き台帳行 を入れられる。グルーピングと小計計算とクロスグループ選択は呼び出し側、見出し/フッターの chrome とセクション a11y 構造はコンポーネント。
• 索引も是正＝『小計付きグループ表→SectionList』を明記し、AmountBreakdown には『金額は表示するだけで合算しない・グループ取引は SectionList』を相互リンク。

ブラウザで 締め別2グループ・右寄せ小計（¥1,663,500/¥808,500＝正しい合算）・per-group 小計フッター2帯 を確認＝PR#421（#404 クローズ）。結晶化 20個目。

学び — 「索引が自ら穴を認める」のは最も誠実な誤誘導

#160 で索引の罠を2種（隠す/すり替える）に分けた。#162 で**3種類目＝『自認する罠』**が見えた：

索引は『小計付きグループ表』を plain DataTable に誘導するが、グループ化の答えは無いと自ら認める。

これは「隠す（言及しない）」でも「すり替える（間違った部品を勧める）」でもない、**「これしか無いがこれでは足りないと正直に書く」**形だ。cold AI 評：『honest だが、この画面で最も難しい composition に一切のガイダンスが無い』。

3種類の索引の状態を、対応コストで並べると：

1. 自認する穴（#162 DataTable→「グループ化は別途」）＝最も誠実・adopter は手組みするが「無い」と分かっている＝部品 build で埋める（索引は既に正直）。
2. 隠す罠（#159 ActionDataTable）＝部品はあるのに言及せず＝索引追加で是正（安い）。
3. すり替える罠（#160 RelationshipRow）＝間違った部品を積極的に勧める＝部品 build＋索引是正（高い・最も危険）。

誠実さの順は ①自認 > ②隠す > ③すり替え。 床成熟後の cold-test は、索引の各エントリを「正しく導く/自認する/隠す/すり替える」で格付けし、誠実さを上げていく作業に近づく。SectionList は①（自認）を②に進めた＝正直な「無い」を「ある（SectionList）」にした。

拾った点

• ✅ AmountBreakdown が運賃導出（基本運賃+燃サ+高速代−値引→税抜→消費税→請求額）に native「キット最良」。但し合算はしない＝表示のみ（cold AI が指摘・索引に明記）。
• ✅ ActionDataTable が入金消込（請求選択→消込）で自力発見＝#418 索引是正の再検証。
• 🟡 DataTable に footer/summary 行が無く、小計に Table を別途スタック（TableFooter はあるが DataTable が露出しない）＝小さな prop gap。

今回 src build = SectionList（#404→PR#421）。4/5・グループ化の背骨結晶化・索引是正。

📊 結晶化スコアボード（build 済 20個）

…SegmentedControl / LineChip / LimitMonitor / SectionList 進行中：MatchCard/PairingPanel(1/3)・ValidityTimer(1/3)・DataTable summary行

📋 モード進捗 — トラック toB4

• ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅
• 🚚 トラック：toB4（配車#159/求貨求車#160/車両労務#161/運賃請求#162） ← あと1枚で toB5・その後 toC へ

次回予告（やってみた #163）

• トラック toB 最後（運送原価/KPI 等）で toB5・その後 toC（荷主の集荷依頼・貨物追跡）。※KeEem に確認。

試す

• gunjo.jp ／ セクションリスト SectionList（新）／ 金額内訳 AmountBreakdown ／ 一括操作表 ActionDataTable ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#161
• GunjoUI by UIXHERO

グループ化の背骨が3回目で結晶化した——索引には「自認する穴/隠す罠/すり替える罠」があり、誠実さの順に①自認>②隠す>③すり替え。SectionList は正直な「無い」を「ある」に進めた。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->