データ保存つきWebアプリをAIエージェントと作る【2026】Next.js＋SQLiteで社内の備品・予約管理

# 作業用フォルダを作ってClaude Codeを起動
mkdir -p ~/work && cd ~/work
claude

社内の備品貸出を管理するWebアプリを作りたいです。
今は総務がExcelで管理していて、誰が何を借りているか分からなくなりがちです。

まだコードは書かないでください。
まず、仕様を決めるために必要な質問を10個以内でしてください。
特に「保存するデータの項目」「誰が何をできるか」「どこで動かすか」を確認したいです。
回答したら、その内容を docs/spec.md に仕様メモとしてまとめてください。

# 備品貸出管理アプリ 仕様メモ（v0.2）

## 目的
- 総務の共有Excelで管理している備品（PC・プロジェクター・カメラ等 約80点）の貸出状況を、
  社員が自分で確認・貸出・返却できるようにする

## 利用者
- 社員（約40人）：一覧・検索・貸出・返却
- 総務（2人）：備品の登録・編集・削除、貸出履歴の確認

## 必須機能（v1）
1. 備品一覧（名前・カテゴリ・保管場所・状態）と、名前/カテゴリでの検索
2. 備品の登録（名前・カテゴリ・保管場所は必須）
3. 貸出（借りる人・返却予定日）／返却
4. 貸出履歴（誰が・いつ借りて・いつ返したか）

## やらないこと（v1）
- 会議室の時間予約、メール通知、スマホアプリ化

## 前提・制約
- 社内LAN内の1台のPCで動かす（外部公開しない）
- 外部の有料APIやクラウドDBは使わない。データは1ファイル（SQLite）
- 同じ備品が同時に二重貸出されないこと

## 未決事項
- ログインをどうするか（→ 構成案と一緒に選択肢を出してもらう）

docs/spec.md を読んで、構成案を出してください。条件：
- Next.js（App Router）＋ TypeScript
- DBはSQLite（1ファイル。外部のクラウドDBは使わない）
- DBを操作するORMは Prisma と Drizzle ORM などから候補を2〜3個比較し、
  この案件ならどれを選ぶか「理由」と「デメリット」をセットで説明してください
- テーブル設計（列と型）、画面一覧、ファイル構成、作業の順番も
- ログインについては選択肢を3つ程度、メリット・注意点つきで
まだコードは書かないでください。

# 雛形を作る（質問にはTypeScript・ESLint・App Router・src/ディレクトリを「Yes」で）
npx create-next-app@latest bihin-kanri
cd bihin-kanri

# DB・入力チェック・テストの部品を追加
npm install drizzle-orm better-sqlite3 zod server-only
npm install -D drizzle-kit @types/better-sqlite3 vitest vite-tsconfig-paths

# テーブル定義からマイグレーションSQLを作り、DBに反映
mkdir -p data
npx drizzle-kit generate
npx drizzle-kit migrate

# 開発サーバーを起動 → ブラウザで http://localhost:3000
npm run dev

# CLAUDE.md（備品貸出管理）

## 概要
Next.js（App Router）＋ SQLite（better-sqlite3）＋ Drizzle ORM の社内向けWebアプリ。仕様は docs/spec.md。

## コマンド
- 開発サーバー: npm run dev（http://localhost:3000）
- テスト: npx vitest run
- マイグレーション: npx drizzle-kit generate → npx drizzle-kit migrate

## ルール
- DBアクセスはサーバー側（Server Component / Server Action / src/lib）だけ。Client Componentから src/db を import しない
- 入力は必ずサーバー側で zod で検証する
- テーブル定義を変えたら必ずマイグレーションを生成する。data/app.db を直接編集・削除しない
- 仕様にない機能を勝手に足さない。迷ったら質問する
- 変更したら npx vitest run と npm run lint を通してから報告する

