AI にトラック求貨求車マッチングを作らせてみた — 索引是正が翌画面で効いた回(やってみた #160)
/truck-matching375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI にトラック求貨求車マッチングを作らせてみた — 索引是正が翌画面で効いた回(やってみた #160)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。トラックの事業者向けを厚く(配車#159 に追加)——求貨求車・帰り便マッチング(荷物⇄空車・マッチング候補/適合度・成約・運賃交渉)。運送業に象徴的な、これまで全モードで未見の二者間マーケットプレイスの原型。
結果 — 4/5、索引是正が「翌画面で」効いた
tsc 緑・デスクトップ情報密度。予備知識ゼロの AI(群青を一度も触っていない設定):
密度の高い本物の業務コンソールが、ほぼ戦わずに組めた。 /docs/by-use-case が list/queue/KPI/ranking の全判断で正しく誘導した。減点は1点——二者間マーケットプレイスの核心=マッチング/ペアリング自体に居場所が無いこと。
観測の核1 — 前回の索引是正(#418)が翌画面で効いた
#159 で「索引が ActionDataTable を隠す(案件一覧を DataTable に誘導)」を見つけ、PR#418 で索引を是正した。そして#160 の予備知識ゼロの AI は:
予備知識ゼロの AI「荷物(求貨)の一覧=ActionDataTable。enableSelection+selectedIds/onSelectionChange+bulkActions(一括オファー/CSV)+rowActions。まさに『荷物を選択→オファー』。そして by-use-case の索引が ActionDataTable に直行で誘導した=偶然に発見したのでなく。これがライブラリ最強の瞬間。」
#159 で索引を直し、#160 でその修正が検証された=同じシリーズで「索引の是正→翌画面で正しく誘導」が回った。これはコンポーネントを作った検証(#136→#153 Stringline)と同じ構造の、索引版の「作る→検証」ループだ。Leaderboard も適合度ランキングで自力発見=二重の検証。
観測の核2 — マッチング/ペアリングに居場所が無い(索引の罠つき)
荷物×空車のペアリング詳細(左に荷物・右に空車・中央に適合度)——これが唯一の手組みだった:
予備知識ゼロの AI「MatchCard も、二列で比較/ペアリングする組み立ても無い。人物前提でない『A⟷B の対象どうしのペアリング』が無い。索引の二者間の答えは RelationshipRow だが、それは PersonCell(アバター+名前+役割)で 人⟷人(1on1/ケア担当)をモデルする。貨物カードを2枚入れると name/secondary の差込口を濫用し、パレットにアバター円が付く。間違った道具。」
→ #419 を課題に記録:MatchCard/PairingPanel(左の対象+右の対象+中央のつなぎ/スコア+要因の内訳・人物前提でない)。求貨求車・配車・候補者⟷求人・買い手⟷売り手 で再発。これも索引の罠(二者間→RelationshipRow が人物固定)=是正対象。
学び — 索引には「2種類の罠」がある
土台が成熟した今、このテストが炙り出す欠陥は索引の誤誘導に集中している(#159 で予言)。だが#160 で索引の罠が2種類あると分かった:
- 隠す罠(#159 ActionDataTable)=正しいコンポーネントがあるのに索引が言及せず別のコンポーネントに誘導=採用者は手組みに向かう。→ 索引に項目追加で是正(安い)。
- すり替える罠(#160 RelationshipRow)=索引が「二者間ならこれ」と間違ったコンポーネントを積極的に勧めるが、そのコンポーネントは人物固定で貨物に使うと崩れる=採用者は信じて使い、アバター円がパレットに付いて初めて気付く。→ 索引の是正+本物のコンポーネントの作成の両方が要る(高い)。
これは #150 の「能動的な誤誘導」の精緻化だ。「隠す」より「すり替える」方が危険=前者は無いと分かれば手組みするが、後者は「ある」と思って使い詰まる。土台成熟後のこのテストは、この2種を見分けて安い是正(索引追加)と高い是正(コンポーネント作成+索引)を切り分ける作業になる。
→ #160 のその場対応=MatchCard/PairingPanel を課題に記録(#419・高い是正)。今回 src の新規コンポーネントなし(4/5・索引是正の検証・MatchCard を課題に記録)。
📊 コンポーネント化スコアボード(作成済 18個)
…Gantt(日中モード) / Leaderboard / SegmentedControl / LineChip 進行中:MatchCard/PairingPanel(1/3)・SectionList(2/3)・LimitMonitor(2/3)・ValidityTimer(1/3)
📋 モード進捗 — トラックの事業者向け2
- ✈️ 航空 ✅/🚆 鉄道 ✅/🚕 タクシー ✅/🚌 バス ✅
- 🚚 トラック:事業者向け2(配車#159/求貨求車#160) ← 新モード・事業者向けを厚く中
次回予告(やってみた #161)
- トラックの事業者向けをさらに(運賃・請求/車両整備・デジタコ/運送原価)/その後 利用者向け(荷主の集荷依頼・貨物追跡)。※次回までに決める。
試す
- gunjo.jp / 一括操作表 ActionDataTable / ランキング Leaderboard / メーター Meter / npm
@gunjo/ui/ GitHub / 前回まで #1〜#159 - GunjoUI by UIXHERO
索引是正が翌画面で効いた——索引には「隠す罠」と「すり替える罠」があり、後者の方が危険。土台成熟後のこのテストは、安い是正(索引追加)と高い是正(コンポーネント作成)を切り分ける作業になる。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。