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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は業界を変えて会計——請求書作成（インボイス対応）（明細行の編集・複数税率・税率別内訳・適格請求書登録番号・取引先）。

銀行を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-first で存在する。 formatCurrency(578000) → ￥578,000。まさに過去の fintech cold-test が手巻きしてきたもの。金額・小計・税内訳・合計の全部に使った。ゼロ摩擦——請求書画面で single best な追加。

5回連続の絶賛、しかも初めて銀行以外の業界で。「ある業界で育てた primitive は、隣の業界でそのまま武器になる」——cold テストを業界横断で回す意味がここに出た。Form/FormField の a11y（#152/#175）・Combobox・Dialog も初手で動いた。

新しい穴 — 会計の核「編集可能なデータグリッド」

• 🟠 編集可能な明細行テーブルの primitive が無い（最大の穴）。Table は静的、DataTable は読み取り向き（sort＋renderCard・セル編集なし）、EditableField は単一フィールド。「編集セルの行＋導出列＋行追加/削除＋行ごと検証＋モバイル stack」を表す部品が無く、全手巻き（#199・beta ゲート大物）。
• 🟠 NumberInput が金額/数量セルで「クリアして打ち直せない」（空にすると旧値にスナップバック＝実バグ・#198）。
• 🟡 Combobox に creatable 無し（新規取引先を free-text 追加できない・#200）。

今ラウンドの修正

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

• 内部 draft 文字列で空/中間入力（""/"-"）を保持→値が parse できたときだけ onValueChange。クリア時に旧値へスナップバックしない。spinner/stepper 両 layout に適用・非破壊。
• ブラウザ実証: フィールドをクリアすると空のまま（スナップバックなし）・打ち直すと commit。

編集グリッド(#199)・Combobox creatable(#200) は beta ゲート/起票。

学び — primitive は業界を越えて複利する

銀行 #33〜#36: formatCurrency を育てる
会計 #37: 初手で「single best な追加」と絶賛

「ある業界で育てた primitive が、次の業界で初手から効く」——これは業界を変えるからこそ見える複利。同じ業界の深掘り（層の穴）に加え、業界横断（primitive の汎用性）も cold テストの価値だった。

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

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

試す

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

まだ alpha。銀行で育てた部品が、別業界でそのまま効いた回。

---

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