AI に国際輸送・通関追跡を作らせてみた — RouteStops が「複数日対応」でコンポーネント化（やってみた #166）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠トラックの利用者向けを厚く⁠（荷主#164・宅配#165 に続く）——⁠国際物流 国際輸送・通関追跡⁠（輸出通関→船積→海上輸送→着港→輸入通関→国内配送・B/L・ETD/ETA）。輸入者向け B2B ポータル。

結果 — 4/5、そして RouteStops の複数日対応が3回目でコンポーネント化

tsc 緑・デスクトップ密。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠物流/追跡に本物の強いライブラリ。⁠ ほぼ全ブロックに用途向けに作られたコンポーネントがあり、日本語既定が不気味なほど合う。1点減点は、この画面の最重要問題＝複数週の日付付きタイムライン。

観測の核 — 予備知識ゼロの AI が RouteStops を「捨てて」逃げた→それが3回目の確証

国際輸送は⁠週単位で日を跨ぐ⁠（5/12 輸出通関→5/16〜5/29 海上輸送→6/5 納品）。#164/#165 では予備知識ゼロの AI が日付を meta の差込口に押し込んだが、⁠#166 では RouteStops を諦めて ApprovalSteps に逃げた⁠：

予備知識ゼロの AI「⁠RouteStops は各段階に日付を持てない＝同日 HH:MM に強く制限(parseHM 正規表現が HH:MM 以外を捨てる)。5/12→6/5 のタイムラインには構造的に不適。代わりに ApprovalSteps を使った——その timestamp は自由形式の ReactNode で 2025/05/16 〜 05/29 を制約なく渡せた。理想は RouteStops の本文(場所/キャリア/状態/アクション)＋ApprovalSteps の自由形式の日付——どちらも単独では両方を持たない。欠けている prop は RouteStops の stop ごとの date/timestamp/dateLabel。⁠」

⁠これで RouteStops 複数日タイムスタンプは3回目＝3回確認⁠（#164 荷主ポータル・#165 宅配・#166 国際輸送）。その場で作った：

• ⁠RouteStops に dateLabel?: ReactNode を追加⁠＝stop ごとの自由形式タイムスタンプ（5/16〜5/29・ETA 5/30・6/2 通関許可）。⁠設定すると時刻行に表示し、HH:MM の遅延計算をスキップ⁠。
• ⁠後方互換⁠＝dateLabel 無しなら従来の plannedTime/actualTime + 自動 Delta（当日配送）は無変更。
• これで予備知識ゼロの AI の言う「RouteStops の本文＋ApprovalSteps の自由形式の日付」が1つのコンポーネントに。
• ⁠索引も是正⁠＝追跡タイムライン→RouteStops が HH:MM 行き止まりだった誤誘導を「複数日は dateLabel・宅配/国際輸送もここ」と明記。

ブラウザで複数週スタンプ（5/12 許可…予定 6/5）と当日 HH:MM の予実+早着/遅れ Delta（回帰）の両方を確認＝PR#424（#422 クローズ）。

学び — 「予備知識ゼロの AI がコンポーネントを捨てて代替に逃げる」のは最も鋭い 3回確認のサイン

これまでの 3回確認は「コンポーネントが無くて手組み」だった。だが #166 は違う：⁠予備知識ゼロの AI は RouteStops を見つけ、構造的な限界（HH:MM）を理解し、ApprovalSteps という別のコンポーネントに逃げた。⁠ これは手組みより⁠鋭いサイン⁠だ：

• 手組み＝「コンポーネントが無い」（欠落の存在）。
• コンポーネントを捨てて代替に逃げる＝「⁠正しいコンポーネントがあるのに、ある軸で足りないから別のコンポーネントで妥協した⁠」（コンポーネントの不完全さの存在）。

後者は「どのコンポーネントをどう拡張すべきか」を正確に教える——予備知識ゼロの AI は「RouteStops の本文＋ApprovalSteps の日付」と⁠理想形まで言語化⁠した。だから作ったのは「新しいコンポーネント」でなく「⁠既存の RouteStops に1フィールド追加⁠」になった。#164→#165 の「meta に押し込み」（妥協1）→#166 の「ApprovalSteps に逃げる」（妥協2＝より明確）と、⁠妥協の仕方が鋭くなるほど、作るべき形が明確になる。⁠

拾った点

• 🟡 ⁠OriginDestination/RouteHeader⁠（仕出→仕向 A→B の見出し・矢印付き）＝RouteStops は縦リストで横の A→B 見出しでない＝手組み＝#425（発→着 #110/#140 でも手組み済）。
• 🟡 サマリの見出しに AnalyticsCard 誤誘導（KPI トレンドカードで対象のヘッダでない）。
• ✅ ApprovalSteps（通関 申告→審査→許可）/MetadataList（本船/ETD/ETA）/SectionList（書類）/ActionQueue 全て そのまま合う。

⁠今回 src で作ったもの = RouteStops dateLabel（#422→PR#424）⁠。4/5・複数日対応のコンポーネント化・索引是正。

📊 コンポーネント化スコアボード（作成済 ⁠20個⁠ + RouteStops 複数日拡張）

…LimitMonitor / SectionList / ⁠RouteStops(複数日対応)⁠ 進行中：OriginDestination(1/3)・Statistic goodWhen(2/3)・MatchCard(1/3)

📋 モード進捗 — トラックの利用者向け3

• ✈️ 航空 ✅／🚆 鉄道 ✅／🚕 タクシー ✅／🚌 バス ✅
• 🚚 ⁠トラック：事業者向け5 ＋ 利用者向け3（荷主#164/宅配#165/国際輸送#166）⁠ ← 対称完走へ

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

• トラックの利用者向け 最後（荷主の請求帳票／個人の受取設定 等）で 事業者向け5+利用者向け4-5 対称＝トラック完走＝全5モード完走へ。※次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠配送ルート RouteStops⁠（複数日 dateLabel 対応）／ ⁠承認ステップ ApprovalSteps⁠ ／ ⁠メタデータ MetadataList⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#165
• ⁠GunjoUI by UIXHERO⁠

予備知識ゼロの AI が RouteStops を捨てて ApprovalSteps に逃げた——コンポーネントを捨てて代替に逃げるのは、手組みより鋭い 3回確認のサイン。妥協の仕方が鋭くなるほど、作るべき形（RouteStops に dateLabel 1フィールド）が明確になる。