AI に給与明細の編集画面を作らせてみた — 直近2回で作ったコンポーネントが、両方とも別業界で即採用された（やってみた #40）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。記念すべき40回目は⁠業界を変えて給与⁠——⁠給与明細の編集・確定画面⁠（支給/控除の編集・差引支給額・社会保険/税・年間累計・承認確定フロー）。

結果 — 4.5/5

tsc/build 緑・console 0・375px で支給/控除グリッドがカード化・差引支給額がその場で再計算（マイナスは警告）・承認→確定フロー動作・h1 1個。

この回の主役 — 直近2回で作ったコンポーネントが、両方とも新しい業界で即採用された

直近2回で EditableDataTable(#199・編集グリッド) と ApprovalSteps(#207・承認経路) を作って出荷しました。⁠40回目の給与画面（銀行でも会計でもない新しい業界）で、予備知識ゼロの AI が両方を見つけて使いました⁠:

⁠EditableDataTable — 使った、手こずりゼロ⁠、支給と控除の両方のグリッドに。自分で作り直すはずの構造を全部供給してくれる——自動でデスクトップの table→モバイルの card・行の add/remove・footer の合計・getRowError・セルごとの ctx.ariaLabel・列の width/minWidth。仕事をカバーした。各セルの編集欄を渡すだけ。

⁠ApprovalSteps — 使った、まさに目的特化⁠、人事→経理→確定に。差戻しの状態はコメントを取る。一度も戦わなかった。

⁠「足りないコンポーネントを見つける → 作る(#199/#207) → 翌回の別業界で即採用、ゼロ摩擦」⁠——複利が全開で回りました。formatCurrency(#180) は8回連続（{signed:true} で -¥30,000）。Statistic/Badge/Alert/Dialog/MetadataList も最初から。

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

• 🟠 ⁠CurrencyInput が無い⁠（最大）。表示用の formatCurrency はありますが、¥の接頭辞・桁区切り・右揃えの⁠金額入力欄⁠が無い。給与/会計の金額セルは全部 NumberInput（数量用のスピンボックス）に落ちる。⁠#176 が #32/#33/#38/#40 と4回連続で確認⁠——出荷待ちの一番手です。
• 🟡 ⁠EditableDataTable の footer が全幅で、金額列に揃えられない⁠（新しいコンポーネントの磨き込み点）→ renderFooterCell を追加（#210・⁠ブラウザ実証で、合計を金額列の真下に右揃え⁠）。

学び — 作った投資は、業界を越えて翌回に返ってくる

#38: 編集グリッドの不足 → #199 を作る → #39 会計で主役(5/5)
#39: 承認の不足 → #207 を作る → #40 給与で即採用(4.5/5)

コンポーネントの小修正も上位のコンポーネントも、⁠作った投資はどれも、翌回の予備知識ゼロの AI が見つけて使います⁠。しかも #40 では⁠業界を越えて⁠（会計→給与）両方のコンポーネントが効いた——複利は「同じ業界の翌回」から「別業界の翌回」へ広がりました。40回回した価値は、この複利の確かさに出ています。

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

• ⁠CurrencyInput(#176) を作るか⁠、給与もう1枚 or 別業界（POS/医療）へ。4回連続の"足りないコンポーネント"は作り時。

試す

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

まだ alpha。作ったコンポーネントが、業界を越えて翌回に返ってきた回。