計画のSTEP1〜2を実装してください。
- src/db/schema.ts に items と loans を定義し、マイグレーションを生成・適用
- 一覧＋検索（トップページ）、貸出フォーム、返却ボタン
- 貸出・返却の処理は src/lib/loans.ts にまとめ、Server Action から呼ぶ
- 入力チェックは zod でサーバー側に
- 動作確認用に、備品を5件入れる seed スクリプトも
終わったら npm run dev で起動し、確認手順を教えてください。

バグが2つあります。原因を調べて、直す前に原因と修正方針を説明してください。

【バグ1】同じ備品が2人に貸し出される
再現手順：2つのブラウザで同じ備品の一覧を開き、ほぼ同時に「貸し出す」を押す
期待：後から押した方は「貸出中です」とエラーになる
実際：両方成功し、loans に貸出中の記録が2件できる

【バグ2】返却後、別のタブの一覧が古いまま
再現手順：タブAで返却 → タブBで一覧を再読み込み
期待：貸出可になっている
実際：貸出中のまま（数回読み込むと直る）

src/lib/loans.ts の貸出・返却ロジックに Vitest でテストを追加してください。
- 本番の data/app.db には触らず、テストごとにメモリ上のDBを作る
- 「二重貸出できない」（バグ1）のテストを必ず入れる
- 返却後に再度貸し出せること、名前が空白だけなら入力エラーになることも
npx vitest run が通るまで直して、結果を報告してください。

// src/lib/loans.test.ts：貸出ロジックのテスト（Vitest）
import { beforeEach, describe, expect, it } from "vitest";
import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import { migrate } from "drizzle-orm/better-sqlite3/migrator";
import * as schema from "@/db/schema";
import { items } from "@/db/schema";
import { lend, giveBack, LendInput } from "./loans";

function createTestDb() {
  // テストごとにメモリ上の空DBを作る（本番のdata/app.dbには触らない）
  const db = drizzle(new Database(":memory:"), { schema });
  migrate(db, { migrationsFolder: "drizzle" });
  return db;
}

describe("貸出・返却", () => {
  let db: ReturnType<typeof createTestDb>;
  let itemId: number;

  beforeEach(() => {
    db = createTestDb();
    const row = db.insert(items).values({ name: "プロジェクター A", category: "プロジェクター" }).returning().get();
    itemId = row.id;
  });

  it("貸出可能な備品は貸し出せる", () => {
    expect(lend(db, { itemId, borrower: "山田" })).toEqual({ ok: true });
  });

  it("貸出中の備品は二重に貸し出せない（バグ報告#1の再発防止）", () => {
    lend(db, { itemId, borrower: "山田" });
    const second = lend(db, { itemId, borrower: "佐藤" });
    expect(second.ok).toBe(false);
  });

  it("返却すると再び貸し出せる", () => {
    lend(db, { itemId, borrower: "山田" });
    expect(giveBack(db, itemId)).toEqual({ ok: true });
    expect(lend(db, { itemId, borrower: "佐藤" }).ok).toBe(true);
  });

  it("名前が空白だけなら入力エラー", () => {
    const parsed = LendInput.safeParse({ itemId: "1", borrower: "   " });
    expect(parsed.success).toBe(false);
  });
});

// src/db/schema.ts：テーブル定義（ここを変えたらマイグレーションを作り直す）
import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";

// 備品マスタ
export const items = sqliteTable("items", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  name: text("name").notNull(),                    // 例: ノートPC 14インチ #3
  category: text("category").notNull(),            // 例: PC / プロジェクター / カメラ
  location: text("location").notNull().default(""), // 保管場所
  status: text("status", { enum: ["available", "lent"] })
    .notNull()
    .default("available"),
  createdAt: integer("created_at", { mode: "timestamp" })
    .notNull()
    .$defaultFn(() => new Date()),
});

