個人開発者向けCLAUDE.mdテンプレート

個人開発でCLAUDE.mdが必要な理由

「一人開発だからCLAUDE.mdは不要」と思っていませんか？実はそうではありません。個人開発でも以下の理由でCLAUDE.mdは効果的です。

1. 記憶の外部化: 数ヶ月前に作ったプロジェクトに戻ったとき、「このプロジェクトはどんな構成だっけ？」というコンテキストをClaudeに即座に伝えられます
2. 同じ説明の省略: 「このプロジェクトはTypeScriptで、テストはVitest、スタイルはTailwindで…」を毎回説明しなくて済みます
3. 一貫性の維持: 気分によってコードスタイルがブレるのを防げます

Tip

個人開発のCLAUDE.mdは「チーム向け」より短くてOKです。自分だけが読む（Claudeだけが参照する）のでシンプルに書きましょう。

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。※CLAUDE.md: プロジェクトのルートに置くClaude Code専用の設定ファイル。プロジェクト固有のルールやコンテキストを記述する。※コンテキスト: Claudeが一度に記憶・参照できる会話・コードの範囲。上限を超えると古い情報が失われる。

テンプレート本体（シンプル版）

日々使うのに最適な、軽量なテンプレートです。

# [プロジェクト名]

## これは何

[1〜2文でプロジェクトの説明]

例: 個人の読書記録を管理するWebアプリ。本を検索して読書ノートを残せる。

## 技術スタック

- Next.js 14 (App Router) + TypeScript
- Tailwind CSS + shadcn/ui
- Supabase (DB + Auth)
- Vercel (デプロイ)

## よく使うコマンド

```bash
npm run dev          # 開発サーバー
npm run build        # ビルド確認
npm run test         # テスト
npx supabase start   # ローカルSupabase起動

※デプロイ: 開発したコードを本番サーバーに公開・適用すること。※npm: Node.jsのパッケージ管理ツール。`npm install` でライブラリをインストールする。

ディレクトリ

src/
├── app/             # ページ（App Router）
├── components/      # コンポーネント
└── lib/             # ユーティリティ・DB

自分のこだわり

• コンポーネントは200行を超えたら分割する
• コメントは「なぜ」を書く（「何を」はコードを見ればわかる）
• 型定義は src/types/ にまとめる
• 環境変数は .env.local（絶対コミットしない）

※コミット: Gitでファイルの変更を履歴として記録する操作。※環境変数: APIキーやデータベース接続情報など、コードに直接書きたくない値をOSやサーバーに設定する仕組み。

注意事項

• TODO: コメントはGitHub Issuesと連携して // TODO: #番号 で残す
• console.log はデバッグが終わったら必ず削除

## テンプレート本体（詳細版）

複数のサービスを使ったり、少し複雑なプロジェクト向けの詳細版です。

```markdown
# [プロジェクト名] — Claude Code 設定

作成日: 2026年XX月XX日
最終更新: 2026年XX月XX日

## プロジェクト概要

### 何を作っているか

[プロジェクトの目的・解決する問題を2〜3文で]

### 現在のフェーズ

- [ ] アイデア段階
- [x] MVP開発中
- [ ] ベータ版
- [ ] 公開済み（運用中）

## 技術スタック詳細

フロントエンド:

• Next.js 14.2 (App Router)
• React 18.3
• TypeScript 5.4 (strict: true)
• Tailwind CSS 3.4
• shadcn/ui コンポーネント

バックエンド:

• Next.js API Routes / Server Actions
• Prisma 5.x
• PostgreSQL (Supabase)
• Redis (Upstash, キャッシュ用)

外部サービス:

• Stripe (決済)
• Resend (メール送信)
• Cloudflare R2 (ファイルストレージ)

テスト:

• Vitest
• Playwright (E2E)

## ファイル・ディレクトリ構造

src/ ├── app/ │ ├── (marketing)/ # マーケティングページ（LP等） │ ├── (app)/ # ログイン後の画面 │ ├── api/ # APIエンドポイント │ └── layout.tsx ├── components/ │ ├── ui/ # shadcn/uiの拡張コンポーネント │ └── [機能名]/ # 機能単位のコンポーネント ├── hooks/ # カスタムReactフック ├── lib/ │ ├── db.ts # Prismaクライアント │ ├── auth.ts # 認証設定 │ └── utils.ts # 汎用ユーティリティ ├── types/ # TypeScript型定義 └── config/ # アプリ設定

