#149スコア 4/5運輸：タクシー

AI にタクシーの乗車履歴・領収書を作らせてみた — TicketStub が「正しく使われなかった」回（やってみた #149）

ルート: /taxi-history
デスクトップ表示
モバイル表示

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

解説記事

AI にタクシーの乗車履歴・領収書を作らせてみた — TicketStub が「正しく使われなかった」回（やってみた #149）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。タクシー toC を深掘り（配車#147・予約#148 に続く3枚目。toB6 に対し toC を厚く継続中）——乗車履歴・領収書・経費精算（履歴一覧・領収書発行・但し書き/宛名・経費まとめ）。

結果 — 4/5、アカウント系も床に乗った

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

日本の B2C 履歴/領収書画面に向いている。 PageHeader/LoyaltySummaryCard/StatGroup/FilterChips/ListCard/AmountBreakdown/EditableField/Sheet/BottomActionBar の骨格はほぼターンキー・JSPY 既定。

履歴一覧（ListCard）・利用サマリ（LoyaltySummaryCard+StatGroup）・絞り込み（FilterChips）・領収書（AmountBreakdown+宛名 EditableField+Sheet）・経費まとめ（複数選択+BottomActionBar）が全 zero-friction。BottomActionBar は #147→#148→#149 と3連続で自力発見（今回は選択モードの「選択中N件」バー）。

観測の核 — TicketStub が「正しく使われなかった」＝定義域確定の成熟形

領収書に何を使うか。素朴には「TicketStub（券面）が領収書っぽい」と当てたくなる。だが cold AI は使わなかった：

「TicketStub は領収書に合わない。docstring が自分でそう言っている＝『scannable pass/coupon/member-card stub（バーコード/QR+コードラベル）・scan 入力の消費者側ミラー』で、紙の領収書ではない。日本の税の領収書にバーコードは無い。ここで TicketStub を使うのは間違い。正しく使わなかった。」

これは越境発掘の逆＝『越境させない』の成熟。 #128 で TicketStub を build したとき docstring に「ScanInput の消費者側ミラー・搭乗券/クーポン/会員証」と用途を明記し、索引で「読み取る→ScanInput / 提示する→TicketStub」と定義域を割った。その定義域の明記が、9回後の cold AI に『ここでは使うな』を正しく伝えた。

部品の docstring は「どこで使うか」だけでなく「どこで使わないか」も書く——両方書いて初めて、文脈ゼロでも誤用を防げる。#146 の HeatmapChart（ここでない/ここだ）に続く、定義域確定の両面のもう一例。結晶化した部品の真の完成は、正しく使われることと、誤って使われないこと、両方が起きたとき。

拾った穴 — 月別グループの一覧と、モバイル複数選択の誤誘導

  • 🟠 SectionList/GroupedList：月別グループ（見出し＋行＋小計）を手組み。「ListCard は1行・月見出し+小計を出すグループ一覧 primitive が無い・履歴/利用明細/取引履歴/statement の背骨」＝#404（StatusBoard の groups[]/Itinerary の days[] はあるが汎用グループ行一覧が無い）。
  • ✅ 索引是正：cold AI が「モバイルの複数選択+一括」で DataTable（デスクトップ表）に誤誘導された→ListCard+Checkbox+BottomActionBar に是正 PR#405（索引が B2B/ダッシュボード寄りで B2C 選択を黙って誤誘導していた）。
  • 🟡 ListCard の selected が見た目だけ（aria-pressed/selected 無し）＝#404 併記。

今回 src build なし（4/5・アカウント床越境・TicketStub 定義域確定・SectionList 起票・索引是正）。

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

…PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge / BottomActionBar 進行中：SectionList・DateTimePicker/PlaceField・ApproachCard・StatusLevel 2/3・Leaderboard/CaseTable

📋 タクシー toC 進捗（深掘り継続）

  • 🚕 タクシー：toB 6 ／ toC 3（配車/予約/履歴） ← まだ toB6 と非対称・継続
  • 残り toC 候補：乗車後 評価/忘れ物・会員/サブスク/クーポン・法人配車

次回予告（やってみた #150・節目）

  • タクシー toC をさらに（評価/忘れ物 or 会員/クーポン 等）。※どこを掘るかは KeEem に確認。

試す

TicketStub が「正しく使われなかった」——結晶化した部品の真の完成は、正しく使われることと、誤って使われないこと、両方が起きたとき。docstring は「どこで使わないか」も書く。

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

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

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

AmountBreakdownAmountLineBadgeBottomActionBarButtonCheckboxEditableFieldEmptyStateFilterChipFilterChipsListCardLoyaltySummaryCardMetadataListPageHeaderRatingSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatGroupTag

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

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