// 貸出履歴（返却済みも残す＝あとから「誰がいつ借りたか」を追える）
export const loans = sqliteTable("loans", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  itemId: integer("item_id")
    .notNull()
    .references(() => items.id),
  borrower: text("borrower").notNull(),
  lentAt: integer("lent_at", { mode: "timestamp" }).notNull(),
  dueAt: integer("due_at", { mode: "timestamp" }),
  returnedAt: integer("returned_at", { mode: "timestamp" }), // null＝貸出中
});

// src/db/index.ts：DB接続（サーバー側でだけ読み込む）
import "server-only"; // クライアント側から読み込まれたらビルドエラーにする
import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import * as schema from "./schema";

const sqlite = new Database(process.env.DATABASE_PATH ?? "data/app.db");
sqlite.pragma("journal_mode = WAL");   // 読み書きが同時に来ても詰まりにくくする
sqlite.pragma("foreign_keys = ON");    // 存在しない備品IDへの貸出を防ぐ

export const db = drizzle(sqlite, { schema });
export type DB = typeof db;

// src/lib/loans.ts：貸出・返却の本体（画面から切り離してテストできるようにする）
import { and, eq, isNull } from "drizzle-orm";
import { z } from "zod";
import type { DB } from "@/db";
import { items, loans } from "@/db/schema";

export const LendInput = z.object({
  itemId: z.coerce.number().int().positive(),
  borrower: z.string().trim().min(1, "借りる人の名前を入力してください").max(50, "名前は50文字以内で入力してください"),
  dueAt: z.coerce.date().optional(),
});
export type LendInput = z.infer<typeof LendInput>;

export type Result = { ok: true } | { ok: false; message: string };

export function lend(db: DB, input: LendInput): Result {
  return db.transaction((tx) => {
    // 「貸出可能なときだけ貸出中にする」を1文で行う＝二重貸出を防ぐ
    const updated = tx
      .update(items)
      .set({ status: "lent" })
      .where(and(eq(items.id, input.itemId), eq(items.status, "available")))
      .run();
    if (updated.changes === 0) {
      return { ok: false, message: "この備品はすでに貸出中か、存在しません" } as const;
    }
    tx.insert(loans)
      .values({ itemId: input.itemId, borrower: input.borrower, lentAt: new Date(), dueAt: input.dueAt })
      .run();
    return { ok: true } as const;
  });
}

export function giveBack(db: DB, itemId: number): Result {
  return db.transaction((tx) => {
    const closed = tx
      .update(loans)
      .set({ returnedAt: new Date() })
      .where(and(eq(loans.itemId, itemId), isNull(loans.returnedAt)))
      .run();
    if (closed.changes === 0) {
      return { ok: false, message: "貸出中の記録が見つかりません" } as const;
    }
    tx.update(items).set({ status: "available" }).where(eq(items.id, itemId)).run();
    return { ok: true } as const;
  });
}

// src/app/actions.ts：フォームから呼ばれるServer Action
"use server";

import { revalidatePath } from "next/cache";
import { db } from "@/db";
import { LendInput, lend, giveBack } from "@/lib/loans";

export type FormState = { ok: boolean; message: string };

export async function lendAction(_prev: FormState, formData: FormData): Promise<FormState> {
  // ① 入力チェック（ブラウザ側のrequiredは簡単に回避できるので、必ずサーバーでも確認）
  const parsed = LendInput.safeParse({
    itemId: formData.get("itemId"),
    borrower: formData.get("borrower"),
    dueAt: formData.get("dueAt") || undefined,
  });
  if (!parsed.success) {
    return { ok: false, message: parsed.error.issues[0]?.message ?? "入力内容を確認してください" };
  }

  // ② DB更新（ロジックは lib/loans.ts に集約）
  const result = lend(db, parsed.data);
  if (!result.ok) return { ok: false, message: result.message };

  // ③ 一覧ページのキャッシュを捨てて最新状態を表示
  revalidatePath("/");
  return { ok: true, message: `${parsed.data.borrower} さんに貸し出しました` };
}

