AI に POS レジ会計を作らせてみた — 金額系のコンポーネントが、また別業界（小売）でゼロ摩擦だった（やってみた #42）
/pos375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に POS レジ会計を作らせてみた — 金額系のコンポーネントが、また別業界（小売）でゼロ摩擦だった（やってみた #42）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は業界を変えて小売——POS レジ会計（カート明細・軽減税率・預り金/おつり・支払方法・レシート）。
結果 — 4.5/5
tsc/build 緑・console 0・375px（タブレットレジ想定）でカードレイアウト・税率別内訳が正確・現金不足で会計ブロック・h1 1個。
この回の主役 — 金額系のコンポーネントが、また別業界で全部効いた
銀行→会計→給与で育てた金額/フォームのコンポーネントを、小売（POS）でも予備知識ゼロの AI が全部使いました:
-
CurrencyInput(#176) — 使った（預り金・値引き¥）。下書き方式で入力中も桁区切り、数値を返す、min/max で制限、aria を転送。クイック現金ボタンから、外から制御する値で綺麗に再描画。ゼロ摩擦。-
EditableDataTable(#199) — 使った、白眉の成果（カート明細）。数量ステッパー・税率バッジ・自動計算の金額・renderFooterCell・自動でモバイル card 化。この画面を安く仕上げたコンポーネント。-
RevealSection(#213) — 使った（現金ブロック・非現金ヒント・会員パネル）。role=region＋aria-liveで、条件付きセクションのアクセシビリティがぴったり。意図どおり。-
formatCurrency(#180) — 表示金額の100%に。10回連続。
前ラウンドで作った RevealSection が、翌回（別業界）で即採用——複利が業界をまた1つ越えました。fintech/会計/給与/小売、「金額を扱う画面」はどこでも、このコンポーネント群の組み合わせで作れる段階に。
新しい欠落は "POS 分野の複合コンポーネント"
満点を阻んだのは、レジ特有の複合パターン:
- 🟠 数値キーパッド/会計用の入力パッドが無い（最大）。預り金→クイック現金→おつり→不足ブロックを手組み（#216・POS 1回目）。
- 🟠 レシート/印刷レイアウトが無い（#217・POS 1回目）。
- 🟠 MoneyOrPercent（¥/%割引）が無い（請求書#37＋POS#42 で手組み・#218・2回目）。
今回もコード無し——3回ルール（同じ"足りないコンポーネント"が3回出て初めて作る）に従います。POS の複合コンポーネントは1〜2回目、まだ作る閾値に達していない。誠実に課題に記録だけ。
学び — 「3回ルール」が作りすぎを防ぐ
table→card(#190): #34→#35→#36 と3回で作った
CurrencyInput(#176): #32〜#40 と4回で作った
MoneyOrPercent(#218): 請求書#37＋POS#42 で2回目 → まだ作らない
予備知識ゼロの AI に作らせるテストを量で回す価値は「頻度がコンポーネントを浮かび上がらせる」こと。逆に、頻度が低いうちは作らない——1回の「あったらいいな」で作ると、作りすぎになります。POS の釣銭/レシートは「らしさ」が強いけれど、再出現を待つ。金額系が成熟した今、規律ある "作らない判断" も含めてライブラリを育てます。
次回予告（やってみた #43）
- 別業界もう1つ（医療/物流）か、POS をもう1枚（在庫/返品）で釣銭・レシートの再確認か。
試す
まだ alpha。金額系が、また別業界でゼロ摩擦だった回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。