【VibeCodingChallenge#16】一瞬でできる備品管理システム

はじめに

このVibeCodingChallengeは、AIだけで開発を行い、AIができること、できないことを見定めようという個人の挑戦企画です。
今回は、さすがにネタギレ、、、してきたので、副業サイトを眺めていました。（副業しようとしているわけではなく、ネタ集めとして）
すると、１つの依頼が目に止まりました。
それがこちら。

https://sankak.jp/fukugyo/5073?gclid=EAIaIQobChMIm4aa376EjwMVe9MWBR3wbQQaEAAYASAAEgL3_vD_BwE

備品管理システムの構築依頼 ですね。
こうした副業で出てくるような依頼を、モックでも、一瞬でできたら、面白いかもと思ったので、やってみることにしました。

最終成果物

いつものように最終成果物です。
https://youtu.be/HeKABS6AInk

今回は二つの画面を実装しています。
1:貸出画面

1. 貸出画面において、モデル、画像、在庫数、ステータスをカード表示
2. カードをクリックすると貸出画面に遷移し、ユーザ情報の入力もしくは、QRの読み込みでユーザを認証した上で期間設定して貸出
3. 同じ画面から返却も可能。貸出、返却に応じて、ステータスが変更される。

2:管理画面

1. 在庫を一覧管理、かつ、レンタル状況やレンタル履歴を管理
2. 備品追加も可能であり、QRコードを動的に割り振り

これにより備品の管理を、効率化するツールです。案外うまくできている気がします。

今回の学び　一発でシステムを作り上げるプロンプトは、具体性重視

今回は備品管理というよくあるシステムだからか、1回目凝った依頼をClaudeCodeに出し、2、3回の手直しだけで完成しました。
　その際に最初のプロンプトはやりたいことだけ、流れで伝えて、GPT5のChatGPTにプロンプトを作らせてみました。

その作成してくれたプロンプトが以下です。
（超長文なので、読み飛ばして構いません）

あなたはフロント兼フルスタックエンジニアです。セルフレンタル管理アプリのモックを最小機能で実装してください。
目的：デモ用に「QRで借りる/返す」「備品を追加してQR生成」が動くこと。認証や通知は省略。

0) 技術
	•	Next.js（TypeScript, App Router）＋ API Routes
	•	DB：SQLite + Prisma（ローカル1ファイル）
	•	QR生成：qrcode（PNGデータURL）
	•	スタイル：適当なUI（素でOK、簡単なCSSで十分）

1) 画面

A. ユーザー用
	1.	/（ホーム）
	•	ボタン：「QRで借りる」 / 「QRで返す」
	•	自分の貸出中一覧（モックのため「利用者名」は固定文字列でOK）
	2.	/scan（共通スキャン画面）
	•	「カメラ起動」→ QR読み取り（navigator.mediaDevices.getUserMedia。カメラ不可なら手入力欄：assetTag）
	•	読み取り後にサーバへPOST /api/scan
	•	アクティブ貸出があれば返却確認カード
	•	なければ貸出確認カード（返却予定日は今日+14日で固定）
	•	ボタン：借りる → POST /api/checkout
返す → POST /api/return

B. 管理用
	1.	/admin/assets
	•	一覧（assetTag / model / status）
	•	追加フォーム：カテゴリ、モデル、台数
→ 送信で複数台一括作成（assetTag自動採番）
	•	各行にQR表示ボタン（モーダルでPNG表示＋ダウンロード）

2) データモデル（Prisma）
model Asset {
  id        String  @id @default(cuid())
  assetTag  String  @unique  // 例: PC-2025-000001
  category  String
  model     String
  status    String  // AVAILABLE | CHECKED_OUT
  createdAt DateTime @default(now())
  loans     Loan[]
}

model Loan {
  id         String   @id @default(cuid())
  assetId    String
  userName   String   // モックなので文字列固定でOK
  startAt    DateTime @default(now())
  dueAt      DateTime
  returnedAt DateTime?
  status     String   // ACTIVE | CLOSED
  asset      Asset    @relation(fields: [assetId], references: [id])
}
3) 採番・QR仕様（簡略）
	•	assetTag：<カテゴリ略称>-<年4桁>-<6桁連番>（例：PC-2025-000123）
	•	連番はカテゴリ+年で採番（DBで最大値+1）
	•	QR内容：/scan?aid=<assetId>（署名なしでOK・モックのため）
	•	本番はHMAC署名を付ける想定だが、今回は省略

4) API（最小）
	•	POST /api/assets/bulk-create
	•	body: { category, model, count }
	•	返り値：作成資産の配列（id, assetTag, model, qrDataUrl）
	•	GET /api/assets（一覧）
	•	POST /api/qrcode
	•	body: { assetId } → 返り値：{ dataUrl }
	•	POST /api/scan
	•	body: { aid }（assetId）
	•	返り値：{ mode: 'checkout'|'return', asset: {...}, activeLoan?: {...} }
	•	POST /api/checkout
	•	body: { aid, userName, dueAt } → Asset.status=CHECKED_OUT, Loan作成
	•	POST /api/return
	•	body: { aid } → Loan.returnedAtセット、Asset.status=AVAILABLE

5) 動作要件
	•	借りる：AVAILABLEのみ成功（既に貸出中ならエラー表示）
	•	返す：アクティブなLoanがある場合のみ成功
	•	延滞計算は不要（モックのため返却予定日表示だけ）
	•	画面はモバイル優先でボタン大きめ

6) 受け入れ基準（モック）
	•	管理画面で「PC 3台追加」→ 一覧に3台出現、各台のQRが表示/ダウンロードできる
	•	ユーザー側でQRを読み取る（またはassetTag手入力）→ 借りる/返すが1タップで通る
	•	借りた直後はホームに貸出中1件として見える → 返すと0件に戻る

7) セットアップ（READMEに記載）
	•	npm i
	•	npx prisma migrate dev --name init
	•	npm run dev
	•	管理画面は /admin/assets（パス直叩きでOK）

この文章長い、、、ですが、具体的に指示を出しています。これをClaudeは要約してステップバイステップで実行して、今回のシステムをほぼ作り上げました。

GPT5は、Codexに代表されるようにシステム開発も一定できそうなので、指示もなかなか的確なのかもしれませんね。

終わりに

今回はChatGPTがプロンプトを作り、ClaudeCodeで開発すると一瞬でできました。こうした組み合わせによる開発は、今後もどんどん試していきたいですね。

このVibeCodingChallengeでは、今後もAIのみでの開発を進めていきます。