AI に荷主の請求・支払ポータルを作らせてみた — NavRow がコンポーネント化、トラック完走で全5モード完成（やってみた #168）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。⁠トラックの利用者向け 最後⁠（荷主#164・宅配#165・国際#166・設定#167 に続く5枚目）——⁠荷主向け 請求・お支払いポータル⁠（請求書一覧・請求内訳・帳票DL・お支払い方法）。⁠これで 事業者向け5+利用者向け5 対称＝トラック完走＝全5モード完成。⁠

まず — トラック完走で全5モード完成

トラックの事業者向け5（配車#159/求貨求車#160/車両労務#161/運賃請求#162/運送原価#163）+ 利用者向け5（荷主#164/宅配#165/国際#166/設定#167/請求#168）が⁠対称完走⁠。航空・鉄道・タクシー・バスに続き、⁠運輸5モードすべてが 事業者向け+利用者向け 対称で完走⁠した。

結果 — 4.5/5、NavRow が3回目でコンポーネント化

tsc 緑・モバイル/デスクトップ両対応。予備知識ゼロの AI（群青を一度も触っていない設定）：

⁠自分の対象領域を既に考えていた稀なデザインシステム。⁠ doc コメントが 請求/締め/客先別/立替金 を逐語で名指し。難所3つのうち2つ（小計付きグループ表・金額導出）がそのまま嵌まった。

観測の核 — NavRow が3回目でコンポーネント化（アクセシビリティのバグの是正つき）

設定行（お支払い方法・送付方法・通知）——3回目の手組みだった：

予備知識ゼロの AI「⁠NavRow/SettingsRow/ListRow が無い（パッケージ全体を grep しても皆無）。索引は『タップできる行のある設定画面』を ListCard に誘導するが、ListCard.onSelect は aria-pressed の button＝トグル/選択状態。詳細 Sheet を開く設定行は『遷移』でトグルでない＝aria-pressed は読み上げに『押下/非押下のスイッチ』と嘘をつく。aria-haspopup='dialog' で aria-pressed 無しの SettingsNavRow を手組みした。追加すべき最重要は NavRow＝そして索引の設定行の項目をそこに向け直せ。⁠」

⁠NavRow は #152 タクシー法人・#167 配達設定・#168 で3回目＝3回確認。その場で作った⁠：

• ⁠NavRow⁠＝端に寄せた行（先頭アイコン＋ラベル＋説明＋右寄せ現在値＋末尾の右向き矢印）。⁠onSelect で 遷移/詳細展開の button（右向き矢印が既定・opensDialog で aria-haspopup='dialog'）＝意図的に aria-pressed でない⁠（詳細を開く行は遷移でトグルでない）。onSelect 無しなら静的な操作行（末尾に Switch/Badge）。
• ⁠SettingGroup⁠＝丸角コンテナ＋細い区切り線（iOS/Android のグループ設定ブロック）。
• ⁠索引も是正⁠＝設定/ナビ行→NavRow に向け直し、ListCard.onSelect は aria-pressed（トグル）で詳細を開く行には誤り、と明記。
• ブラウザで⁠nav-row button の aria-pressed=0（遷移が正・トグルでない）・aria-haspopup='dialog'=2（詳細を開く行）⁠を確認＝PR#426（#409 クローズ）。⁠コンポーネント化 21個目。⁠

学び — NavRow は「アクセシビリティの意味づけの欠落」を塞いだ最初の作成

#167 で「索引の罠の4つ目＝アクセシビリティの意味づけのすり替え」を見つけた。#168 で ⁠その罠を作ることで塞いだ⁠：

• これまで作ってきたのは⁠機能の欠落⁠（コンポーネントが無い）を塞ぐものだった＝Leaderboard・SectionList・LimitMonitor…。
• NavRow は⁠アクセシビリティの意味づけの欠落⁠を塞いだ＝コンポーネント（ListCard）はあって見た目もクリックも動くが、読み上げへの意味づけ（aria-pressed のトグル）が用途（遷移）と違う。

⁠「動くが意味づけが違う」は最も発見が遅れる欠陥⁠（#150 の Rating 表示専用、#160 の RelationshipRow 人物固定、#167 の ListCard aria-pressed と同系）。予備知識ゼロの AI は「信じて使い、読み上げで初めて気付く」。だから NavRow を作ることで、⁠正しいアクセシビリティの意味づけ（遷移 = aria-haspopup・トグルでない）をコンポーネントに焼き込み、採用者が知らなくても守られる⁠ようにした——これが #161 LimitMonitor で書いた「規約をコンポーネントに焼き込む」のアクセシビリティ版だ。

拾った点

• ✅ ⁠SectionList が「ライブラリ最良の適合」⁠（請求を月/締めグループ＋小計フッター）＝同セッションでの再検証。
• ✅ AmountBreakdown（請求内訳）/RadioCard（支払方法）そのまま合う。
• 🟡 帳票DL のリスト＝索引が⁠空を正直に返した欠落⁠（帳票ダウンロード行のパターン無し）＝手組み。

⁠今回 src で作ったもの = NavRow（#409→PR#426）⁠。4.5/5・NavRow コンポーネント化・アクセシビリティの索引是正・トラック完走。

📊 コンポーネント化スコアボード（作成済 ⁠21個⁠）

…SectionList / RouteStops(複数日) / ⁠NavRow⁠（このセッションで8コンポーネントを作成/拡張） 進行中：OriginDestination(1/3)・Statistic goodWhen(2/3)・MatchCard(1/3)

📋 モード進捗 — 全5モード完成 🎉

• ✈️ 航空（事業者向け5+利用者向け6）✅／🚆 鉄道（事業者向け5+利用者向け6）✅／🚕 タクシー（事業者向け6+利用者向け6）✅／🚌 バス（事業者向け5+利用者向け6）✅／🚚 ⁠トラック（事業者向け5+利用者向け5）✅⁠
• ⁠運輸5モードすべて 事業者向け+利用者向け 対称で完走。⁠

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

• 運輸シリーズが完走。次は ⁠新業種⁠（公共交通以外＝エネルギー/通信/農業/建設 等）か、⁠運輸で残った進行中のストックの深掘り⁠か。※次回までに決める。

試す

• ⁠gunjo.jp⁠ ／ ⁠ナビ行 NavRow⁠（新）／ ⁠セクションリスト SectionList⁠ ／ ⁠金額内訳 AmountBreakdown⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠ ／ 前回まで #1〜#167
• ⁠GunjoUI by UIXHERO⁠

NavRow がコンポーネント化し、トラック完走で全5モードが揃った——NavRow は「アクセシビリティの意味づけの欠落」を塞いだ最初の作成。動くが意味づけが違う欠陥を、コンポーネントに正しいアクセシビリティを焼き込んで根治した。