📺

Codex CLI：30分クッキング-診療予約システムDEMO-１

に公開
Netlify
ChatGPT
Codex
tech

📺 Codex CLI で診療予約システムのDEMOを３０分で実装-1

前回は Codex CLI でAIチャットポッドを作成しました。GeminiのAPIは使用しましたが、画面遷移がなくNext.jsアプリっぽくなかったので、今回は画面遷移を中心のDEMOです。

💡 何を作るか？

小さな医院向けの診療予約システムにしました。

理由

かかりつけの耳鼻科に診療予約システムがなく、先週今週と子供を診てもらったのですが、9:00の診療開始に合わせて8:30頃に行かないと、すごく待つことになるので（笑）また、後からDBなどを実装してのPoCなども可能な為です。

🔨 作りたい機能

ログイン画面

  • 診察券番号と生年月日を入力する画面
  • 最初はチェックなどは実装しない

予約状況画面

  • 診察券番号と生年月日と氏名は常に表示する。（今後の画面も同様）
  • 氏名は最終的にはDBから取得するが、PoCはでサンプルを固定で表示する。
  • 本日から３日分の予約状況を、午前と午後の単位で、「空あり」「空なし」を表示
  • 「空あり」はボタンで、押下すると次の予約入力画面に遷移する。

予約入力画面

  • 診療時間は午前9:00から12:00、午後15:00から18:00
  • 15分単位で予約できる。
  • 上記の予約時間帯を表で表示して、空きがある場合⭕️、無い場合❌を表示する。
  • ⭕️のリンクを押下すると、次の予約確認画面に遷移する。

予約確認画面

  • 診察券番号、生年月日、氏名、予約時間を表示する。
  • OKを押下すると次の予約完了画面に遷移する。

予約完了画面

  • 予約が終了したことを示す画面。

🧭 システム構成

前回と同じ定番の以下になります。

分類 技術 主な役割
フレームワーク Next.js + TypeScript ページ構成・API実装・型安全性
UI React + Tailwind CSS コンポーネント設計・スタイリング
品質管理 ESLint コード整形・静的解析

将来的にはDBの部分を以下で追加する予定です

  • STEP2：
    • Prisma：TypeScript/JavaScript で DB を扱うための ORM（データ操作ライブラリ）＋
    • SQLite：インストール不要・サーバー不要で1ファイルで動く“超軽量データベース”
  • STEP3：
    • Prisma +
    • PostgreSQL / Supabase（クラウド PostgreSQL）

💪では早速作っていきましょう！💪

👦 人がやること

プロジェクト作成

定番のNext.js + TypeScript + Tailwind CSS + ESLint の雛形プロジェクト作成

npx create-next-app@latest clinic-reservation --typescript --tailwind --eslint
cd clinic-reservation-2

Codex CLI に指示する　AGENTS.md　ファイル1の作成

Codex CLI への指示のために、AGENTS.mdファイルをプロジェクトフォルダの下に作成します。詳細な指示はプロンプトではなくこの中に記載します。原案をChatGPTに作ってもらい、UI方針のみ私が書きました。

# AGENTS.md — Clinic Reservation System (Next.js + SQLite + Prisma + Netlify)

このファイルは、Codex CLI がコード生成・編集するときの行動仕様（ガイドライン）です。
Codex はこの方針に基づき、すべてのコード・ディレクトリ構成・命名規則を統一してください。
応答は全て日本語でしてください。

---

## ⭐️ プロジェクト概要

- 本プロジェクトは **小さな医院の診療予約システム（PoC）** を構築する。
- STEP1からSTEP2ではローカル開発・PoC を目的とする。
- STEP1では画面遷移のみ確認として、DBは使用せず、入力情報をDBに保存しなくて良い。
- ユーザーからSTEP2の指示があった場合、SQLiteを使ってDBへのCRUDを実装する。
- 将来的に本番運用するときは、必要に応じて PostgreSQL・Supabase など外部 DB へ移行する。

---

## ⭐️ 技術スタック（固定）

- Next.js 15+（App Router）
- TypeScript
- React（Server Components 優先）
- Tailwind CSS 4
- Prisma
- SQLite（`file:./prisma/dev.db`）
- Netlify（デプロイ想定）
- Next.js Route Handlers (`app/api/**/route.ts`)

- スキーマ変更はすべて Prisma を利用すること。

---

## ⭐️ UI 方針

