AI に経費精算（承認フロー付き）を作らせてみた — 前回作った編集グリッドが、翌回 5/5 の主役になった（やってみた #39）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。会計3枚目——⁠経費精算申請⁠（経費明細の編集グリッド・領収書アップロード・申請→承認→差戻しの承認ワークフロー）。

結果 — 5/5（シリーズ初の満点）

tsc/build 緑・console 0・375px で明細がカード化・承認フロー（申請→承認/差戻し）が動作・差戻しはコメント必須・h1 1個。⁠39回目にして初めて、予備知識ゼロの AI が「ほぼ戦わずに出荷できる」と満点を付けました。⁠

この回の主役 — 前回作った編集グリッドが、翌回の主役になった

直前(#38)の最大の欠落は「編集できるデータグリッドが無い」でした。EditableDataTable(#199) を作って出荷しました。⁠その次の回(#39)の予備知識ゼロの AI が、それを見つけて経費明細に使いました⁠:

⁠EditableDataTable — 使った、一度も手こずらなかった。この作りの主役だ。⁠ 全部カバーした——onAddRow/onRemoveRow+minRows・合計 footer・行ごとの getRowError・そして何より⁠デスクトップの table→モバイルの card への自動の縦積み⁠（375px で横スクロールゼロ）。各 cell() に ctx.ariaLabel（「明細3 金額」）も渡してくれる。⁠薄い Table のラッパーではない、本物の上位コンポーネントだ。迷わずまた使う。⁠

⁠「#37/#38 で 足りないコンポーネント（編集グリッド）を見つける → #38 で作る(#199) → #39 の別の AI が主役に据え、満点を付ける」⁠——コンポーネントを作る複利が、最強の形で回りました。formatCurrency(#180) は7回連続・#198 の NumberInput のクリア修正も検証。

新しい欠落と今ラウンドの修正

満点でも欠落はあります（誠実に）:

• 🟠 ⁠承認ワークフローのコンポーネントが無い⁠（最大）。申請→上長→経理のステップ状態＋役割ごとのアクションバー＋状態遷移を手組み（#207・beta ゲート）。
• 🟠 ⁠Timeline の印に意味を持つ色が無い⁠（success/warning/destructive・Badge/Button にはあるのに）→ 追加（#205）。
• 🟡 ⁠EditableColumn に minWidth が無い⁠（5/5 で唯一の摩擦・新しいコンポーネントの磨き込み）→ 追加（#206）。

ソースで2つ反映（PR#208）:

• ⁠Timeline に意味を持つ色⁠（承認ステップを緑/橙/赤で表せる・⁠ブラウザ実証で bg-success-strong→green 等⁠）。
• ⁠EditableColumn minWidth⁠（内容の多い列が、編集の列を潰さない・⁠ブラウザ実証で 12rem→192px⁠）。

学び — コンポーネントを作る投資は、翌回に満点で返ってくる

#37/#38: 編集グリッドの不足を2回踏む
#38: EditableDataTable を作る(#199)
#39: 次の AI が主役に据え、シリーズ初の 5/5

コンポーネントの小修正(#34 formatCurrency)・上位のコンポーネント(#152 Form, #171 Theme, #199 グリッド)——⁠作った投資はどれも、次の回の予備知識ゼロの AI が見つけて使い、点数を押し上げます⁠。複利は「直したバグの不在(#35)」から「作ったコンポーネントが満点の主役(#39)」まで来ました。

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

• ⁠節目の40回目⁠。承認ワークフロー(#207) を作るか、別業界（給与/POS/医療）へ。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#38
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。前回作ったコンポーネントが、翌回 5/5 の主役になった回。