このlessonを読み終えると、以下の3つを自信を持ってできるようになります。

• ▸✅ Cursor vs Copilot vs Claude Code の選択基準
• ▸✅ MCPサーバー（filesystem · github · postgres）の設定
• ▸✅ 各ツールの コンテキストウィンドウ のサイズと価格

学習目標を チェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。

核心の一行

「最高のツール」ではなく、「自分の状況に合ったツール」。選択を誤ると トークン浪費 + 学習時間が爆増。

5秒で決めるフローチャート

初めて始める？
   │
   ├─ YES → Cursor 無料プラン（月$0、14日間 Pro 体験）
   │         └─ Tab 自動補完に慣れたら → Composer に挑戦
   │
   └─ NO ──┐
           │
           ├─ UI/デザインを素早く？
           │    └─ YES → v0.dev（Vercel）または Lovable
           │
           ├─ フルスタック MVP を1時間で？
           │    └─ YES → Bolt.new（StackBlitz）
           │
           ├─ ターミナルに慣れている + 自律作業？
           │    └─ YES → Claude Code（npm グローバルインストール）
           │
           ├─ 会社・エンタープライズ？
           │    └─ YES → GitHub Copilot Business
           │              （法的責任・IP indemnification）
           │
           └─ オープンソースのみ？
                └─ Cody Free、Continue.dev

おすすめの組み合わせ（月額費用基準）

🟢 無料 — 学生・就活生

• ▸Cursor 無料プラン — Tab 自動補完無制限
• ▸ChatGPT 無料 — 一般対話・デバッグ支援
• ▸v0 無料 — 月次UI生成枠
• ▸GitHub Copilot — 学生認証で無料

💚 $20/月 — 本格的な学習

• ▸Cursor Pro $20 — Composer・高度なモデルが無制限
• ▸または Claude API + Claude Code — 使った分だけ（平均 $5-15/月）

💎 $40-60/月 — プロ開発者

• ▸Cursor Pro + Claude API + ChatGPT Plus
• ▸タスクごとに 最適なツール を使い分ける

各ツールの 本当の強み

まとめ

• ▸まずは Cursor 無料 から
• ▸UI = v0、フルスタック MVP = Bolt
• ▸自律エージェント = Claude Code
• ▸エンタープライズ = Copilot

Cursor（Anysphere、2023年）— VS Code フォーク + AIネイティブ

• ▸Tab: コード自動補完（次の行を予測）
• ▸Cmd+K: インライン編集（選択範囲を変更）
• ▸Composer: 複数ファイルの編集・リファクタリング
• ▸Chat: 右サイドバーでの対話
• ▸Rules: .cursorrules によるプロジェクト別ルール
• ▸価格: $20/月、$400M ARR（2025年）、開発者100万人以上

Windsurf（Codeium、2024年）— Cursor の代替

• ▸Cascade: Composer より自律的
• ▸Flow: 複数ファイルの変更追跡
• ▸Cursor よりやや 積極的（エージェント型）

GitHub Copilot（MS + OpenAI、2021年）— エンタープライズ標準

• ▸VS Code・JetBrains・Vim・Neovim と統合
• ▸Copilot Chat（対話）+ Workspace（複数ファイル）
• ▸エンタープライズライセンス・法的保護（IP indemnification）
• ▸価格: 個人 $10/月、企業 $19/月

選択基準:

Claude Code（Anthropic、2024年）— ターミナルの自律エージェント

• ▸claude コマンド1行で実行
• ▸プロジェクト全体 のコンテキストを自動的に把握（CLAUDE.md を読み込む）
• ▸複数ファイルの編集・実行・テスト・コミットまで自律的に処理
• ▸MCP統合: DB・Slack・GitHub ツールを呼び出し
• ▸Skills: ドメイン特化ツール（claude-api・gstack など）
• ▸権限モード: ask・acceptEdits・plan・bypassPermissions

Aider（オープンソース、2023年）— Claude/GPT ペアプログラマー

• ▸CLIツール、git統合
• ▸変更のたびに自動コミット（ロールバックが簡単）
• ▸リポジトリマップを自動生成

Cursor vs Claude Code:

> 💡 2025年のトレンド: 両方使う。執筆 は Cursor（Tab が速い）、複雑な作業 は Claude Code。

v0（Vercel、2024年）— UIコンポーネント生成

• ▸プロンプト → React + Tailwind コンポーネントを即時生成
• ▸shadcn/ui ベース（デザインシステムの一貫性）
• ▸即時デプロイ（Vercel統合）
• ▸価格: $20/月

