AI に仕訳入力（複式簿記）を作らせてみた — 名前で検索できないピッカーの罠を直した（やってみた #38）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。会計2枚目——仕訳入力 / 振替伝票（借方/貸方の編集グリッド・貸借バランス強制・勘定科目ピッカー・税区分）。

会計を深掘り。請求書(#37)に続き、今回は 借方合計＝貸方合計のバランス強制という、銀行にも請求書にも無かった制約が核。

結果 — 4/5

tsc/build 緑・console 0・375px で借方/貸方がカード化・貸借不一致だと登録ブロック（aria-disabled）・h1 1個。

この回の主役 — 名前で検索できないピッカーの罠

勘定科目ピッカー（コードが value・科目名が label）で「売掛」と検索したら、何も出なかった:

🟠 Combobox は label でなく value で検索していた。 科目名「売掛」で検索→ヒットゼロ。value を "135 売掛金 資産" という合成文字列にして初めて検索できた。name-keyed なピッカー全部が踏む罠。

請求書(#37)・仕訳(#38)と会計2枚連続で名前ピッカーを踏んだ。

直し（#202・同 PR で land）

• keywords={[option.label]} を CommandItem に渡し、value を変えずに label を検索可能に（cmdk は value＋keywords を照合）。
• group? フィールドを追加し、勘定科目を区分（資産/負債/…）で見出しグルーピング可能に。

ブラウザ実証: "js"（value "next" に無く label "Next.js" にのみ存在）で検索→"Next.js" のみマッチ。修正前は0件だった。

それでも土台は強い — 複利は6回連続＋業界横断

• formatCurrency(#180) が6回連続「felt great, zero friction」。
• #37 で直した NumberInput のクリア→打ち直し(#198) が「is real, the fix works」と検証（直した翌回に確認）。
• Form/FormField の a11y・Alert（貸借一致/不一致バナー・role=alert）・AlertTitle as・DatePicker(ja)・Statistic も再称賛。

新しい穴 — 会計の核「編集グリッド」が2回連続

• 🟠 編集可能なデータグリッド primitive が無い（#199・最大）。請求書(#37)・仕訳(#38)と会計2枚連続で手巻き（Table＋セル別 Input/Combobox のデスクトップ＋モバイル stack の二重描画・~300行）。
• 🟠 Combobox の grouping 不可（#202 で同時修正）。
• 🟡 FormField が p-4 固定で密なフォームは毎回 p-0 上書き／Statistic が狭い2列で6桁¥を桁途中改行（#188 を緩和したが極狭セルでは残る）。

学び — 罠は「業界の作法」が炙り出す

銀行: 金額・残高は読み取り中心 → 検索ピッカーをあまり踏まない
会計: 勘定科目を名前で引く → label 検索の罠が一気に露出

Combobox の label 検索バグは、ずっとそこにあった。でも勘定科目を名前で引く会計の作法が初めてそれを踏ませた。業界を変えると、コードの別の面が試される——#32 の Form バグと同じ構図。

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

• 編集グリッド(#199) を作るか、会計をもう1枚 or 給与明細へ。2回連続で出た穴は、そろそろ作り時。

試す

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

まだ alpha。業界の作法が、ずっとあったバグを炙り出した回。

---

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