AI に週表示カレンダー（予定表）を作らせてみた — 汎用コンポーネントは綺麗、でも"分野ごとの表示層"がゼロ（やってみた #27）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠週表示カレンダー / スケジューラ（イベント配置つき）⁠。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は Google カレンダー風の週ビュー: ツールバー（週の移動・Day/Week/Month 切替・新規）・7日×時間軸のグリッド・終日レーン・⁠イベントブロック（開始/終了から配置・重なりは横並び・カテゴリ色）⁠・現在時刻ライン・イベント詳細 Popover・空きスロットで作成 Dialog・375px では単日/一覧表示にまとめる。

結果 — 4.5/5（汎用コンポーネントは綺麗・分野ごとの層がゼロ）

tsc/build 緑・console 0・⁠サーバーとブラウザの表示ずれ（hydration）なし⁠（現在時刻ラインは mounted フラグで遅らせて描画）・⁠h1 1個・イベントは "title, 10:00–11:00" のラベル付きボタン・今日は色＋読み上げ専用の "(Today)"・重なりは横並び・終日は上のレーン・375px でのはみ出し0・ダークモード完全⁠。

⁠予定の配置まわり以外は、綺麗に組めました⁠: ToggleGroup（segmented・role=radio）・Dialog（フォーカスの閉じ込め・aria 自動）・Popover（幅は className で上書き可）・⁠色調トークン⁠（bg-{tone}-subtle で5カテゴリの色）。そして ⁠CardTitle as(#116) をまた称賛⁠（4回目）。直した不備が、連鎖的に効いています。

でも 4.5/5 を阻んだ — カレンダーという"分野"の層が無い

⁠@gunjo/ui には、予定表（スケジューラ）の表示層が一つも無い（#142・重大）。⁠ 時間軸グリッドも、配置済みのイベントブロックも、重なりの詰め込みも、終日レーンも、現在時刻ラインも無い。Calendar は ⁠日付選択（date picker、react-day-picker）⁠で、「日付にイベントを表示する」正式な API すら無い（className のフックのみ）。結果、⁠週ビューの中身 ~280行＋自前の重なり配置アルゴリズムを全部手組み⁠しました。

汎用コンポーネント（Card/Popover/Dialog/Button/色調トークン）は、手組みのグリッドの周りで綺麗に組めました——でも⁠カレンダー分野のレイアウトはゼロ⁠です。

今ラウンドの修正

• ⁠#141⁠: Calendar が ⁠日本の祝日を既定でオン⁠（公開 npm パッケージだと、海外の利用者には意外）→ showHolidays を ⁠既定 false⁠ に（祝日は明示的に有効化する形へ）。
• ⁠#140 は範囲を見直し⁠: Popover の w-72 w-[288px]/rounded-md rounded-lg の重複は、実は ⁠2つのドリフト検査（構造チェックとスタイル指定チェック）が違う表現を要求していて、消すと壊れる部分⁠だった（単純な掃除ではなく、ドリフト検査基盤の整合が要る・follow-up）。
• ⁠#106 Badge の意味を持つ色⁠: info/success/warning が無く、カテゴリの色分けができない（#20 の success に続き2回目）→ .pen を含むので Codex 側で色調の一式を追加へ。

予定表のコンポーネント(#142)は beta ゲート（大物）です。

学び — 「汎用のライブラリ」と「分野ごとの表示層」は別物

汎用層（外枠/フォーム/オーバーレイ/チャート/色調トークン）→ 強い・どんな画面でも周りは組める
分野ごとの表示層（予定表/カレンダー/時間軸グリッド）→ ゼロ。カレンダーの"中身"はこっち

これまでの欠落は、コンポーネントのバグや prop の不足でした。⁠#27 は質が違います⁠——「カレンダーという1分野まるごとの表示層が無い」。汎用のデザインシステムとしては強い（アクセシビリティも手組みで完璧に組めた）が、予定表のような分野を謳うなら、専用のコンポーネントが要ります。⁠汎用が強いほど、分野ごとの層の不在が際立つ⁠——#80 PricingTemplate と同じ構図の、もう一段大きい版です。

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

• ⁠エラー画面 / 設定ウィザード / ファイルブラウザ⁠ ほか。分野ごとの層と組み立てを引き続き。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#26
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。汎用は綺麗、次は分野ごとの表示層。回すほど、欠落の"層"が深くなります。