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

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。会計2枚目——⁠仕訳入力 / 振替伝票⁠（借方/貸方の編集グリッド・貸借バランス強制・勘定科目ピッカー・税区分）。

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

結果 — 4/5

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

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

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

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

請求書(#37)・仕訳(#38)と、⁠会計2枚連続で名前ピッカー⁠を踏みました。

直し（#202・同じ PR で反映）

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

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

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

• ⁠formatCurrency(#180) が6回連続で「気持ちよかった、摩擦ゼロ」⁠。
• ⁠#37 で直した NumberInput の クリア→打ち直し(#198) が「本物だ、修正は効いている」と検証⁠されました（直した翌回に確認）。
• Form/FormField のアクセシビリティ・Alert（貸借の一致/不一致バナー・role=alert）・AlertTitle as・DatePicker(ja)・Statistic も再び称賛。

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

• 🟠 ⁠編集できるデータグリッドのコンポーネントが無い⁠（#199・最大）。請求書(#37)・仕訳(#38)と⁠会計2枚連続で手組み⁠（Table＋セルごとの Input/Combobox のデスクトップ＋モバイルの縦積み、の二重描画・~300行）。
• 🟠 Combobox のグループ分けができない（#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。業界の作法が、ずっとあったバグを炙り出した回。