- スタイルは Tailwind CSS を使用
- 以下の順番で遷移する画面を作成する。
### ログイン画面
- 診察券番号と生年月日を入力する画面
- 最初はチェックなどは実装しない
### 予約状況画面
- 診察券番号と生年月日と氏名は常に表示する。（今後の画面も同様）
- 氏名は最終的にはDBから取得するが、PoCはでサンプルを固定で表示する。
- 本日から３日分の予約状況を、午前と午後の単位で、「空あり」「空なし」を表示
- 「空あり」はボタンで、押下すると次の予約入力画面に遷移する。
### 予約入力画面
- 診療時間は午前900から1200、午後1500から1800
- 15分単位で予約できる。
- 上記の予約時間帯を表で表示して、空きがある場合⭕️、無い場合❌を表示する。
- ⭕️のリンクを押下すると、次の予約確認画面に遷移する。
### 予約確認画面
- 診察券番号、生年月日、氏名、予約時間を表示する。
- OKを押下すると次の予約完了画面に遷移する。
### 予約完了画面
- 予約が終了したことを示す画面。

---

## ⚙ Codex の挙動ルール

### コード生成

- 読みやすく一貫性のあるコードを生成する
- API と UI の整合性が崩れる変更は行わず、必要なら確認する
- 大きな編集を行う場合は意図を簡潔にコメントする

### タスク管理

- あいまいな指示は必ず質問で確認
- 1 リクエスト = 1 タスク
- 大規模変更は段階的に提案する
- パッケージをインストールする必要がある時はユーザーに許可を求めてからインストールする。

### 命名規則

- ファイル名：lower-case + hyphen
- Prisma モデル名：PascalCase
- 関数・変数：camelCase
- フォルダ名：lowercase

---

## 🚫 禁止事項

Codex は以下を行ってはいけない：

- 不要なライブラリ追加
- `"use client"` の乱用
- Express や別フレームワーク導入
- ディレクトリ構造の勝手な変更
- 不要な機能（認証・通知など）の勝手な追加
- SQLite ファイルへの直接操作推奨（必ず Prisma 経由）

---

## 🔁 将来の DB 移行について

- 本段階の DB は SQLite 固定
- 将来 PostgreSQL / Supabase に移行する場合は
    - `provider` と `url` を変更し
    - Prisma migrate を再適用する

---

## 🤝 最終ポリシー

Codex はこの AGENTS.md を **最上位仕様** として扱い、
診療予約システムに関するすべての生成物をこの方針に従って作成すること。

💪では、ここから　Codex CLI　に依頼していきます💪

🧠 Codex CLI　との対話

最初のプロンプト

作業内容は AGENTS.md に記載済のため最小限の指示

小さなc医院の診療予約システムを作りたいです。
AGENTS.mdのポリシーに従って、STEP1の画面遷移まで実装してください。

Codex CLI からの確認

• 以下の計画で進めてもよいか確認させてください。

  1. リポジトリ構成と既存コードを調査し、STEP1要件との差分を整理
  2. App Router配下にログイン→予約状況→予約入力→予約確認→完了の画面群と遷移を実装（ダミーデータ利用）
  3. Tailwind 4で最低限のスタイル調整を行い、画面遷移をローカルで確認
    問題なければご指示ください。

🚗問題ないのでGOサイン🚗

実装完了

10分くらいガラガラと動いていて、あっけなく実装完了
• 実装内容

  • ログイン画面をSTEP1仕様に置き換え、診察券番号・生年月日をGET送信して予約状況へ遷移できるようにしました。app/page.tsx:1
  • 氏名を含む共通ヘッダーPatientSummaryを追加し、各画面で患者情報を一貫表示します。app/components/patient-summary.tsx:1
  • ダミー患者解決・日付/時間帯生成・searchParams処理のユーティリティを新設してロジックを整理しました。lib/patient.ts:1, lib/schedule.ts:1, lib/search-params.ts:1
  • 予約状況→予約入力→確認→完了の各ページを追加し、3日分の午前/午後空き表示、15分刻みの⭕️/❌、確認→完了までの遷移を実装しました。app/reservation/status/page.tsx:1, app/reservation/
    input/page.tsx:1, app/reservation/confirm/page.tsx:1, app/reservation/complete/page.tsx:1
  • ルートレイアウトのメタデータと言語設定を医院向けに更新しました。app/layout.tsx:1
    テスト
  • npm run lint

• 次のステップ

  1. npm run dev を実行し、ブラウザでログイン→完了までの画面遷移と表示崩れがないか確認してください。

とのことなので画面を表示させてみる

📺 画面表示

一発で画面遷移もOK！
0

GitHubにコミットして＆Netlifyでビルド

スマホで確認したかったので、いつものように Netlify様でホスティング1（以下公開中）

https://clinic-reservation-v2-prj.netlify.app/

ログイン画面

1

予約状況画面

2

予約入力画面

3

予約確認画面

4

予約完了画面

5

🎯 まとめ

まだDBを組み込んでいなく、また画面遷移ボタンに若干変な箇所があるかもしれませんが、初期構築としては優秀なのでは。人がやったら10分でここまではできないので 。イヤーなかなか優秀ですなAIエージェント。。。

Discussion