💡

「個人開発×Claude Code」ナポレオン開発日記 #1 環境整備編

に公開
Next.js
GitHub Actions
Supabase
Claude
idea

こんにちは。
このシリーズでは、Claude Code を使いながらトランプカードゲーム「4人用ナポレオン」のWebアプリを個人開発していく過程を日記形式でまとめていきます。

Claude Codeを使って馴染みのない言語を使った開発をしてみたかったので作成しています。
この4人用ナポレオンを選んだ理由は以下となります。

  • 4人用ナポレオンアプリはなかった（通常は5人版）
  • 作った後に自分が暇つぶしに遊べる（重要）
  • セキュリティリスクがほとんどない（個人認証などは今の所必要ない）
  • 個人開発としてはちょうどいい規模感のソースコード量になりそうだった

通常、トランプのナポレオンは5人版なのですが、私が所属していた大学のサークルではローカルルール盛り盛りの4人用ナポレオンが流行っており、まずは私個人が遊んで楽しそうなアプリを作りたいと思いました。

第1回は「環境整備編」。
Claudeにほぼ丸投げして環境を整えたらどうなったか、その体験談です。
結論というほどではないですが、ほぼ丸投げでもそれなりに環境構築出来て感動しました。

Claudeに環境整備を頼んでみた

最初にClaudeにこう聞きました。（要約）

Next.js + TypeScriptで4人用ナポレオンを作りたい。
必要な環境をインストールしてほしい

Claudeがインストールしてくれた環境はこちら（要約）。

Next.js
Tailwind CSS
Jest（テスト）
Biome（Lint & Formatter）

ほぼ勝手にインストールしてくれました。

その他にも、

Supabase の設定を入れてほしい

で、Supabase用のファイルを作ったり、

developブランチにマージされたらmainブランチへのマージ用Releaseブランチを作ってほしい

で、GitHub Actions用のymlファイルを作ってくれました。

実際に整えた開発環境

Claudeの指示を叩き台にしながら、次のように環境を構築しました。

Node.js / npm のセットアップ
Next.js + Tailwind CSS の初期化
Supabase プロジェクト作成
Biome, Husky を導入
GitHubActionsを導入（個人開発ではあんまり必要ないのですが遊び感覚で作ってます）

Claudeとのやり取り例

こんな感じでやっています。日本語でもほぼ問題なく出来ます。すごいですねぇ。

私:
LintとFormatterはESLintとPrettierより新しいものを導入してほしい
Claude:
Biomeですね、こちらを使いましょう、インストールします。

学び

  • Claudeに環境構築を丸投げしながらエラー文を打ち込んでいくことで早く進める
    • いったんは動くものを作って後で修正していく進め方にする
  • エラーはそこそこ出るので指示したらすぐ動くようになるわけではない
  • プロトタイプを作るスピードはめちゃくちゃ早いので初期構築の手間がめちゃくちゃ減った

課題

  • 開発するファイル量が大きくなるほど読み込む量が多くなってすぐLimitになってしまう
    • /compactや/clearで読み込む量を減らせるとのことで試してみる
  • 実装したことを.mdにまとめているがもっといい方法がありそう
  • コメントや実装が冗長になりがちなので適宜リファクタリングが必要
  • 勝手にセキュリティレベルを下げる実装をしがちなので人間の目で確認する必要がある
  • UIの説明が英語になるのでどこかで日本語にするか悩み中

まとめ

開発日記 #1 では Claudeと一緒に環境整備した話 を紹介しました。

次回（#2）は「実際のナポレオンゲーム処理の実装」をテーマに書く予定です。
Claudeとのやり取りのあれこれをまとめていきます。

リポジトリはこちら 👉 GitHub

Discussion