Bolt（StackBlitz、2024年）— フルスタックアプリ生成

• ▸プロンプト → Next.js・React・Vue の完全なアプリ
• ▸ブラウザで実行（WebContainer）
• ▸DB・認証統合（Supabase・Neon）

Lovable（スウェーデン、2024年）— 非開発者フレンドリー

• ▸フルスタックアプリ生成 + 自然言語による修正
• ▸GitHub への自動プッシュ・デプロイ（Netlify）
• ▸「AIバージョンの Wix」

3ツールの比較:

活用パターン:
1. アイデア検証: Bolt で30分で動くMVP
2. UIモックアップ: v0 でさまざまなコンポーネントのバリエーション
3. 社内ツール: Lovable で非開発者も制作可能

> 💡 完成したコード ではありません。プロトタイプ・モックアップ・出発点。本番の production は Cursor/Claude Code で補強してください。

MCP（Anthropic、2024年標準化）— LLM ↔ 外部ツール の標準プロトコル。

なぜ標準化が必要か？ すべてのツール・DB・サービスを 個別に 統合するとN×M問題が発生 → MCP が 共通インターフェース を提供。

3つの機能:

トランスポート:

• ▸stdio — ローカルプロセス（Claude Desktop・Claude Code）
• ▸HTTP/SSE — リモートサーバー（チーム共有）
• ▸WebSocket — 双方向リアルタイム

既存のMCPサーバー:

• ▸@modelcontextprotocol/server-filesystem — ローカルファイル
• ▸@modelcontextprotocol/server-postgres — データベースクエリ
• ▸@modelcontextprotocol/server-github — Issues・PR
• ▸Slack・Notion・Linear・Figma など多数

自作する場合（Python・Node 両方SDKあり）:

# server.py
from mcp.server import Server
app = Server("my-tools")

@app.tool()
async def get_user(id: str) -> dict:
    return await db.users.find(id)

claude_desktop_config.json に登録 → Claudeがツールとして使用。

> 💡 2025年の標準: VS Code・JetBrains・Cursor がすべてMCPを採用。LSP（2016年）のように AIツールの共通インターフェース。

なぜ必要か

毎回の会話で「私のプロジェクトはNext.js 15・TypeScript・Drizzle・Postgresを使って...」と繰り返すのは トークンの浪費 + 時間の浪費。プロジェクトルートのファイル1つ が すべての会話に自動適用。

ファイルの場所

