AI にレジ締めを作らせてみた — 「過不足」を3回見たので、ついにコンポーネントを作る（やってみた #44）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。小売3枚目——⁠レジ締め / 日次精算⁠（金種別現金実査 × 理論残高照合 × 過不足 × 支払区分別内訳 × 釣銭繰越）。

「1業界は最低3〜5枚・可能な限り違う内容・業界特有UIを最優先」という方針。#42 レジ会計（売る）、#43 実地棚卸（数える）に続いて、今回は ⁠締める⁠——一日の終わり、ドロワーを数えて理論残高と突き合わせ、レジを締める作法。売上を立てる画面でも、在庫を数える画面でもない、⁠現金照合の画面⁠。

結果 — 4/5

tsc/build 緑・console 0・375px（レジ脇のハンディ/タブレット想定）・金種実査→実査現金が即再計算・過不足が符号+矢印+語+色+読み上げ・±¥1,000 超で理由 Reveal＋締めブロック・締め完了で read-only・h1 1個・支払区分別内訳が総売上に一致。

育てたコンポーネントは、また真逆の画面でも全採用

小売 #42 レジ会計（売る）  : カート / 釣銭 / ¥%割引
小売 #43 実地棚卸（数える）: 理論在庫 / 実地カウント / 差異
小売 #44 レジ締め（締める）: 金種実査 / 理論残高 / 過不足

内容は三者三様でも、横断的なコンポーネントはそのまま効きました——予備知識ゼロの AI の所見:

• ⁠EditableDataTable(#199) — 使った、よく合う。⁠ 金種×枚数→金額の実査グリッド。renderFooterCell で「実査現金合計」行がタダで付き、rowLabel＋自動の ctx.ariaLabel で全枚数セルがラベル付きコントロールに、table→card 自動化で ⁠375px 横スクロール0⁠。「この画面で一番効いた単一のコンポーネント」。
• ⁠RevealSection(#213) — 使った、ぴったり。⁠ 過不足が ±¥1,000 を超えたときだけ「過不足の理由」Select が role=region で出現＋読み上げ、理由を選ぶまで締めをブロック。
• ⁠NumberInput — 使った。⁠ 枚数・繰越。min/max・下書き文字列（クリアして打ち直せる）・read-only の状態で disabled。
• ⁠CurrencyInput / formatCurrency {signed}(#180) — 使った、12回連続。⁠ 過不足・入出金に符号つきの ±¥（+¥930 / -¥1,280）。「JPY/ja-JP 既定で設定ゼロ・本当に良い」。

そして今回の本題 — 「過不足」を3回見たので、コンポーネントを作った

予備知識ゼロの AI が⁠最大の欠落⁠に挙げたのは、過不足（over/short）の表示でした:

上位のコンポーネントが足りない: ⁠符号つきの差分／過不足の表示⁠だ。どの照合画面（現金の過不足・在庫の差異・予算の差異）も、「符号つきの金額＋状態を表す語＋符号で決まるアイコン＋意味を持つ色調、それを読み上げる」が要る。Statistic は符号つきの ¥ を自分で整形しないし、状態を表す語も持てない。だから VarianceDisplay を手作りした。<Variance value={-930} … /> があれば、いちばん効く追加になる。

これで ⁠3回目⁠でした——損益（#33）・棚卸差異（#43）・レジ過不足（#44）。毎回、予備知識ゼロの AI が「符号つきの数値＋向きの矢印＋符号で決まる色調＋読み上げラベル」を手で書き直していました。Statistic はカード型でセルに入らないから。

⁠「3回見たら作る」ルール⁠に従って、Delta（#221・PR #223）を出荷しました:

// 損益 — 既定トーン（正=success / 負=destructive）
<Delta value={12500} format={yen} labels={{ positive: "増加", negative: "減少" }} />

// 現金過不足 — 正が「良い」とは限らないのでトーンを差し替える
<Delta value={-930} format={yen}
  tones={{ positive: "warning", negative: "destructive", zero: "success" }}
  labels={{ positive: "過剰", negative: "不足", zero: "一致" }} showLabel />

• value の符号が、矢印（↑/↓/–）・色調・ラベルを決める、<span> のインライン最小コンポーネント。Statistic と違ってセルに収まる。
• format の既定は符号つき・桁区切りの ja-JP。formatCurrency を渡せば ¥。
• tones を符号ごとに上書きできる——損益は「正=緑」が既定、現金過不足は「過剰」を警告色に差し替える。⁠「正＝良い」が普遍でない⁠のが照合の肝。
• labels は常に読み上げる（sr-only か showLabel で表示）。⁠意味が、色や矢印だけに乗らない。⁠
• 純粋な表示なので、サーバー側でも安全（client 境界なし）。

課題に記録だけした欠落（3回ルール未達）

• 🟠 ⁠支払区分別の内訳 / 集計テーブルのコンポーネント⁠——現金/クレジット/電子マネー/QR/商品券の「ラベル→金額→構成比＋合計行」を素の <table> で手組み。#178（DescriptionList/サマリリスト）の領域。レビュー系で何度も再確認、閾値に接近（#32 振込確認・#37 請求書・#44 ここ）。
• 🟠 ⁠現金照合 / 台帳サマリのコンポーネント⁠——開始釣銭＋現金売上±入出金＝理論 vs 実査の「符号つきラベル→値の積み重ね＋強調した合計」も手組み（ReconRow）。同じく #178 寄り。
• 🟠 ⁠金種カウントの補助⁠——EditableDataTable が良い土台だが、金種の行・金額=金種×枚数・実査合計のフッタは毎回作り直し。POS 特有。1回目。
• 🟡 ⁠EditableDataTable が、デスクトップの表とモバイルのカードを両方 DOM に出す⁠（md: で隠す）ので、9金種だと枚数 input が18個存在する。スクリプト/テスト/フォーム送信で要注意。
• 🟡 ctx.ariaLabel が rowLabel + header を既に合成していることが JSDoc に無く、予備知識ゼロの AI が二重に前置きした（修正済）。

学び — "違う内容を3〜5枚" は、コンポーネントを作るための回し方だった

横断的なコンポーネント（金額・グリッド・reveal）は、内容が真逆でも効く。そのうえで⁠同じ"足りないコンポーネント"が3画面で再発したら、それは個別画面のつなぎではなく、コンポーネント不在のサイン⁠。今回その閾値に届いたのが「符号つき差分の表示」でした。1業界を3〜5枚・内容を散らして回すのは、業界判断を立体化すると同時に、⁠"3回ルール" を発火させてデザインシステムを1つ太らせる⁠ための設計でもあります。次は #178（サマリリスト）が同じ閾値に近づいています。

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

• ⁠小売をもう1枚⁠（返品/レジ開け or スキャン入力 #220 を3回目へ）か、別業界へ。Delta(#221) が、次のまっさらな予備知識ゼロの AI に発見・使用されるかも観測します。

試す

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

まだ alpha。同じ業界の3枚目で、ついに「3回見た足りないコンポーネント」を、コンポーネントとして作った回。