#35スコア 4.5/5金融

AI に住宅ローンの仮審査画面を作らせてみた — 1回前に直したバグを、次の AI が「直ってる」と確認した（やってみた #35）

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

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

解説記事

AI に住宅ローンの仮審査画面を作らせてみた — 1回前に直したバグを、次の AI が「直ってる」と確認した（やってみた #35）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。銀行4枚目——住宅ローン仮審査申込（ローンシミュレーター・返済予定表・申込フォーム・書類アップロード・審査結果）。

「各業界で複数枚」で銀行を深掘り。#32=フォーム、#33=チャート、#34=テーブル、今回 #35 は 計算機（スライダー→月々返済リアルタイム計算）＋書類アップロード＋審査結果の層。

結果 — 4.5/5

tsc/build 緑・console 0・375px でテーブル→カード化・返済予定表の残高が満期で 0 に到達・h1 1個。

この回の主役 — 1回前に直したバグが、次の AI に「直ってる」と検証された

#34→#32 で、私は Form の隠れ a11y バグ（FormControl が FormDescription 無しのフィールドにも aria-describedby を注入＝存在しない id を指す）を直した（#175）。その修正を、#35 の cold AI が独立に検証した:

FormControl は FormDescription が実在するときだけ descriptionId を wire する。 ブラウザで確認——invalid フィールドの aria-describedby は存在する message id を指す、dangling 参照なし。ライブラリで最も強い部分。

「#32 でバグを見つける → 同回で直す(#175) → #35 の別 AI が "直ってる" と確認する」——複利ループが「前に直したバグの不在まで次の回が検証する」段階に来た。さらに formatCurrency(#180) が3回連続で「felt great」、FileUploader（複数ファイル＋個別状態）・Statistic（tabular-nums・#188）・Form・Table の th scope・CardTitle/AlertTitle の as も再称賛。

新しい穴 — 計算機の核「スライダー」

  • 🟠 Slider に値ラベル・単位・¥バインド・aria-valuetext が無い（最大の穴）。素の range input で、計算機（借入額/期間スライダー→月々返済）を作るたびに値表示・¥整形・読み上げテキストを手巻き。トラックに塗りも無い（#193）。
  • 🟠 Table もモバイルで横スクロール（5列の返済予定表）→ カード化を手巻き（#190 再確認・DataTable に続き Table も）。
  • 🟠 ローン計算（元利均等・元金/利息分解・残高→0）はアプリ実装（ドメイン数学＝DS の責務外・想定内）。
  • 🟡 ダークは .dark クラス方式で、cold AI は ThemeProvider(#171) を見つけて使った（opt-in なのが唯一の摩擦）。

今ラウンドの修正

Slider に値表示と読み上げと塗りを追加（PR#194）:

  • formatValue で aria-valuetext を設定（「¥35,000,000」と読み上げ・「35000000」ではなく）＋値ラベル整形。
  • showValue/label で track 上に値/ラベル行。
  • 塗りトラック（thumb まで primary・inline gradient で class 不変＝drift 0・controlled/uncontrolled 両対応）。
  • 新 props 無しでも従来通り動く・ブラウザ実証で gradient 塗り＋デフォルト aria 非破壊。

table→card(#190) は Table にも拡大して再確認。

学び — 複利は「バグの不在」まで検証する段階に

#32: Form の隠れバグを発見・即修正(#175)
#35: 次の AI が "dangling 参照なし" を独立検証

埋めた穴が次の回で「強み」になるのは見てきたが、今回は 直したバグの "不在" まで次の AI が確かめた。銀行はフォーム・チャート・テーブル・計算機の4層を踏破——層を変えるたび、別の穴と別の検証が出る。

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

  • 銀行はこれで4層。カード明細でもう1枚 or 隣接の数字業界（会計/給与/POS）へ。

試す

まだ alpha。直したバグの不在を、次の AI が確かめた回。

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

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

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

AlertAlertDescriptionAlertTitleBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleCheckboxContainerFileUploaderFileUploaderProgressResolverFormFormControlFormDescriptionFormFieldFormLabelFormMessageInputProgressSelectSeparatorSliderSpinnerStatisticStatusScreenStepperTableTableBodyTableCaptionTableCellTableHeadTableHeaderTableRowThemeProviderToggleGroupToggleGroupItem

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

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