#34スコア 4.5/5金融

AI に銀行の取引明細を作らせてみた — 前の回で出した ¥フォーマッタを、次の AI が見つけて絶賛した（やってみた #34）

ルート: /transactions
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に銀行の取引明細を作らせてみた — 前の回で出した ¥フォーマッタを、次の AI が見つけて絶賛した（やってみた #34）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。銀行3枚目——取引明細 / 取引履歴（期間・カテゴリ・金額の絞り込み／残高推移カラム／CSV エクスポート／モバイルでカード化）。

「各業界で複数枚」の方針で銀行を深掘り。#32=フォーム層、#33=チャート層、今回 #34 は 密なデータテーブル＋絞り込み＋エクスポート層。

結果 — 4.5/5（銀行で最高スコア）

tsc/build 緑・console 0・375px でテーブル→カード化・h1 1個・aria-sort 正しい。

この回の主役 — 前回出した ¥フォーマッタを、次の AI が見つけて使った

#33 で、チャート周りの数値整形が手巻きになる穴を見つけ、私は formatCurrency/formatNumber/formatPercent（#180）を出荷した。その次の回（#34）の cold AI が、それを barrel から発見して全面採用した:

formatCurrency/formatNumber/formatPercent が barrel に EXIST。 formatCurrency は JPY/ja-JP がデフォルト（¥1,234,567 をゼロ設定で）・signed・compact(1.2万) 対応。銀行画面で single biggest win——¥フォーマッタを手巻きしなくていい。doc コメントには #32/#33 が手巻きしてたと書いてある。全部に使った、felt great。

「#33 で穴を見つけて埋めた → #34 の別の AI が見つけて使い、最大の勝因と呼んだ」——出した翌回に次の AI が拾う、複利ループの理想形。さらに #31 の ToggleGroup disallowEmpty(#170) は入金/出金/すべての segmented control に使われ3回連続で検証、DataTable の a11y（th scope/aria-sort・#123）・Badge トーン(#106)・EmptyState headingLevel(#104) も再称賛。

新しい穴は データテーブルの "実運用" 層

  • 🟠 DataTable に responsive table→card モードが無い（min-w-[720px] 固定でモバイル横スクロール）。明細はモバイル閲覧が最多なのに、cold AI はカード版を手巻き（#190・最大の穴）。
  • 🟠 DataTable の絞り込みが単一カラムのみ・sort/filter state 非公開で、絞り込み後の合計を出せない（#126 再確認。faceted は別部品 FilterButton が good と称賛）。
  • 🟠 CSV エクスポートが無い（#189）。
  • 🔴 Statistic の値が桁の途中で改行（−¥1,055,9/60・2列モバイルで）（#188）。

今ラウンドの修正

src で安全な2つを land（PR#191）:

  • toCsv/downloadCsv（#189・BOM＋RFC-4180 クォート・.pen 無し Utility export）＝ data/明細/管理が毎回手巻きしてたやつ。
  • Statistic の桁途中改行を修正（#188・overflow-wrap:anywhere→break-words tabular-nums・ブラウザ実証で −¥1,055,960 が2列375pxでも1行）。

table→card(#190・最大)・faceted/state 公開(#126) は起票/再確認。正直な訂正: cold AI が「ページネーションのラベルが英語ハードコード」と書いたが、goToPage/pageSummary は DataTableLabels にちゃんとある＝誤認（rich labels API を見つけ損ねた）。盛らない。

学び

#33: ¥フォーマッタの穴を見つけて埋める(#180)
#34: 次の AI がそれを見つけて全面採用・最大の勝因と呼ぶ

埋めた穴が、次の回の "強み" になる。 しかも今回はそれが「出した翌回」に起きた——複利の回転が速い。同じ銀行でも、フォーム→チャート→明細と層を変えるたび、別の穴と別の検証が出てくる。

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

  • 銀行をもう1枚（ローン審査 / カード明細）か、隣接の数字業界（会計 / 給与）へ。

試す

まだ alpha。出した穴埋めが、翌回に強みとして返ってきた回。

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

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

BadgeButtonCardCardContentCardHeaderCardTitleColumnDefDataTableDateRangePickerEmptyStateFilterButtonLabelRangeSliderSearchInputSkeletonStatisticToggleGroupToggleGroupItem

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。