Claude Codeでプロジェクト雛形を自動生成する方法

「新しいプロジェクトを立ち上げるたびに同じ設定作業を繰り返している」「create-next-appだとカスタマイズが足りない」——開発者なら誰もが感じるプロジェクト初期化の面倒さを、Claude Codeが解決します。

結論から言えば、Claude Codeを使えば、対話形式でプロジェクトの要件を伝えるだけで、フレームワーク横断のカスタム雛形を数分で生成できます。

この記事はClaude Code完全攻略シリーズの第7回として、プロジェクト雛形の自動生成テクニックを実践的に解説します。

Claude Codeのプロジェクト雛形生成が強力な理由

対話型でカスタマイズ可能

従来のCLIスキャフォールディングツール（create-next-app、cookiecutter等）は選択肢が固定されがちです。Claude Codeでは自然言語で要件を伝えながらリアルタイムにカスタマイズできます。

> Next.jsのApp Routerプロジェクトを作って。
> TypeScript + Tailwind CSS + shadcn/ui。
> 認証はNextAuth.js v5、DBはPrisma + PostgreSQL。
> CI/CDはGitHub Actions。テストはVitest + Playwright。

このように要件を伝えるだけで、すべてが統合された状態のプロジェクトが生成されます。

フレームワーク横断の知識

Claude Codeはフロントエンド・バックエンド・インフラまで幅広い技術スタックの知識を持っています。「FastAPIのバックエンドとNext.jsのフロントエンドをモノレポで」といった複合的な要件にも一貫性のあるプロジェクト構成を提案してくれます。

基本的な使い方をまだ把握していない方は、まずClaude Code入門ガイドを確認してください。

基本的な雛形生成のやり方

Next.js App Routerプロジェクト

> 以下の構成でNext.jsプロジェクトを作成して：
> - Next.js 15 + App Router + TypeScript
> - Tailwind CSS v4 + shadcn/ui
> - src/app/ ディレクトリ構成
> - ESLint + Prettier 設定済み
> - Vitest + Testing Library の設定済み
> - 日本語のREADME.md付き

Claude Codeは以下のような構成を自動生成します：

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   └── ui/
│   └── lib/
│       └── utils.ts
├── tests/
│   └── setup.ts
├── .eslintrc.json
├── .prettierrc
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── vitest.config.ts
├── package.json
└── README.md

FastAPI + PostgreSQLプロジェクト

> FastAPI + PostgreSQLのプロジェクトを作成して：
> - Python 3.12 + FastAPI + SQLAlchemy 2.0
> - Alembicでマイグレーション管理
> - Pydantic v2のスキーマ
> - Docker Compose（API + DB + Redis）
> - pytest + httpx でテスト
> - uvでパッケージ管理

Go + Gin APIサーバー

> Go + GinでREST APIサーバーを作成して：
> - Go 1.23 + Gin + GORM
> - PostgreSQL接続
> - JWT認証ミドルウェア
> - Swaggo でAPIドキュメント自動生成
> - Docker対応（マルチステージビルド）
> - air でホットリロード

どのフレームワークでも、Claude Codeはベストプラクティスに沿った構成を提案してくれます。

CLAUDE.mdでテンプレートルールを定義する

コーディング規約の自動適用

プロジェクトのルートにCLAUDE.mdを配置することで、Claude Codeにプロジェクト固有のルールを記憶させられます。

# CLAUDE.md

## プロジェクト規約

### コーディングスタイル
- TypeScript strict モードを使用
- 関数コンポーネントのみ（クラスコンポーネント禁止）
- named export を優先（default export は page.tsx のみ）
- エラーハンドリングは Result 型パターンを使用

### ディレクトリ構成
- features/ ディレクトリで機能ごとに分割
- shared/ に共通コンポーネント・ユーティリティ
- 各featureは index.ts でre-export

### テスト
- テストファイルは *.test.ts(x) で統一
- カバレッジ80%以上を維持
- E2Eテストは tests/e2e/ に配置

CLAUDE.mdの書き方の詳細はClaude Code CLAUDE.md活用ガイドを参照してください。

ディレクトリ構成の標準化

チームで統一された構成にするために、CLAUDE.mdにディレクトリテンプレートを定義できます：

## 新規featureのディレクトリ構成

src/features/{feature-name}/ ├── components/ # UI コンポーネント ├── hooks/ # カスタムフック ├── api/ # API呼び出し ├── types/ # 型定義 ├── utils/ # ユーティリティ ├── tests/ # テスト └── index.ts # re-export

