初めに
最近話題の「Claude Code」。
エンジニアにとってAIを活用した開発は、これから避けては通れない潮流だと感じています。
「触らなきゃなー」と思いつつなかなか手を出せずにいたのですが、今回記事を書く良い機会をいただいたので、実際に触って開発してみました！
今回は、普段会社で使用している勤怠アプリで「ちょっと使いにくいな…」と感じていた部分を解消すべく、自作の勤怠管理アプリの作成に挑戦します。
その中でAIに出した指示内容や、Claude Codeが裏で何をしてくれたのかを調べたメモをまとめていきます。
開発環境
- OS： Windows 11
- 使用AI： Gemini（事前の相談用） + Claude Code（ターミナルでの開発用）
- 実行環境： PowerShell
- エディタ： VS Code
最初の壁：消えた履歴とコンテキスト
前回の続きから作業を始めようとしたところ、ターミナルの履歴がすべて消えていました。
作業内容を記録していた PROGRESS.md も「存在しません」と言われ、いきなりピンチに。
事前にGeminiに相談した際、「PROGRESS.md に進捗を残しておけば大丈夫」と言われていたのですが、それだけではClaude Codeのセッション自体は復元されませんでした。（※Geminiが嘘をついたというより、ファイルの文脈を読み込ませる前に、まずはセッションの復元が必要だったようです）。
結局、ググった結果下記のコマンドを打つことで無事に解決しました。Claude Codeの会話はセッションごとに管理されているんですね。
/resume
前回の状態からもスムーズに再開できるようになり、一安心です！
アーキテクチャの選定
アプリの構成が何も決まっていなかったので、まずはClaude Codeにおすすめの構成を聞いてみました。
Q. 質問内容
勤怠管理のアプリを作りたいけどおすすめの構成を教えて
A. Claude Codeからの回答
中小規模向けの勤怠管理アプリを開発する際の、モダンで開発効率の高い推奨テックスタックと主要機能の実装イメージです。
技術構成（テックスタック）
| レイヤー | 推奨技術・ツール | 特徴・選定理由 |
|---|---|---|
| フロントエンド | Next.js (App Router) | SSR/SSGが柔軟、TypeScriptが標準で組み込まれており開発しやすい |
| UI・デザイン | Tailwind CSS + shadcn/ui | デザインが美しく、管理画面に向いた高品質なコンポーネント群が揃う |
| バックエンド | Next.js API Routes | 軽量かつ高速。Next.jsと一体で扱いやすい |
| ORM | Prisma | データベースの操作（ORM）や、スキーマ（設計図）の管理が劇的に楽になる |
| データベース | PostgreSQL (Supabase / Neon) | 勤怠で最も重要な「日付・時刻データ」の扱い（タイムゾーンなど）が得意 |
| 認証 | NextAuth.js (Auth.js v5) | Googleログインやメール認証（マジックリンク）をすぐに実装できる |
| インフラ | Vercel | Next.jsの開発元が運営。親和性が最高で、デプロイ（公開）が超簡単 |
主要機能の実装イメージ
- 出退勤打刻: 画面のボタンを1クリック ➔ API経由でデータベースに正確なタイムスタンプ（日時）を保存
-
月次集計: PostgreSQLの集計クエリ、またはPrismaの
groupBy機能を使い、月ごとの労働時間を自動計算 - 管理者画面: 新しくアプリを作らず、同一のNext.jsアプリ内でユーザーの「権限（一般／管理者）」に応じて画面を分岐
-
CSV出力: バックエンド（APIルート）で
papaparseなどのライブラリを使い、給与計算ソフト等に取り込めるCSVを生成
ちょっとした質問でこれだけのクオリティの回答をしてもらえるのは本当に凄いです。
今回は、この提案してもらった構成（Next.js + Prisma + PostgreSQL）をベースに作成してみることにしました。
DB構成（ローカル環境の構築）
まずはローカル環境で手軽に試したかったのですが、Windowsに直接PostgreSQLをインストールするのは少し面倒です。そこで、別の解決策がないか確認しました。
Q. 質問内容
ローカルで完結するようにしたいです。
A. Claude Codeからの回答
いくつかの方法がありますが、環境を汚さないDockerを使った方法がおすすめです。
方法: Docker
Dockerがあれば、以下の1コマンドで起動できます。
docker run --name kintai-postgres \
-e POSTGRES_PASSWORD=localpassword \
-e POSTGRES_DB=kintai \
-p 5432:5432 \
-d postgres:16
.env.local の DATABASE_URL 設定
```text
File generated successfully.
```env
DATABASE_URL="postgresql://postgres:localpassword@localhost:5432/kintai"
インストール方法だけでなく、環境変数（.env）の設定までセットで教えてくれます。
ただ、私の環境では「Docker Desktop for Windows」を入れるとメモリを大量に消費してしまうため、WSL2（Ubuntu）上で動かしたいと考え、追加で質問をしました。
Q. 質問内容
Dockerを使いたいです。wsl上のubuntuでできますか？
A. Claude Codeからの回答
はい、WSL2上のUbuntuで問題なく動作します！手順は以下の通りです。
1. Dockerのインストール確認と導入
WSLのターミナルで以下を実行します：
docker --version
もし入っていない場合は、以下のコマンドでインストールします：
curl -fsSL [https://get.docker.com](https://get.docker.com) | sh
sudo usermod -aG docker $USER
※設定反映のため、一度ターミナルを閉じて再度開き直してください。
2. PostgreSQL コンテナを起動
docker run --name kintai-postgres \\
-e POSTGRES_PASSWORD=localpassword \\
-e POSTGRES_DB=kintai \\
-p 5432:5432 \\
-d postgres:16
起動確認：
docker ps
この後、Claude Codeの指示に従ってPrismaのマイグレーションを実行し、必要なライブラリをインストールしていきました。
なんと、指示された通りにコマンドを実行していくだけで、あっという間に画面が表示されるところまで到達しました！
現在の進捗とこれからの課題
ものの1〜2時間で、環境構築からフロント画面の表示・DB接続の準備まで実装することができてしまいました。
現在できていること
- 簡易的なログイン機能
- 表示する「月」の切り替え
- 時間の入力（※初期表示が現在時刻になる親切設計！）
これからの課題（まだできないこと）
- 祝日の自動判定と表示
- 月を変更した際に、土日の配置（休日）が連動して変わらない問題の修正
- 実際の勤怠データのデータベースへの登録処理
おわりに
現状では、まだ文字の色や勤怠管理アプリとしての必須要件（データの保存など）を満たしていないため、引き続き開発を続けていく予定です。
今後は、Gitでのバージョン管理や、AWSと連携したデプロイなどにも挑戦していこうと思います！
AIの力を借りることで、個人の開発効率がここまで上がるとは本当に驚きです。引き続き頑張ります！