AI にバスの運行管理を作らせてみた — 30回ずっと足りなかったコンポーネントが、ついに完成した（やってみた #136）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に実際の画面で組ませていく連載。今回は⁠新しいモード・バス⁠（鉄道・航空に続く3モード目）——⁠運行管理の画面⁠（運行図表・走行中の車両・要対応・指令記録）。

結果 — 4/5。そして連載で最も古い「足りないコンポーネント」を作るきっかけに

型チェックも通り、デスクトップ向けの密度で完成。群青を一度も触っていない AI の感想：

⁠事務方の画面の半分は、モードが変わってもそのまま移せた。⁠ ActionDataTable（走行中の車両）・ActionQueue（渋滞・遅延の対応リスト）・StatGroup・SignedRecord＋CoSign（指令記録）が、⁠バス固有の"足りないコンポーネント"ゼロで、手作りなしにそのまま使えた⁠——鉄道/航空のお下がりではなく、本物の運行管理コンポーネント。RouteStops（停車の進み具合）まで、バス便にぴったり嵌まった。 ⁠でも運行図表（時間×距離の斜め線グラフ）だけは、対応するコンポーネントが無かった。約210行の SVG を手作りするしかなかった。⁠

今回の見どころ — 運行図表が3回目（#106 → #133 → #136）＝「3回確認」が成立

⁠#106（鉄道の運転指令）で運行図表を手作りして Stringline を課題として記録し、#133（鉄道のダイヤ作成）で2回目⁠。そして #136（バスの運行管理）で——AI がまた運行図表を SVG で手作りしました。⁠3回目（3/3）⁠。しかも別のモード（バス）で。

AI「ガントチャートは横棒＝バス1台が1行で、距離の軸が無い。運行図表はタテが距離（停留所）、各便が全停留所を横切る斜めの線で、傾きが速さ、2本の線が近づくと『前のバスに追いつく』を表す。横棒のチャートでは、2台のバスが距離の上で接近する様子を構造的に描けない。隣の鉄道用フォルダにも同じ Stringline があった＝鉄道でも同じ壁にぶつかり、同じものを手作りしていた。これは、ライブラリに加えられるのを待っているコンポーネントだ。」

⁠鉄道の運転指令 #106 ＋ 鉄道のダイヤ作成 #133 ＋ バスの運行管理 #136 ＝ 別々の3つの予備知識ゼロの AI が、それぞれ独立に手作り → 「3回確認」成立。その場で作りました。⁠

作った — Stringline（運行図表）＝12個目。最も古い記録 #352 をついに形に

⁠#352 は #106 で記録した、連載で最も古い未対応の課題。30回越しで、ついに完成しました。⁠

const stops = [{ id:"sjk", label:"新宿", distance:0 }, { id:"ttc", label:"立川", distance:27.2 }]
const runs = [{ id:"712T", direction:"down", tone:"primary",
  points: [...計画], actual: [...実績(遅延)], onSelect: () => openRun("712T") }]
<Stringline stops={stops} runs={runs} startTime={420} endTime={500} now={450} tickInterval={20} />

• ⁠タテが距離（停車駅）・ヨコが時間・各便は斜めの線⁠（傾きが速さ・線が近づくと追いつき/追い越し/渋滞）。折れ線グラフと同じ描き方です。
• ⁠上り下りの両方向⁠（下り＝primary／上り＝info の既定色）・⁠現在時刻の線⁠・⁠計画（破線）と実績（実線）のペア⁠・⁠便をタップで選択⁠（44px 以上のタップ領域）・停車駅と時刻のグリッド・スクリーンリーダー対応。
• ⁠サーバー描画でも安全⁠：現在時刻も時刻も値で渡す設計（時計を読まない）なので、表示がズレません。
• ⁠docs のコンポーネント検索の注記を更新⁠：#106 で「ガントは運行図表に非対応」と書いた一文を、「時間×距離の運行図表は Stringline、決まった路線の無い航空は Gantt/ScheduleGrid」に直しました。
• PR#388・ブラウザで検証（7本の斜め線・現在時刻の線・遅延の切替で計画/実績の2本＝破線と実線・7本すべて選択可能・時刻の目盛り・エラー0）。

⁠今回コードで作ったのは Stringline⁠（「3回確認」成立・⁠12個目⁠・#352 クローズ）。

学び — 足りないコンポーネントは急がず、3回たまった時に、最良の形で完成させる

Stringline は #106 で記録してから、30回ずっと未対応でした。その間に：

• docs のコンポーネント検索に正直に「未対応」と書き（#133 で、それが予備知識ゼロの AI を「ガントを使えばいい」という誤解から救った）、
• 鉄道 #133 で2回目を見て仕様を詰め、
• 航空 #135 で「⁠出ない場所⁠」を確認し（決まった路線の無い航空には不要＝鉄道/バス特有と確定）、
• バス #136 で3回目＝⁠別モードでの独立した再現⁠を得て、作りました。

⁠急いで #106 で作っていたら、現在時刻の線も、計画と実績の対比も、上り下りの両方向も無い、貧弱なものになっていたはず。⁠ 3回（しかも2モード）ためたからこそ、運転指令の「走行監視」・ダイヤ作成の「計画図」・バスの「計画と実績＋追いつき」を全部満たす形で、一発で完成できました。⁠足りないコンポーネントを寝かせるのは、怠慢ではなく設計。⁠「3回確認」ルールの真価が、最も古い課題で証明されました。

これまでに群青へ加わったコンポーネント（12個）

AmountBreakdown / ActionQueue / ListCard / Gantt / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / ⁠Stringline⁠

モード進捗

• ✈️ 航空：事業者向け 5 ＋ 利用者向け 6 ✅／🚆 鉄道：事業者向け 5 ＋ 利用者向け 6 ✅
• 🚌 ⁠バス：事業者向け 1枚目（運行管理）開始⁠ ／ 残り 事業者向け（配車/乗務）＋ 利用者向け（路線/接近案内/運賃）

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

• ⁠バスの利用者向け⁠（バス停・接近案内・運賃・乗車）＝スマホ向けの共通コンポーネント（PageHeader / ListCard / FilterChips / TicketStub …）がバスにどう効くか。または事業者向けの続き。

試す

• ⁠gunjo.jp⁠ ／ ⁠運行図表 Stringline⁠ ／ ⁠ガント Gantt⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• ⁠GunjoUI by UIXHERO⁠

30回越しで最も古い「足りないコンポーネント」が、別モードでの3回目でついに完成——寝かせるのは怠慢ではなく設計。3回たまった時に、最良の形で一発で作れる、という回でした。