AI にダッシュボードを作らせてみた — チャートは"任意データで壊れない"のか（やってみた #4）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1 設定画面 / #2 モーダル告知 / #3 カルーセル に続いて、今回は差別化の本丸＝ダッシュボード（チャート）。

gunjo のチャートは SVG じゃなく HTML/CSS のレイアウトプリミティブで作ってある。狙いは「任意のデータで崩れないこと」。固定された綺麗なサンプルじゃなく、現実の汚いデータ——桁違いのスケール、外れ値、ゼロ、極小値——を入れても破綻しない、を担保したい。

今回はそれを cold な AI にストレステストさせた。条件は毎回同じ（公開 npm alpha.2 + gunjo.jp docs だけ・ソース非公開）。お題は KPI カード＋複数チャート＋データテーブルのアナリティクス・ダッシュボードを /dashboard に。

結果 — 動いた（4/5）、そして"壊れない"は本物だった

npm run build 成功、static prerender、コンソールエラー0。

AI は意図的に意地悪なデータを投げた。結果はスクショのとおり全部正しく描画:

• 異なるスケールの2系列（Revenue 数万 vs Refunds 数千）を1枚の Line に → Refunds はベースライン付近を這うが破綻なし
• 途中のゼロ（6月の Revenue = $0）→ ベースラインまで鋭く落ちて復帰
• 9倍の外れ値＋ゼロ棒（Bar: W4=3,850・W6=0）→ 外れ値が最大値を決め、ゼロ棒は空・平均線も正しく
• ゼロ value の Donut segment（Affiliate 0%）→ NaN も壊れた conic-gradient も出ず、0% 表示
• 極小スライス（Pie: Other 0.8%）→ 細いが消えずに描画

「レイアウトプリミティブだから任意データで崩れない」は、ストレス下で持ちこたえた。 #1〜#3 は穴を見つける回だったが、#4 は売りが実証された回。

効いたのも今回も typed barrel。LineChart/BarChart/DonutChart/PieChart/Statistic/Table を一発で発見、ChartDataPoint = { label?, value, color? } の統一データ形が全チャート共通で認知負荷が低い、formatValue に Intl.NumberFormat を渡すだけ、と。

粗さ — 「型で発見できる」の足元をすくう一点

ただし、build を止める実バグが出た。

import { type ChartDataPoint } from "@gunjo/ui" // ❌ has no exported member

全チャートが公開 prop として ChartDataPoint を要求するのに、その型が barrel から export されていない（内部の chart-utils.ts 止まり）。型付きの採用者は、チャートに渡すデータの形を名前で書けない。AI はローカルにミラー型を宣言して回避したけど、これは「型で API を発見できる」という gunjo の売りの足元をすくう。→ #53 起票。

ほかに正直な粗さ:

• docs のコード例が fetch に映らない（#2 の #50・未デプロイ）— AI は型から呼び出し形を再構築
• LineChart の x 軸ラベルが「最長の系列」から取られる挙動が docs に無い
• Table ラッパーに w-[400px] w-full の重複クラス（無害だが残骸）

学び

AI に使わせる → 粗さが出る → SSOT で一貫して直す → また使わせる

#4 で分かったのは2つ。①チャートの "任意データで壊れない" は本物（売りが実証された）。②でもその型が export 漏れで、型付き採用者が詰まる（#53）。良いところは盛らずに見せ、穴は隠さず issue にする——スコアボードに正直に足していく。

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

• ログイン／サインアップ（Form / Input / Button / Tabs）— 検索数の大きい認証フォーム。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1 設定画面 / #2 モーダル告知 / #3 カルーセル
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、粗削りな青。穴が出るたび直します。Issue 歓迎。

---

<!-- 公開前: #53 修正反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->