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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠トラックの事業者向けを厚く⁠（配車#159・求貨求車#160・車両労務#161 に追加）——⁠運賃・請求管理⁠（運賃計算・運賃タリフ・燃料サーチャージ・請求書・入金消込）。経理担当向けの情報密度コンソール。

結果 — 4/5、グループ化の背骨が3回目でコンポーネント化

tsc 緑・デスクトップ情報密度。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠本物の強い事務方のライブラリ。⁠ 運賃・請求/売掛コンソールの ~85% を、用途向けに作られたコンポーネントでカバーした。だが1つ、再発する欠落（小計付きグループ表）を手組みした。

観測の核 — SectionList が3回目でコンポーネント化

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

予備知識ゼロの AI「⁠グループ化リスト/セクションリスト/グループ表のコンポーネントが無い。DataTable/ActionDataTable はフラットな TanStack 表で groupBy もセクション見出し行もグループごとの小計フッターも無い。/docs/by-use-case 索引自身がそれを認める＝『小計付きグループ表』を素の DataTable に誘導し、グループ化の答えが無い。groupInvoices() を手組みし、グループごとに [見出し帯]+[ActionDataTable]+[小計用の Table] を積んだ。追加すべき最重要のコンポーネントはグループ化された DataTable＝groupBy+セクション見出し+グループごとの小計フッター。⁠」

⁠SectionList/GroupedList は タクシー#149（月別乗車履歴）・バス#158（IC 日付台帳）でも手組み済＝3回目＝3回確認。その場で作った⁠：

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

ブラウザで 締め別2グループ・右寄せ小計（¥1,663,500/¥808,500＝正しい合算）・グループごとの小計フッター2帯 を確認＝PR#421（#404 クローズ）。⁠コンポーネント化 20個目。⁠

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

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

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

これは「隠す（言及しない）」でも「すり替える（間違ったコンポーネントを勧める）」でもない、⁠「これしか無いが、これでは足りないと正直に書く」⁠形だ。予備知識ゼロの AI 評：『正直だが、この画面で最も難しい組み立てに一切の指針が無い』。

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

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

⁠誠実さの順は ①自認 > ②隠す > ③すり替え。⁠ 土台成熟後のこのテストは、索引の各項目を「正しく導く/自認する/隠す/すり替える」で格付けし、誠実さを上げていく作業に近づく。SectionList は①（自認）を②に進めた＝正直な「無い」を「ある（SectionList）」にした。

拾った点

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

⁠今回 src で作ったもの = SectionList（#404→PR#421）⁠。4/5・グループ化の背骨をコンポーネント化・索引是正。

📊 コンポーネント化スコアボード（作成済 ⁠20個⁠）

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

📋 モード進捗 — トラックの事業者向け4

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

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

• トラックの事業者向け 最後（運送原価/KPI 等）で 事業者向け5・その後 利用者向け（荷主の集荷依頼・貨物追跡）。※次回までに決める。

試す

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

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