• ▸Claude Code → CLAUDE.md（プロジェクトルート）
• ▸Cursor → .cursorrules または .cursor/rules/*.md（最新）
• ▸GitHub Copilot → .github/copilot-instructions.md
• ▸Aider → CONVENTIONS.md

実践テンプレート（コピーして始める）

# プロジェクトガイド

## スタック
- **フレームワーク**: Next.js 15（App Router）
- **言語**: TypeScript（strict mode）
- **スタイル**: Tailwind CSS + shadcn/ui
- **DB**: PostgreSQL + Drizzle ORM
- **認証**: NextAuth.js v5（OAuth: Google・Kakao）
- **デプロイ**: Vercel
- **テスト**: Vitest + Playwright

## フォルダ構造
\\`\\`\\`
src/
├── app/              # App Router ページ + API
├── components/       # React コンポーネント
│   ├── ui/           # shadcn ベース
│   └── features/     # ドメイン別
├── lib/              # ユーティリティ・DBクライアント
├── hooks/            # カスタムフック
└── server/           # サーバー専用（DBアクション）
\\`\\`\\`

## コーディング規約
- コンポーネント: `function` 宣言（アロー関数禁止）
- export: named export 推奨（default は page.tsx のみ）
- import 順序: external → @/ → relative
- コメント: 日本語OK。複雑なロジックのみ
- 変数名: camelCase、定数は UPPER_CASE
- 型: `type` 優先、拡張は `interface`

## 禁止パターン
- ❌ `any` 型の使用
- ❌ `var`（const/let のみ）
- ❌ React `useEffect` 内での fetch（server component または react-query を使用）
- ❌ テストのない新規関数
- ❌ 「TODO」コメント（Linear/GitHub Issues を使用）
- ❌ プロダクションコードに console.log（logger を使用）

## ドメイン用語
- ユーザー = User（会員・ゲスト共通）
- 学習者 = Learner（User のサブタイプ）
- レッスン = Lesson
- 進捗 = Progress

## 環境変数
- すべて `.env.local` に（`.env.example` と同期）
- クライアント側は `NEXT_PUBLIC_` プレフィックスのみ

## 作業フロー
1. 新機能 → まず spec.md を書く（簡単でも）
2. 小さな単位のPR — 200行以内
3. コミット規約: feat/fix/refactor/test/chore

このファイル の効果

このファイルが ある場合 と ない場合 で同じリクエストをすると:

❌ ない場合:
> 私: 「ログインAPIを作って」
> AI: 「どのフレームワーク？DB？認証方式は？」（質問が殺到）
> 私: 5回に分けて説明...
> 出力トークン: ~5000

✅ ある場合:
> 私: 「ログインAPIを作って」
> AI:（CLAUDE.md を読んで NextAuth + Drizzle + Postgres で正確に実装）
> 出力トークン: ~800

6倍の節約 + 一発で完了。

まとめ

• ▸CLAUDE.md = プロジェクトのすべてのコンテキストの唯一の真実
• ▸一度書けば → すべての会話に自動適用
• ▸トークン5〜10倍の節約・精度向上
• ▸チームに加わった人も AIを通じて素早くオンボーディング

MCPとは何か — 改めて整理

MCP（Model Context Protocol） = Claude・Cursor・VS Code などのLLMに 外部ツール を標準的な方法で接続する仕組み。一度設定すれば どこでも同じツール が使える。

最もシンプルなインストール — ファイルシステム MCP

Claude Desktop の claude_desktop_config.json ファイルを編集:

場所:

• ▸macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• ▸Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/myname/projects"
      ]
    }
  }
}

→ Claudeが 自分の projects フォルダ のファイルを 直接読み書きできる ようになる。

GitHub MCP の追加

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    }
  }
}

→ Claudeが Issues 一覧取得・PR作成・コード検索 が可能になる。GitHubトークンは settings > Developer settings > Personal access tokens で取得。

Slack MCP の追加

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-...",
        "SLACK_TEAM_ID": "T01ABCDEFGH"
      }
    }
  }
}

自作する場合 — 最もシンプルなMCPサーバー（Python）

# server.py — 現在時刻を教えるMCP
from mcp.server.fastmcp import FastMCP
from datetime import datetime

mcp = FastMCP("time-server")

@mcp.tool()
async def get_current_time(timezone: str = "Asia/Seoul") -> str:
    \"\"\"現在時刻を取得\"\"\"
    return datetime.now().isoformat()

if __name__ == "__main__":
    mcp.run()

pip install mcp
python server.py

設定ファイルに追加:

{
  "mcpServers": {
    "time": {
      "command": "python",
      "args": ["/path/to/server.py"]
    }
  }
}

→ Claudeに「今の時間を教えて」と聞くと 直接呼び出す。

よくある落とし穴

1. JSONの構文エラー — カンマの書き忘れ。VS Code で .json として開いて構文確認
2. command のパス — npx が PATH に通っていなければ絶対パスを使用（/usr/local/bin/npx）
3. 権限不足 — ファイルシステム MCP に ルートフォルダを指定しない — セキュリティリスク
4. 再起動が必要 — 設定変更後は Claude Desktop を完全に再起動
5. ログの確認 — Claude Desktop > Developer > Open MCP Logs

トークンの観点から見たMCPの価値

• ▸繰り返し検索なし: 「そのファイルはどこ？」と毎回聞く必要なし。MCPが 直接見つける
• ▸コンテキスト自動化: 毎回コードをコピペする必要なし。MCPが 必要なときに読む
• ▸自動化: 同じ作業（PR作成・Issue閉じる など）の 繰り返し説明ゼロ

まとめ

• ▸MCP = LLM ↔ 外部ツールの 標準プロトコル
• ▸5分で filesystem・GitHub・Slack を接続
• ▸Python・Node で 数十行 で自作MCPサーバーを作成
• ▸トークン節約 + 自動化効果

このlessonの概念を理解すれば、AIに 具体的に 指示できます。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「Cursor + Claude Code を同時活用するワークフローを提案して」
• ▸「このプロジェクトに適したMCPサーバー5つ + 設定ファイルを作って」

なぜこれがトークンを減らすのか

概念を知らなければ、AIの回答を受け取っても 「それって何ですか？」 とまた聞き直す必要があります。その「聞き直し」がトークンを消費します。概念を一度理解しておけば、会話が一度で終わります。