export async function returnAction(formData: FormData): Promise<void> {
  const itemId = Number(formData.get("itemId"));
  if (!Number.isInteger(itemId) || itemId <= 0) return;
  giveBack(db, itemId);
  revalidatePath("/");
}

// src/app/LendForm.tsx：貸出フォーム（ブラウザ側で動くClient Component）
"use client";

import { useActionState } from "react";
import { lendAction, type FormState } from "./actions";

const initialState: FormState = { ok: true, message: "" };

export function LendForm({ itemId }: { itemId: number }) {
  const [state, formAction, pending] = useActionState(lendAction, initialState);

  return (
    <form action={formAction} className="lend-form">
      <input type="hidden" name="itemId" value={itemId} />
      <input name="borrower" placeholder="借りる人" required maxLength={50} />
      <input type="date" name="dueAt" aria-label="返却予定日" />
      <button type="submit" disabled={pending}>
        {pending ? "処理中…" : "貸し出す"}
      </button>
      {state.message && (
        <p role="status" className={state.ok ? "msg-ok" : "msg-error"}>
          {state.message}
        </p>
      )}
    </form>
  );
}

// src/app/page.tsx：一覧＋検索（サーバー側で描画されるServer Component）
import { desc, like, or } from "drizzle-orm";
import { db } from "@/db";
import { items } from "@/db/schema";
import { LendForm } from "./LendForm";
import { returnAction } from "./actions";

export const dynamic = "force-dynamic"; // 毎回DBの最新状態を表示する

export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q = "" } = await searchParams;
  const keyword = q.trim().slice(0, 50);

  const rows = await db
    .select()
    .from(items)
    .where(
      keyword
        ? or(like(items.name, `%${keyword}%`), like(items.category, `%${keyword}%`))
        : undefined,
    )
    .orderBy(desc(items.createdAt));

  return (
    <main>
      <h1>備品貸出管理</h1>
      <form>
        <input name="q" defaultValue={keyword} placeholder="備品名・カテゴリで検索" />
        <button type="submit">検索</button>
      </form>
      <ul className="item-list">
        {rows.map((item) => (
          <li key={item.id}>
            <strong>{item.name}</strong>（{item.category}）
            {item.status === "available" ? (
              <LendForm itemId={item.id} />
            ) : (
              <form action={returnAction}>
                <input type="hidden" name="itemId" value={item.id} />
                <button type="submit">返却する</button>
              </form>
            )}
          </li>
        ))}
      </ul>
    </main>
  );
}

// drizzle.config.ts：マイグレーション（DBの設計変更の履歴）の設定
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  schema: "./src/db/schema.ts",
  out: "./drizzle",
  dialect: "sqlite",
  dbCredentials: { url: process.env.DATABASE_PATH ?? "data/app.db" },
});

// scripts/backup.mjs：SQLiteを安全にコピーする（アプリ稼働中でもOK）
import Database from "better-sqlite3";
import { mkdirSync, readdirSync, rmSync } from "node:fs";

const src = process.env.DATABASE_PATH ?? "data/app.db";
const dir = "backup";
mkdirSync(dir, { recursive: true });

const stamp = new Date().toISOString().slice(0, 10); // 2026-09-26
const db = new Database(src, { readonly: true });
await db.backup(`${dir}/app-${stamp}.db`); // ファイルコピーではなくSQLiteのバックアップ機能を使う
db.close();

// 古いバックアップは30世代だけ残す
const files = readdirSync(dir).filter((f) => f.endsWith(".db")).sort();
for (const f of files.slice(0, Math.max(0, files.length - 30))) rmSync(`${dir}/${f}`);
console.log(`backup: ${dir}/app-${stamp}.db`);

0 3 * * * cd /opt/bihin-kanri && node scripts/backup.mjs >> backup.log 2>&1

# .gitignore に追記（DBの中身と秘密情報はGitに入れない）
/data/*.db
/data/*.db-wal
/data/*.db-shm
/backup/
.env*.local