AI に公共施設予約を作らせてみた — 前ラウンドで作った2コンポーネントが、今日まとめて再利用された（やってみた #77）
/facility-booking375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に公共施設予約を作らせてみた — 前ラウンドで作った2コンポーネントが、今日まとめて再利用された（やってみた #77）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。公共/自治体3枚目——公共施設予約 / 貸館予約管理（時間帯×日予約グリッド × 承認フロー × 利用区分料金 × 重複防止）。
公共の3枚目は公民館/体育館の貸館予約。予約グリッドを見て、申請を承認フローに通す画面。そして直近で作った2つのコンポーネント（ScheduleGrid・ApprovalWorkflow）が、今日まとめて発見・再利用された——複利の最高到達点。
結果 — 4.5/5
tsc/build 緑・console 0（警告1件は後述）・375px横溢れ0・予約グリッド・承認フロー（次へ/差戻し/却下）・利用区分料金計算・重複検出。
今回の主題 — 直近で作った2本が、まとめてその場で効いた
予備知識ゼロの AI の核心の答え:
- 予約グリッド ←
ScheduleGrid. 全部これで組んだ。とても見つけやすい: JSDoc も gunjo.jp も「空き枠や部屋/リソースの予約グリッド」を明記している。施設予約に摩擦ゼロで曲がった。- 承認フロー ←
ApprovalWorkflow. 全部これで組んだ。非常に見つけやすい: JSDoc は「あらゆる段階的な事務方の審査」と言い、gunjo.jp のプレビュー自体が 申請受付→… という日本の行政風のパイプラインを見せている。公共施設の承認にそのまま載った。
-
ScheduleGrid（#70 で作る・#71 で説明を拡張）→ 予約グリッドで4回連続の再利用（出欠/課題提出/面談予約 に続く）。 -
ApprovalWorkflow（前ラウンド #76 で作ったばかり）→ 予約承認フローで翌ラウンド即発見・採用（Badge icon #72→#73 と同じパターン）。「差戻し」「却下」「戻し先の段階」の既定ラベルが既に用途に一致。 - DataTable onRowClick の修正（#75）・Badge icon（#72）・formatCurrency も全部再利用。
「探した gunjo.jp の docs ページで、無かったものは1つもない。」
手組みは業務ロジック（料金計算・重複検出）のみ。UI のコンポーネントは全部既存で賄えた。 「作る→翌ラウンドの別画面が即使う」の複利が、ScheduleGrid と ApprovalWorkflow で同時に回った。
src 変更ゼロ（コンポーネントを作らず）
観測点（ScheduleGrid 再利用・ApprovalWorkflow 即再利用）が両方きれいに成立し、新たな大きな欠落は出ず。ライブラリが公共施設予約をまるごと既存コンポーネントで賄った。
課題に記録だけ（小さな不便・1回目〜）
- 🟡 Sheet が description の警告を出す（SheetDescription を入れても Radix の「description が無い」警告が初回に出る・aria は正しく配線済・#293 に追記・2回目）。
- 🟡 DataTable のソートボタンの aria が冗長な英語の既定（#73/#75/#77 で3回・日本語優先の罠・各言語化できるがキー9個・#307・機能不足ではなく改善）。
- 🟢 ScheduleGrid は1セル1予約（ダブルブッキングの2件目はリスト/アラートでのみ可視）。
学び — 「振る舞いのコンポーネント」も即座に複利が回る
これまで「作法の骨格を捉えた表示のコンポーネント（Meter/ReferenceValue/ScheduleGrid）が業界を越える」ことは何度も見た。#77 は、振る舞いを内包するコンポーネント（ApprovalWorkflow）も、作った翌ラウンドで別領域の審査フローに即採用されることを示した。デザインシステムの複利は、表示コンポーネントだけでなく、状態遷移を内包するコンポーネントでも回る——しかも説明の枠（JSDoc/docs に用途を広く書く）が効いて「発見」される。公共3枚で、ライブラリが規制・事務方の領域をほぼ完全に賄うことを確認した。
次回予告（やってみた #78）
- 公共をもう1枚（税申告/納税・住民異動・ごみ/インフラ通報 など）で4枚目、or 別業界へ。系譜#281・連続時間軸#142残りの大型も観測継続。旅行は後で腰を据えて作り込む枠。
試す
まだ alpha。前ラウンドで作った ApprovalWorkflow と、説明を広げた ScheduleGrid が、今日まとめて公共施設予約に再利用された回。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。