#169スコア 4/5運輸：鉄道

AI に鉄道の定時性ダッシュボードを作らせてみた — 在庫深掘りで Statistic goodWhen が結晶化（やってみた #169）

ルート: /line-performance
デスクトップ表示
モバイル表示

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

解説記事

AI に鉄道の定時性ダッシュボードを作らせてみた — 在庫深掘りで Statistic goodWhen が結晶化（やってみた #169）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。運輸5モード完走後、残った in-progress 在庫を深掘りして 3-confirm へ運ぶ回——鉄道 路線別 運行実績・定時性ダッシュボード（定時運行率・遅延率・輸送障害・混雑率）。

結果 — 4/5、狙い通り Statistic goodWhen が3回目で結晶化

tsc 緑・デスクトップ密。cold AI（群青を一度も触っていない設定）：

本物の強い analytics/ops キット。 ほぼ全ボックスに purpose-built 部品があり、難しい意味論ケース（反転 good-when-low 指標・値 vs 名前付き上限・ワースト路線ランキング）は API 設計者が先回りしていた——ただ1か所、KPI strip の主役 Statistic を除いて。

観測の核 — Statistic goodWhen が3回目で結晶化（在庫を狙い撃ち）

定時運行率（高いほど良い）・遅延件数/混雑率（低いほど良い）——上昇=悪い/良いが指標で逆になる：

cold AI「Statistic は trend(矢印)と tone(色)を別 prop に持ち、tone は trend から既定(up→緑)。goodWhen/direction prop も per-sign tones も無い。遅延件数/混雑率は『上昇=悪化』なのに既定は緑＝誤り。directionProps(delta, goodWhen) を手組みした。最大の穴——しかもキットは明らかにこのパターンを知っている：兄弟の Delta は tones={{positive:destructive,negative:success}} を持ち、Leaderboard.deltaTones も Meter.direction も反転を解く。Statistic/StatGroup だけ同じ扱いを受けなかった。修正は明白でスコープも明確：tones per-sign か goodWhen enum を Statistic に足せ。」

Statistic goodWhen は #154 営業係数・#163 原価率/実車率・#169 遅延件数/定時率 で3回目＝3-confirm。その場で build した：

  • Statistic に goodWhen?:"higher"|"lower" を追加＝矢印は trend のまま・色だけ反転。"lower" で 上昇=destructive(赤)・下降=success(緑)。明示 tone は優先・既定は無変更・StatGroup の items にも波及。
  • ブラウザで 直帰率(下降+goodWhen=lower)→緑(改善)・遅延件数(上昇+goodWhen=lower)→赤(悪化) を確認＝PR#427（#412 クローズ）。
  • これで定時率 goodWhen="higher"・遅延件数 goodWhen="lower" が指標ごとの tone 手管理ゼロで正しく色づく。

学び — 「在庫深掘り」は狙った 3-confirm を確実に踏ませる

運輸5モード完走後、残った in-progress 在庫（Statistic goodWhen 2/3・OriginDestination 1/3・document-download 1/3 …）を 3-confirm へ運ぶには、それらを自然に踏む画面を選ぶのが効く。鉄道の路線別ダッシュボードは：

  • 反転 KPI（定時率/遅延件数）＝goodWhen を3回目に踏む → build。
  • 起点→終点ヘッダ＝OriginDestination を2回目に踏む → 2/3。
  • 月次レポートDL＝document-download を2回目に踏む → 2/3。

1画面で在庫を3つ同時に進めた。 深掘りは「新しい穴を探す」より「溜まった候補を確実に 3-confirm へ運ぶ画面を設計する」段階に入った。床が成熟した連載の、もう一つの定常運転だ。

拾った点（陽性の検証ラッシュ）

  • ✅ NavRow（前回 #168 build）が月次レポート行で同セッション自力発見＝build→検証の距離が1回に。
  • ✅ Delta（反転 tones）/Leaderboard（deltaTones up=bad）/LimitMonitor（混雑率 vs 150% 値単位）/LineChart（referenceValue 目標線）/LineChip（自動コントラスト）全て native。
  • 🟡 OriginDestination 2/3（起点→終点 A→B ヘッダ＝#166 に続く・索引が Itinerary に誤誘導）＝#425・あと1回で build。
  • 🟡 document-download-row 2/3（月次レポート行＝#168 に続く）。

今回 src build = Statistic goodWhen（#412→PR#427）。4/5・goodWhen 結晶化・在庫を3つ前進。

📊 結晶化スコアボード（build 済 22個）

…SectionList / RouteStops(多日) / NavRow / Statistic(goodWhen)（このセッションで9部品 build/拡張） 進行中：OriginDestination(2/3)・document-download(2/3)・MatchCard(1/3)

📋 モード進捗

  • ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅／🚚 トラック ✅（運輸5モード完走）
  • 在庫深掘り中：goodWhen 結晶化・OriginDestination/document-download を 2/3 に

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

  • 在庫深掘り継続（OriginDestination/document-download を3回目→build）or 新業種へ。※KeEem に確認。

試す

在庫深掘りで Statistic goodWhen が結晶化した——深掘りは溜まった候補を確実に 3-confirm へ運ぶ画面を設計する段階。1画面で在庫を3つ進めた。

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

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

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

ActionItemActionQueueBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleColumnDefContainerDataTableDeltaLeaderboardLeaderboardItemLimitMonitorLineChartLineChipMeterNavRowPageHeaderSectionListSectionListSectionSegmentedControlSeparatorStatGroupStatisticProps

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

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