AI にクレジットカード利用明細を作らせてみた — 3回連続で出た"足りないコンポーネント"を、ついに作った（やってみた #36）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。銀行5枚目——⁠クレジットカード利用明細⁠（限度額ゲージ・ポイント・カテゴリ別支出・利用明細・支払方法変更）。

「各業界で複数枚」で銀行を深掘り。#32=フォーム、#33=チャート、#34=テーブル、#35=計算機、今回 #36 は ⁠限度額ゲージ＋ポイント（ロイヤルティ）＋カテゴリ別支出⁠の層です。

結果 — 4.5/5

tsc/build 緑・console 0・375px で明細が25枚のカードにまとまる・ゲージの used+remaining=limit が一致・h1 1個。

この回の主役 — 3回連続で出た"足りないコンポーネント"を、ついに作った

DataTable がモバイルで横スクロールする（min-w-[720px]）問題は、⁠#34 取引明細・#35 返済予定表・#36 利用明細と、3回連続で予備知識ゼロの AI が手組み⁠してきました。今回でついに作りました:

🟠 ⁠DataTable は 375px でも、720px のテーブルを横スクロールさせる⁠だけ。モバイルではカード表示にしたい。毎回 sm:hidden のカードリストを手組みしている。

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

⁠renderCard を追加⁠（明示的に有効化・既存を壊さず）: 渡すと md 以上はテーブル、モバイルは⁠同じ 並べ替え/ページ送り 済みの行データ⁠をカードで描画——別々の状態を持たない。⁠ブラウザ実証⁠: 1280px でテーブル表示、375px でテーブル非表示＋10枚のカード（ページ送り済み）＋⁠横スクロール無し⁠。

「同じ"足りないコンポーネント"を3回見たら作る」——予備知識ゼロの AI に作らせるテストを、複数業界×複数枚で回すと、⁠本当に欲しいコンポーネントが "頻度" で浮かび上がります⁠。

それでも土台は強い — 複利は4回連続

予備知識ゼロの AI が褒めたのは、また 最初から作り込まれた強み:

• ⁠formatCurrency(#180) が4回連続で「素晴らしい / 白眉」⁠。¥371,650 を設定ゼロ・compact で ¥372K。
• ⁠SegmentedGaugeCard が「ほぼ完璧な限度額ゲージ」⁠: used/remaining/limit が一致・利用率に応じて primary→warning→destructive と色調が段階的に切り替わる。
• ⁠GaugeChart⁠ は role="img" で「今月のご利用: ¥200,000」と読み上げ（弧の見た目だけではない）。
• ⁠DonutChart⁠ の凡例が %＋¥、⁠Badge⁠ が支払区分（一括/分割/リボ）、⁠Dialog⁠（手数料を aria-live で再計算）、⁠ThemeProvider⁠(#171) も最初から動いた。

その他の欠落

• 🟠 ポイント/ロイヤルティのパネルのコンポーネント無し（Card＋Statistic＋Alert で組み立て・許容範囲）。
• 🟡 ゲージ/ドーナツに固定の max-w-*（縮小はするが、広い列で拡大できない）。
• 🟡 defaultChartValueFormatter が en-US（#197・#180 の続き・formatValue を渡せば回避できる）。

学び — 頻度がコンポーネントを浮かび上がらせる

#34 取引明細: テーブル→カード を手組み
#35 返済予定表: テーブル→カード を手組み（再）
#36 利用明細: テーブル→カード を手組み（3回目）→ 作った(#195)

1回の「あったらいいな」では作りません。⁠3業界×複数画面で同じ手組みが3回出たら、それは確実に欲しいコンポーネント⁠。予備知識ゼロの AI に作らせるテストを量で回す価値は、ここに出ます。

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

• ⁠銀行はこれで5層⁠。隣接の数字業界（会計/給与/POS）へ——銀行で育てた formatCurrency・renderCard・gauge が効くか。

試す

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

まだ alpha。3回連続で出た"足りないコンポーネント"を、ついに作った回。