この構成に従って新しい機能を追加すること。

カスタムスラッシュコマンドで雛形コマンド化

/project:init のようなコマンド作成

.claude/commands/ ディレクトリにMarkdownファイルを配置することで、カスタムスラッシュコマンドを作成できます。

<!-- .claude/commands/project-init.md -->
# プロジェクト初期化

以下の手順でプロジェクトを初期化してください：

1. package.jsonの作成（name, version, scripts を設定）
2. TypeScript設定（tsconfig.json、strict: true）
3. ESLint + Prettier設定
4. Vitest設定
5. GitHub Actions CI設定（.github/workflows/ci.yml）
6. README.md（日本語、プロジェクト概要・セットアップ手順・開発コマンド）
7. .gitignore
8. CLAUDE.md（プロジェクト規約）

引数 $ARGUMENTS を要件として解釈し、適切な技術スタックを選定してください。

使用時は /project:init Next.js + Supabase + Stripe決済 のように呼び出します。

チーム共有テンプレートの管理

カスタムコマンドはGitリポジトリにコミットできるため、チーム全体で統一されたプロジェクトテンプレートを共有できます。

.claude/
├── commands/
│   ├── project-init.md      # プロジェクト初期化
│   ├── feature-add.md       # 機能追加テンプレート
│   ├── api-endpoint.md      # APIエンドポイント追加
│   └── component-create.md  # コンポーネント作成
└── settings.json

Hooks連携で生成後の自動セットアップ

依存パッケージの自動インストール

Claude CodeのHooks機能を使えば、ファイル生成後に自動でコマンドを実行できます。

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "write_file",
        "command": "if [ \"$CLAUDE_FILE\" = \"package.json\" ]; then npm install; fi"
      }
    ]
  }
}

Git初期化 + 初回コミット

プロジェクト生成完了後に自動でGitリポジトリを初期化し、初回コミットまで行うフックも設定できます：

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "write_file",
        "command": "if [ \"$CLAUDE_FILE\" = \"README.md\" ] && [ ! -d .git ]; then git init && git add -A && git commit -m 'Initial project setup by Claude Code'; fi"
      }
    ]
  }
}

実践例：SaaSスターターキットを5分で構築

実際にClaude Codeを使ってSaaSスターターキットを構築する流れを紹介します。

ステップ1：要件を伝える

> SaaSのスターターキットを作って。
> 技術スタック: Next.js 15 + Supabase + Stripe
> 機能: 認証（メール/Google）、サブスクリプション管理、ダッシュボード
> スタイリング: Tailwind CSS + shadcn/ui
> デプロイ: Vercel

ステップ2：Claude Codeが生成する構成を確認

saas-starter/
├── src/
│   ├── app/
│   │   ├── (auth)/login/page.tsx
│   │   ├── (auth)/signup/page.tsx
│   │   ├── dashboard/page.tsx
│   │   ├── pricing/page.tsx
│   │   └── api/webhooks/stripe/route.ts
│   ├── components/
│   ├── lib/
│   │   ├── supabase/
│   │   └── stripe/
│   └── types/
├── supabase/
│   └── migrations/
├── .env.example
└── ...

ステップ3：追加カスタマイズ

> ランディングページも追加して。ヒーローセクション、
> 機能紹介（3カラム）、料金プラン比較表、FAQセクション。

プロンプトエンジニアリングのコツはClaude Code プロンプトエンジニアリングで詳しく解説しています。

このように、対話しながら段階的に要件を追加できるのがClaude Codeの強みです。5分程度で本格的なSaaSスターターキットの雛形が完成します。

まとめ｜プロジェクト初期化を自動化しよう

Claude Codeを使ったプロジェクト雛形生成のポイントを振り返ります：

1. 自然言語で要件を伝えるだけでフレームワーク横断の雛形を生成
2. CLAUDE.mdでチームのコーディング規約やディレクトリ構成を標準化
3. カスタムスラッシュコマンドで再利用可能な雛形コマンドを作成
4. Hooksで依存インストールやGit初期化を自動化

プロジェクト初期化にかかる時間を数時間 → 数分に短縮することで、本来注力すべきビジネスロジックの実装に集中できるようになります。

次回のシリーズではClaude Codeのカスタムスキル開発について深掘りします。

出典: Anthropic公式ドキュメント「Claude Code」（2026年3月更新）