AI に請求書（インボイス）作成画面を作らせてみた — 銀行で育てたコンポーネントが、別業界でそのまま効いた（やってみた #37）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は⁠業界を変えて会計⁠——⁠請求書作成（インボイス対応）⁠（明細行の編集・複数税率・税率別内訳・適格請求書登録番号・取引先）。

銀行を5枚やり切ったので、隣の「数字業界」へ。会計には銀行に無い作法があります——明細行のインライン編集、複数税率（10%/8%軽減）の混在、⁠税率別内訳⁠、適格請求書（インボイス制度）の登録番号。

結果 — 4/5

tsc/build 緑・console 0・375px で明細がカード化・税率別内訳が正確（10%対象¥570,000/¥57,000、8%対象¥8,000/¥640）・行追加/削除・h1 1個。

この回の主役 — 銀行で育てたコンポーネントが、業界を越えてそのまま効いた

#33〜#36 の銀行5枚で formatCurrency(#180) を育ててきました。⁠業界を会計に変えても、最初から効きました⁠:

⁠formatCurrency は JPY を既定にして存在する。⁠ formatCurrency(578000) → ￥578,000。⁠まさに、過去の金融系のテストで手組みしてきたもの。金額・小計・税の内訳・合計の全部に使った。ゼロ摩擦——請求書画面で、いちばん良い追加だ。⁠

5回連続の絶賛、しかも⁠初めて銀行以外の業界⁠で。「ある業界で育てたコンポーネントは、隣の業界でそのまま武器になる」——予備知識ゼロの AI に作らせるテストを、業界をまたいで回す意味がここに出ました。Form/FormField のアクセシビリティ（#152/#175）・Combobox・Dialog も最初から動いた。

新しい欠落 — 会計の核「編集できるデータグリッド」

• 🟠 ⁠編集できる明細行テーブルのコンポーネントが無い⁠（最大の欠落）。Table は静的、DataTable は読み取り向き（並べ替え＋renderCard・セル編集なし）、EditableField は単一フィールド。「編集できるセルの行＋自動計算の列＋行の追加/削除＋行ごとの検証＋モバイルで縦積み」を表すコンポーネントが無く、全部手組み（#199・beta ゲートの大物）。
• 🟠 ⁠NumberInput が、金額/数量セルで「クリアして打ち直せない」⁠（空にすると前の値に戻ってしまう＝実バグ・#198）。
• 🟡 Combobox に「新規作成」機能が無い（新しい取引先を自由入力で追加できない・#200）。

今ラウンドの修正

⁠NumberInput の クリア→打ち直し を修正⁠（PR#201）:

• 内部の下書き文字列で、空や入力途中（""/"-"）を保持→値が解釈できたときだけ onValueChange。クリアしても前の値に戻らない。spinner/stepper の両方の layout に適用・既存を壊さず。
• ⁠ブラウザ実証⁠: フィールドをクリアすると空のまま（前の値に戻らない）・打ち直すと確定する。

編集グリッド(#199)・Combobox の新規作成(#200) は beta ゲート/課題に記録。

学び — コンポーネントは業界を越えて複利する

銀行 #33〜#36: formatCurrency を育てる
会計 #37: 最初から「いちばん良い追加」と絶賛

「ある業界で育てたコンポーネントが、次の業界でも最初から効く」——これは⁠業界を変えるからこそ見える複利⁠です。同じ業界の深掘り（層ごとの欠落）に加え、業界をまたぐこと（コンポーネントの汎用性）も、予備知識ゼロの AI に作らせるテストの価値でした。

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

• ⁠会計をもう少し⁠（仕訳入力/試算表——複式簿記の借方貸方バランス）or 給与明細へ。

試す

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

まだ alpha。銀行で育てたコンポーネントが、別業界でそのまま効いた回。