AI にバスのダイヤ編成コンソールを作らせてみた — 連載最大の「作った検証」、手組みされた運行図表がコンポーネントになって帰ってきた(やってみた #153)
/bus-planning375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にバスのダイヤ編成コンソールを作らせてみた — 連載最大の「作った検証」、手組みされた運行図表がコンポーネントになって帰ってきた(やってみた #153)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。バスの事業者向けを厚く(運行管理#136・配車乗務員#137 に追加)——運行計画・ダイヤ編成(系統・停留所・便数・運行図表・車両運用・ダイヤ改正)。運行計画担当のデスク向け、情報密度の高い社内コンソール。
結果 — 4.5/5、そして連載最大の「作ったものの検証」
tsc 緑・デスクトップ情報密度。予備知識ゼロの AI(群青を一度も触っていない設定):
これまで予備知識ゼロで採用したライブラリで最も領域への適合が高い。 バス計画コンソールは汎用のコンポーネントライブラリにとって 難しいはずのケースなのに、手組みを覚悟した2つ——運行図表と車両運用 Gantt——が両方とも用途向けに作られた専用コンポーネントを持っていた。
観測の核 — 手組みされた運行図表が、コンポーネントになって帰ってきた
これは連載で最も嬉しい瞬間だった。時系列で振り返ると:
- #136(バス運行管理): 予備知識ゼロの AI が運行図表(ダイヤグラム/時間×距離の斜め線)を SVG 210行で手組みした——
Stringlineが存在しなかったから。 - その後: わたしが
Stringlineを 3回確認で作った(#352→PR#388)。 - #153(バス運行計画・今回): 予備知識ゼロの AI が、同じ運行図表のタスクで、今度は
Stringlineを自力発見し、SVG をゼロ行も書かずに使った。
予備知識ゼロの AI「
Stringline— これのために作られた。摩擦ゼロ。運行図表/ダイヤグラム/Marey と docstring が名指し・各運行が斜めの polyline・続行/だんごは線の収束で読める と Gantt との違いまで書いてある。SVG は1行も書いていない。この領域でライブラリ最重要のコンポーネント。」索引も「時間×距離の運行図表=停車駅を横切る斜めの運行線」で正しくStringlineに誘導。
これが「作ったものの検証」の最強の形だ。 「コンポーネントを作れば次の画面で自力発見される」という連載の法則を、同じタスクで証明できた:以前は 210行の手組みを強いた画面が、作った後は予備知識ゼロの AI がコンポーネントに手を伸ばし、SVG ゼロで組む。作ったものが欠落を本当に埋めたことを、後発の予備知識ゼロの AI が証明した。
もう一つの核 — Gantt の日中モードを今つくった(#386 を閉じた)
車両運用(行路)の Gantt で、予備知識ゼロの AI が3度目の同じ不満を漏らした:
予備知識ゼロの AI「Gantt の時間軸が日単位=1営業日の車両運用が ~44px の1列に潰れる。
dayWidth={1100}を力技で入れた。hourWidth/時刻目盛が無い。唯一『未完成』に感じた所。最も追加価値が高いのは Gantt の1日内の時間解像度。」
#133(鉄道ダイヤ作成)・#135(航空機材繰り)でも同じ dayWidth の力技が出ていた=3回確認が成立。今回その場で作った:
-
Ganttにresolution="hour"(+hourWidth/hourStep)を追加=時刻目盛(HH:MM)。バーは元々レンジに対する%で配置されるので、変わるのは軸だけ・resolution="day"(既定)は1バイトも変えていない。 - 機材繰りデモの
dayWidth={820}の力技をresolution="hour"に置換=臭いの根治。 - design:verify 緑(構造の食い違い無し=任意 prop の追加)・ビルド緑・ブラウザ検証で hour 目盛(06:00〜15:00)と day 目盛(6/22〜6/28 回帰)の両方を確認=PR#410(#386 クローズ)。
学び — このテストには2つの「閉じ方」がある
この回で、やってみたループの構造が見えた。欠落には2種類の閉じ方がある:
- その場で作る(欠落が3回確認に達したとき)=Gantt の日中モードを #153 で閉じた。
- 過去に作ったものが検証される(後発の予備知識ゼロの AI が自力発見)=Stringline が #136→#153 で検証された。
①は「欠落を塞ぐ」、②は「塞いだ欠落が本当に塞がったか確かめる」。 連載が進むほど②が増える=土台が成熟する。#153 は①と②が同じ画面で起きた稀な回=Stringline(②検証)と Gantt の日中モード(①作成)が両方バス計画コンソールで。土台が厚くなると、新画面は「既存コンポーネントの自力発見(②)」が大半になり、たまに残った欠落を作る(①)——それが連載の定常状態に近づいている。
拾った点
- 🟡 ComparisonTable(現行 vs 改正案=2列 + Delta)=AmountBreakdown は金額の導出台帳で横並びでない・Delta が難所を担うので薄いラッパーで足りる=#411。
- 🟡
BadgeVariantKey等が index から未 export=Record<Status, BadgeVariantKey>を書くと tsc が落ちる・variant prop はその型なのに=#411(開発体験の修正)。
今回 src で作ったもの = Gantt の日中モード(#386→PR#410)。4.5/5・Stringline 検証・ComparisonTable 等を課題に記録。
📊 コンポーネント化スコアボード(作成済 15個 + Gantt の日中モード拡張)
…Stringline / StatusBoard / ExpiryBadge / BottomActionBar + Gantt(日中モード対応) 進行中:SegmentedControl(3回超)・ReferralCard・RatingInput・ComparisonTable
📋 モード進捗 — バスの事業者向け 厚く開始
- ✈️ 航空 ✅/🚆 鉄道 ✅/🚕 タクシー ✅/🚌 バス:事業者向け3(運行#136/配車#137/計画#153)+利用者向け3 ← 事業者向けを鉄道航空タクシー(5-6)に近づけ中
- 🚚 トラック:未着手
次回予告(やってみた #154)
- バスの事業者向けをさらに(車両管理/営収/苦情安全 等)で対称へ、or トラック新モード。※次回までに決める。
試す
- gunjo.jp / 運行図表 Stringline / ガント Gantt(日中モード対応)/ 差分 Delta / npm
@gunjo/ui/ GitHub / 前回まで #1〜#152 - GunjoUI by UIXHERO
手組みされた運行図表が、コンポーネントになって帰ってきた——「作ったものの検証」の最強の形は、同じタスクで後発の予備知識ゼロの AI がコンポーネントに手を伸ばし、SVG をゼロ行で組むこと。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。