#140スコア 4/5運輸：バス

AI にバスの経路検索を作らせてみた — #126 で build した Itinerary が、別モードで自力発見された（やってみた #140）

ルート: /bus-route-search
デスクトップ表示
モバイル表示

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

解説記事

AI にバスの経路検索を作らせてみた — #126 で build した Itinerary が、別モードで自力発見された（やってみた #140）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。バス toC（接近案内・高速バス予約に続く3枚目）——経路検索・運賃案内（渋谷駅→等々力・経路候補・乗換・所要/運賃・経路詳細）。

結果 — 4/5、Itinerary が別モードで自力発見

tsc 緑・375px mobile-first。cold AI（群青を一度も触っていない設定）：

日本の交通 B2C のために設計されているとしか思えない部品が複数。 PageHeader/FilterChips(速い順/安い順/乗換少)/ListCard(経路候補)/AmountBreakdown(運賃)/Itinerary(経路詳細) が画面の~85%を CSS 無しで・タッチ標的と a11y も標準装備。索引も2つの難所(候補カード・leg-by-leg)を正しく誘導。

観測の核 — Itinerary が「航空旅程→バス経路」へ越境発掘

#126 で build した Itinerary（航空の旅程＝便/ホテル/アクティビティ） が、#140 でバスの経路詳細（徒歩→乗車→乗換→…）で——

cold AI「経路の leg-by-leg に Itinerary を使った。嵌まった、kit の中で何より良く。しかも Itinerary の docstring が自分から RouteStops(配送ロック)を避けろと警告してくれる。」

#126 で航空の旅程として結晶化した Itinerary が、30回近く後にバスの経路で別 cold AI に自力発見された＝build→別モード越境発掘。しかも #126 で「RouteStops は配送語彙で旅程に不適」と docstring と索引に書いた誘導が、ここでも機能した。1つのモードで結晶化した部品は、別モードの似た形に勝手に効きに行く。

だが「adequate, not native」— 越境の効きには深さがある

cold AI「Itinerary は bus+walk+transfer を adequately 表現したが native ではない。 bus leg の本当の構造は 乗車停→系統+行先→乗車時間+通過停数→降車停＋乗換待ち＋徒歩 なのに、Itinerary は icon/time/title/description/content/trailing 各1つだけ。leg の内部レイアウトを手組みした。最大の穴＝connector が一様で、破線(徒歩)vs実線(乗車)が描けない。Yahoo/Google の乗換案内は必ずこれで徒歩と乗車を区別する。」

→ #358 を再open（#126 で Itinerary build 時にクローズしたが、transit-native の部分は未達だった）。scope を絞り：Itinerary は generic な土台として正しく自力発見される＝80%を担う。残る transit-native の20%＝legs[] モード（walk/ride/transfer kind・乗降停・通過停数・破線徒歩 vs 実線乗車 connector・leg ごとの系統+運賃）。#110 乗換案内 + #140 バス経路 = 2/3。

学び — 「クローズは早すぎることがある／越境は二値でなく深さ」

#126 で Itinerary を build したとき、私は #358（TransitItinerary）を「これで解決」とクローズした。だが #140 の cold AI が示したのは——Itinerary は自力発見されるほど『土台として正しい』が、transit-native の深さ（破線徒歩 connector・乗降停）には届かない。つまり：

  • 越境発掘は『部品が正しい方向にある』ことを証明する（Itinerary は嵌まった・自力発見された）。
  • だが越境の『深さ』は別物＝generic な土台が効くことと、特定ドメインに native であることは違う（#139 SeatMap のグリッド◎/属性△ と同じ構図）。

「自力発見された＝完成」ではない。 自力発見は方向の正しさの証明で、深さは別途 leg[] のような専用モードで埋める。#358 を早クローズした自分を、#140 の cold AI が正直に訂正した——やってみたループは、自分の過去判断のデバッガでもある。

拾った点

  • 🟡 LineChip / RouteBadge：系統番号(渋66/東98)チップを #138 に続きまた手組み＝「transit/transit-ops で最も再利用される欠片」＝#392（#138+#140=2/3・路線色つき identity チップ・Badge[状態]と別）。
  • 🟡 from/to 検索バー：出発地/目的地+swap の乗換案内入力 composition が無い＝#392 に併記。
  • 🟡 PageHeader の align=center + actions + onBack 無しで微妙に左寄り（軽微）。

今回 src build なし（4/5・Itinerary 越境発掘＋#358 再open・LineChip 2/3）。

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

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline 進行中：BottomActionBar 3/3接近・StatusLevel 2/3・ExpiryBadge 2/3・StatusBoard 2/3・TransitItinerary(legs)2/3・LineChip 2/3

📋 モード進捗

  • ✈️ 航空：toB 5 + toC 6 ✅／🚆 鉄道：toB 5 + toC 6 ✅
  • 🚌 バス：toB 2 + toC 3（接近/高速予約/経路検索） ／ 次モード

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

  • 新モード タクシー（配車 toB＝車両×注文マッチング/呼出 toC＝配車アプリ）＝4モード目で床がどう効くか＋配車盤で StatusBoard 3回目。

試す

#126 の Itinerary が別モードで自力発見された——だが「自力発見＝完成」ではない。越境は方向の正しさを証明し、深さは専用モードで埋める。やってみたループは、自分の早すぎたクローズを訂正した。

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

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

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

AmountBreakdownAmountLineBadgeButtonFilterChipsItineraryItineraryItemListCardPageHeaderSeparatorToggleGroupToggleGroupItem

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

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