AI にカレンダー予約を作らせてみた — 日付は複雑系の本丸（やってみた #11）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。作りの複雑な画面の3本目、今回は ⁠カレンダー予約⁠。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は /booking に、日付選択（過去日・満席日は無効）、時間帯の選択、サービス選択、氏名/メール、確定すると内容がまとめに反映される、まで。日付・時刻まわりは、サーバーとブラウザで描画がずれる罠（hydration）や、地域設定（ロケール）の落とし穴が多い、作りの複雑な領域です。

結果 — 4/5

npm run build 成功。ビルド時に静的生成され、コンソールエラー0。

⁠気持ちいい発見⁠: Calendar が⁠最初から日本語⁠（日月火水木金土・2026年6月・日本の祝日）。英語アプリなら locale={enUS} を渡すだけ。「⁠AI が使える日本語のデザインシステム⁠」を名乗っているので、これは狙いどおり——カレンダーが最初から日本語で出るのは、地味ですが効きます。

さらに Calendar の ⁠getDisabledReason⁠ が秀逸でした: 選べない日にマウスを乗せたりフォーカスしたりすると、理由のツールチップ（「この日は過ぎています」等）が出て、しかも⁠そのセルの aria-label にも入ります⁠（アクセシビリティ対応）。ツールチップは必要な provider を自分の内側に持っているので、外側の TooltipProvider は不要（#52 の直しがまた効いています）。TimePicker/Select は OS 標準の <select> がベースなので、サーバー側の事前描画（SSR）でも安全です。

粗さ — 日付という複雑な題材が出した粗さ

① DatePicker が特定の日だけを無効にできない

予約で一番欲しい「⁠過去日を無効にしつつ、一部の日は満席で無効にする⁠」が、DatePicker では⁠表現できません⁠。disabled が⁠コンポーネント全体のオン/オフだけ⁠で、内部の Calendar に「どの日を無効にするか」の条件を渡せない（Calendar 単体なら disabled: Matcher[] を受け取れるのに）。予備知識ゼロの AI は DatePicker を諦めて、⁠低レベルの Calendar に降りて⁠組みました。予約でいちばん多い使い方で主役が使えないのは、痛いところです。→ #64

② 日付が「サーバーとブラウザでずれる」罠（ライブラリに補助が無い）

「過去日を無効」は new Date()（＝今の日付）に依存するので、描画中に素朴に計算すると⁠サーバー側とブラウザ側でカレンダーがずれます⁠（hydration mismatch という古典的な不整合）。予備知識ゼロの AI は、today を useEffect でブラウザ側だけで決め、それまではプレースホルダを出して回避しました。⁠ライブラリは、この罠を避ける補助を何も用意していません⁠——複雑な画面で繰り返し出る落とし穴なので、docs か補助関数が欲しいところです。

③ docs のコード例が、機械的に取得すると本文に出てこない（既出 #50）

今回も同じ。使う人は、同梱の TS 型を読んで制御のしかたを学びました。

学び

作りの複雑な画面は毎回、単純な画面では出ない粗さを出します。#9 はライブラリの空白（ドラッグ&ドロップ無し）、#10 は半完成（FileUploader）、⁠#11 は機能の不足（DatePicker が肝心の制御を通さない）と、日付特有の「サーバーとブラウザでずれる」罠⁠でした。

でも #11 は良い面も濃かった——⁠最初から日本語⁠と⁠アクセシビリティ対応のツールチップ⁠は、複雑な画面を通したからこそ「ちゃんと出来ている」と確認できた部分です。盛らず、粗さも良さも両方そのままスコアボードに。⁠まだ出尽くしません。⁠

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

• ⁠Chat インターフェース⁠（ChatInput / メッセージ列）— もう一つの作りの複雑な画面。

試す

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

まだ alpha、でも日本語で青になりつつある。複雑な画面ほど、粗さも良さも正直に出ます。