## コーディングの好み

### 関数スタイル

```typescript
// ✅ アロー関数（コンポーネント以外）
const calculatePrice = (qty: number, price: number): number => qty * price;

// ✅ function宣言（コンポーネント・サーバーアクション）
export default function ProductPage() { ... }
export async function createOrder(data: FormData) { ... }

インポートの順序

// 1. React/Next.js
import { useState, useEffect } from 'react';
import Image from 'next/image';

// 2. 外部ライブラリ
import { clsx } from 'clsx';
import { formatPrice } from '@/lib/utils';

// 3. 内部コンポーネント
import { Button } from '@/components/ui/button';
import { ProductCard } from '@/components/product/ProductCard';

// 4. 型定義
import type { Product } from '@/types';

エラーハンドリングのパターン

Server Actionsでは Result 型を使う：

type Result<T> =
  | { success: true; data: T }
  | { success: false; error: string };

async function createPost(title: string): Promise<Result<Post>> {
  try {
    const post = await db.post.create({ data: { title } });
    return { success: true, data: post };
  } catch {
    return { success: false, error: '投稿の作成に失敗しました' };
  }
}

※エンドポイント: APIにアクセスするためのURL。例: `/api/users` や `/api/posts/123` など。※キャッシュ: 一度取得したデータを一時的に保存しておき、同じリクエストへの応答を速くする仕組み。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

データベース設計の方針

• 論理削除は使わない（必要になったときに追加）
• created_at、updated_at は全テーブルに必ず追加
• 外部キーには必ずインデックスを追加
• カラム名はスネークケース（Prismaの規約）

※インデックス: データベースの検索を高速化するための索引データ。適切に設定しないとクエリが遅くなる。

環境変数の管理

# ローカル開発
.env.local        # ← このファイルを使う（.gitignore済み）

# 環境変数の型安全化（src/env.ts）
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  server: {
    DATABASE_URL: z.string().url(),
    STRIPE_SECRET_KEY: z.string().min(1),
  },
  client: {
    NEXT_PUBLIC_APP_URL: z.string().url(),
  },
  runtimeEnv: process.env,
});

※型安全: 変数や関数の型をコンパイル時にチェックし、型の不一致によるバグを防ぐ設計方針。

Claudeへのお願い

• 新機能を実装するときは、まず「どこにファイルを置くか」から確認して
• 既存コードを変更するときは、変更前後の差分がわかるようにコメントして
• テストを書くときは Vitest + React Testing Library のパターンで
• 迷ったらシンプルな実装を優先して（YAGNI）
• 型推論が効く場合は明示的な型注釈を省略してOK

現在進行中のこと

• [機能名]: 実装中
• [機能名]: 完了
• [バグ]: 要調査

（このセクションは作業開始時に更新してください）

## カスタマイズのポイント

### 「現在進行中のこと」セクションの活用

個人開発での強力な使い方として、CLAUDE.mdに今取り組んでいる課題を書いておくことがあります。

```markdown
## 現在の課題

StripeのWebhookが本番環境で失敗している。
症状: `400 Bad Request`
エラー: `Webhook signature verification failed`
調査中: 環境変数の問題か、タイムスタンプのズレか

このように書いておくと、セッションをまたいでもClaudeがコンテキストを理解した状態で作業を再開できます。

「自分だけのルール」セクション

自分のこだわりを書くのは非常に効果的です。

## 自分のこだわり

- コンポーネントのpropsは分割代入で受け取る
- `useEffect` は最後の手段（可能な限り避ける）
- APIのレスポンスはzodでバリデーションする
- エラーメッセージは日本語で（ユーザー向け）英語で（開発者向け）

Note

個人開発のCLAUDE.mdは「作業日記」的に使うこともできます。今日の作業状況や課題を更新しておくと、Claudeが常に最新のコンテキストを持って作業できます。