AIコーディングツール完全比較2026〜GitHub Copilot/Cursor/Claude Code/Cline徹底検証〜

「AIコーディングツールが乱立しすぎて、結局どれを選べばいいかわからない」——2026年のエンジニアなら誰もが直面する悩みです。GitHub Copilot、Cursor、Claude Code、Cline、Aider、Continue.dev、Codeium / Windsurf、Tabnine……。それぞれに思想・得意分野・料金が異なり、選び方を間違えると年間数万円の課金が無駄になりかねません。本記事では、現役で複数ツールを実戦投入しているエンジニア視点で、各ツールの特徴・実コード・プロンプト例・料金・選び方を徹底比較します。コードブロック40本以上・実プロンプト例20種掲載、コピペで動く実践型ガイドです。

1. AIコーディングツール2026年勢力図

2026年現在、AIコーディングツールは大きく4つの世代に分類できます。

世代マップ

• 第1世代(2021〜2022):補完特化型 GitHub Copilot、Tabnine。行単位・関数単位のオートコンプリート。
• 第2世代(2023):チャット統合型 ChatGPT plugins、Codeium、Continue.dev。エディタとチャットの統合。
• 第3世代(2024):エージェント型 Cursor Composer、Cline、Aider。複数ファイルを横断して編集できる「自律エージェント」化。
• 第4世代(2025〜2026):ターミナルネイティブ型 Claude Code(Anthropic公式CLI)、Windsurf Cascade。ターミナル/IDEの境界を超え、ファイルシステム・Git・テスト実行まで一気通貫。

2026年現在の主力モデル

• Anthropic Claude Opus 4.5 / Sonnet 4.5 — 長文コンテキスト・コード理解で最強クラス。
• OpenAI GPT-5 / o3 — 汎用・数学的推論で強い。
• Google Gemini 2.5 Pro — マルチモーダル・スプレッドシート/画像理解。
• DeepSeek V3、Qwen 3 Coder — オープン系・自前ホスト可。

2. ツール比較サマリ表

まず一覧表で全体像を掴みましょう。

ツール	形態	得意分野	料金(個人)	2026推奨度
GitHub Copilot	IDE拡張	補完・PRレビュー	$10/月	★★★★☆
Cursor	専用IDE(VSCode fork)	マルチファイル編集	$20/月	★★★★★
Claude Code	CLI	ターミナル統合・大規模リファクタ	API従量 or $20/月	★★★★★
Cline	VSCode拡張	自律エージェント	API従量	★★★★☆
Aider	CLI	Git統合・差分編集	API従量	★★★★☆
Continue.dev	VSCode/JetBrains	OSS・ローカルLLM対応	無料(API別)	★★★☆☆
Codeium / Windsurf	IDE/専用IDE	無料補完・Cascade	無料/$15	★★★★☆
Tabnine	IDE拡張	セルフホスト・企業向け	$12/月〜	★★★☆☆

3. GitHub Copilot

GitHub Copilot は最も歴史が長く、補完精度・IDE統合・組織導入実績で群を抜きます。2026年現在、Copilot Chat / Copilot Edits / Copilot Workspace の3本柱で進化中です。

3.1 セットアップ

// VSCodeでCopilotを有効化
// 1. 拡張機能から「GitHub Copilot」をインストール
// 2. コマンドパレット → "GitHub Copilot: Sign in"
// 3. ブラウザで認証

// .vscode/settings.json
{
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "scminput": false
  },
  "github.copilot.advanced": {
    "length": 500,
    "temperature": "0.1"
  }
}

3.2 補完の使用例

Copilotはコメントから関数を生成するのが得意です。

// 配列をN件ずつのチャンクに分割するユーティリティ
// Copilotがここから自動補完 ↓
function chunk<T>(array: T[], size: number): T[][] {
  if (size <= 0) throw new Error("size must be positive");
  const result: T[][] = [];
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size));
  }
  return result;
}

// 使用例
console.log(chunk([1, 2, 3, 4, 5, 6, 7], 3));
// → [[1,2,3], [4,5,6], [7]]

3.3 Copilot Chatでリファクタリング

// 選択範囲を選んで Ctrl+I → "型を厳密化して null安全に"
// Before
function getUserName(user) {
  return user.name.toUpperCase();
}

// After (Copilot Chat提案)
function getUserName(user: { name?: string | null } | null | undefined): string {
  if (!user?.name) return "";
  return user.name.toUpperCase();
}

3.4 Copilot CLI

# ターミナルから自然言語でコマンド生成
$ gh copilot suggest "直近1週間のコミットを著者ごとに集計"
# → git log --since="1 week ago" --pretty=format:"%an" | sort | uniq -c | sort -rn

$ gh copilot explain "find . -type f -mtime -7 -name '*.ts'"
# → 過去7日以内に更新された.tsファイルを再帰検索します

4. Cursor

CursorはVSCodeをforkした「AIネイティブIDE」。2026年時点で、開発者満足度・乗り換え率で世界1位です。Composerによるマルチファイル編集が圧倒的。

4.1 Cursor Composerの基本

# Cursor Composerプロンプト例
@Codebase Users一覧ページを Next.js App Routerで作って。
- /app/users/page.tsx にサーバーコンポーネントで実装
- /app/users/[id]/page.tsx に詳細ページ
- /lib/users.ts にfetchロジック
- Prismaを使用 (schema.prismaは既存)
- TypeScript strict, Tailwind, shadcn/ui Table

このプロンプト1発で、4ファイル同時生成・既存スキーマ参照・shadcn/uiコンポーネント自動import まで一気にやってくれます。

4.2 .cursorrules で組織知を仕込む

# .cursorrules (プロジェクトルート)
# このプロジェクトのコーディング規約

## 言語/フレームワーク
- Next.js 15 (App Router)
- TypeScript strict mode
- Tailwind v4 + shadcn/ui
- Prisma + PostgreSQL

## 命名
- ファイル: kebab-case
- React component: PascalCase
- hook: useXxx 形式必須

## 禁止事項
- any型禁止 (やむを得ない場合は unknown + 型ガード)
- console.log を本番コードに残さない (logger.info を使用)
- export default禁止 (named exportのみ)

## API設計
- /app/api 配下に Route Handlerを配置
- レスポンスは { data, error } 形式で統一
- zodでvalidation必須

4.3 Cursorのインライン編集 (Cmd+K)

// 選択して Cmd+K → "loading/error状態を追加してSuspenseで包む"
"use client";
import { useEffect, useState } from "react";

type User = { id: number; name: string };

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch("/api/users")
      .then((r) => {
        if (!r.ok) throw new Error("failed");
        return r.json();
      })
      .then((data) => setUsers(data))
      .catch((e) => setError(e))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>読み込み中…</p>;
  if (error) return <p>エラー: {error.message}</p>;
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

4.4 @ メンションで文脈注入

# Cursorチャットで使える @ コマンド

@Files       特定ファイルを文脈に含める
@Folders     フォルダ単位
@Codebase    プロジェクト全体を semantic search
@Docs        ドキュメントURL登録済みのものを参照
@Git         直近コミット・diffを参照
@Web         Web検索結果を取り込む
@Lint        現在のlintエラーを参照

# 実例
@Files src/lib/auth.ts @Git
このauth.tsを直近のmainブランチからの変更分と整合させて、
壊れたテストを修正して。

5. Claude Code(CLI)

2025年に登場した Anthropic 公式 CLI。ターミナルがそのままAIエージェントになる革命的ツール。大規模リファクタや複雑な調査で他を圧倒します。

5.1 インストールと初回起動

# npmでインストール (Node 18+)
$ npm install -g @anthropic-ai/claude-code

# プロジェクトルートで起動
$ cd my-project
$ claude

# 初回はAPIキーを求められる
> Enter your Anthropic API key: sk-ant-xxx

# 起動後はそのまま自然言語で指示
> このリポジトリ全体を読み、READMEを書いて
> package.json から未使用の依存を全部削除して
> tests/ 配下を vitest から jest に書き換えて

5.2 CLAUDE.md でプロジェクト記憶

# CLAUDE.md (プロジェクトルートに配置)
# このプロジェクトについてClaudeに伝えたいこと

## 起動
- 開発: pnpm dev
- ビルド: pnpm build
- テスト: pnpm test

## アーキテクチャ
- /app: Next.js App Router (UI)
- /lib: ドメインロジック (Reactに依存しない)
- /db: Prismaスキーマ + マイグレーション

## ルール
- 型は strict、any禁止
- テストはvitestで書く
- Editのあとは必ず pnpm typecheck を実行して結果を確認

5.3 実プロンプト:大規模リファクタ

# Claude Codeセッション例

> src/components/ 配下のクラスコンポーネントを全部関数コンポーネント+hooksに書き換えて。
  - 段階的に: まず一覧化→1件ずつ変換→テスト実行
  - 各変換でgit commitを切って
  - 失敗したテストは別ブランチに退避

# Claude Codeが自動で実行する流れ
# 1. Glob src/components/**/*.tsx
# 2. Grep "class .* extends" でクラスコンポーネント抽出
# 3. 1ファイルずつ Read → Edit → pnpm test → git commit
# 4. 完了レポートを出力

5.4 サブエージェント・並列タスク

# Claude Code 2026新機能: Task tool
> 以下を3つのサブエージェントに並列に振って:
  1. /lib/payment 配下のテストカバレッジを95%まで上げる
  2. /lib/auth 配下の脆弱性をチェック (XSS/CSRF/SQLi)
  3. /docs 配下を最新のAPIに合わせて更新

# 各サブエージェントが独立コンテキストで実行→結果を統合

5.5 Hooksで自動化

// ~/.claude/settings.json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          { "type": "command", "command": "pnpm lint --fix" },
          { "type": "command", "command": "pnpm typecheck" }
        ]
      }
    ],
    "Stop": [
      {
        "hooks": [
          { "type": "command", "command": "git status" }
        ]
      }
    ]
  }
}

6. Cline(VSCode拡張)

Clineは「VSCode内で動く自律エージェント」。Claude Code 同様にファイル操作・ターミナル実行ができますが、エディタ統合が魅力。OSSで透明性も高い。

6.1 Clineのセットアップ

# インストール
# 1. VSCode拡張から "Cline" を検索 (旧名 Claude Dev)
# 2. インストール後、サイドバーのClineアイコンをクリック
# 3. API Provider を選択

# 使えるプロバイダ
- Anthropic (Claude Opus/Sonnet)
- OpenAI (GPT-5/o3)
- OpenRouter (一括ルーティング)
- AWS Bedrock / GCP Vertex
- Ollama (ローカルLLM)
- LM Studio (ローカルLLM)

6.2 Clineに実プロジェクトを任せる

# Clineプロンプト例
このNext.jsプロジェクトに「お問い合わせフォーム」を実装してください:

要件:
- /app/contact にページ
- React Hook Form + zod でvalidation
- Resend APIでメール送信 (env: RESEND_API_KEY)
- 送信成功でtoast表示 (sonner)
- スパム対策: hCaptcha組み込み

進め方:
1. 必要な依存をpnpm addでインストール
2. .env.exampleにキーを追加
3. /app/api/contact/route.ts でPOSTハンドラ実装
4. /app/contact/page.tsx でフォーム実装
5. 動作確認のためpnpm devを起動

各ステップ完了時に内容を要約してから次へ進んでください。

6.3 Clineの「Plan / Act」モード

# Plan モード (Cline 2.0新機能)
# まず実装計画だけ立てさせる → 人間レビュー → Act モードで実行

# Plan モードで出てくる例:
=== 実装計画 ===
1. dependencies: react-hook-form, @hookform/resolvers, zod,
   resend, sonner, @hcaptcha/react-hcaptcha
2. ファイル作成:
   - app/contact/page.tsx        (フォームUI)
   - app/contact/schema.ts       (zodスキーマ)
   - app/api/contact/route.ts    (POSTハンドラ)
   - components/ui/contact-form.tsx
3. env追加: RESEND_API_KEY, HCAPTCHA_SECRET
4. テスト: /app/contact をブラウザで開いて手動確認

承認しますか? [y/n]

7. Aider

Aiderは「Git統合×CLI」の質実剛健派。差分コミットを自動化し、AIによる編集を全部gitで追えるようにする思想。CIで動かしやすいのも強み。

7.1 セットアップ

# pipxでインストール
$ pipx install aider-chat

# プロジェクトで起動
$ cd my-project
$ aider --model claude-sonnet-4-5

# 編集対象ファイルを add
> /add src/lib/user.ts src/lib/auth.ts
> /add tests/auth.test.ts

# ファイル単位の自然言語編集
> auth.tsの login関数に rate limit (1分5回) を追加して
> 同じ変更に対応するテストも追加して

7.2 Aiderの.aider.conf.yml

# .aider.conf.yml
model: anthropic/claude-sonnet-4-5
weak-model: anthropic/claude-haiku-4-5
edit-format: diff
auto-commits: true
dirty-commits: true
gitignore: true
attribute-author: true
attribute-committer: false
test-cmd: pnpm test
lint-cmd: pnpm lint --fix

7.3 Aiderで継続的に開発する

# 1セッション中での実行ログ例
$ aider
> /add src/app/api/users/route.ts
> ページネーション ?page=1&per_page=20 に対応して。zodで検証。
<Aider が編集→diff表示→確認→git commit>

> /run pnpm test
<失敗したテストを表示>

> 失敗したテストを直して
<Aiderが再編集→commit>

> /diff HEAD~3
<直近3コミットの全diffを表示>

8. Continue.dev

Continue.devはOSSの拡張機能。VSCode/JetBrainsで動き、ローカルLLM(Ollama)を含む全モデルに対応。セキュリティ要件で外部API禁止の現場で特に重宝。

8.1 config.yaml(2026新フォーマット)

# ~/.continue/config.yaml
name: my-config
version: 1.0.0
models:
  - name: Claude Sonnet 4.5
    provider: anthropic
    model: claude-sonnet-4-5
    apiKey: ${{ secrets.ANTHROPIC_API_KEY }}
    roles: [chat, edit, apply]

  - name: Local Qwen3 Coder
    provider: ollama
    model: qwen3-coder:32b
    roles: [autocomplete]

  - name: GPT-5
    provider: openai
    model: gpt-5
    apiKey: ${{ secrets.OPENAI_API_KEY }}
    roles: [chat]

context:
  - provider: code
  - provider: docs
  - provider: diff
  - provider: terminal
  - provider: problems
  - provider: codebase
  - provider: folder

8.2 Ollamaでローカル補完

# Ollamaで qwen3-coder を取得 (約20GB)
$ ollama pull qwen3-coder:32b

# Continueで自動補完が動く
# ネットワークを切ってもオフライン補完可能

# .continue/config.yaml の補完設定
tabAutocompleteModel:
  title: Qwen3 Coder Local
  provider: ollama
  model: qwen3-coder:32b
  apiBase: http://localhost:11434

8.3 Continueのカスタムコマンド

# config.yaml にカスタムスラッシュコマンド
slashCommands:
  - name: review
    description: 厳格なコードレビュー
    prompt: |
      あなたはシニアエンジニアです。
      以下のコードをレビューしてください:
      - バグ・脆弱性 (XSS/SQLi/プロトタイプ汚染等)
      - パフォーマンス問題
      - 命名・可読性
      - テスタビリティ
      重大度をHigh/Med/Lowで分類してください。

  - name: jp
    description: 日本語コメント追加
    prompt: |
      この関数に丁寧な日本語のJSDocコメントを追加してください。
      @param, @returns, @throws, @example を必ず含めてください。

9. Codeium / Windsurf

Codeium社のIDE拡張(Codeium)と、独自IDE(Windsurf)。Windsurfの「Cascade」は2026年Cursor Composerに並ぶ強力エージェントです。個人利用なら基本無料なのが破壊的。

9.1 Windsurf Cascadeの使い方

# Windsurfを起動 → Cascadeパネルを開く
# 自然言語で指示すると、複数ファイル自動編集

# プロンプト例
Cascade, このExpressのREST APIを Hono + Cloudflare Workersに移行して。
- 既存ルートは全部 /workers/src/index.ts に再配置
- ミドルウェアはhonoのものに置換 (helmet→secureHeaders等)
- テストも合わせて更新 (vitest)
- wrangler.toml も生成

Cascade Write / Cascade Chat / Cascade Plan の3モード切替可能

9.2 Codeium無料補完(VSCode)

// VSCode拡張 "Codeium" をインストール → 無料登録
// 補完はGitHub Copilot並みに高速

// settings.json
{
  "codeium.enableConfig": {
    "*": true,
    "markdown": false
  },
  "codeium.maxTokens": 2048,
  "codeium.enableSearch": true
}

9.3 Windsurfのターミナル統合

# Windsurfターミナルで Cmd+L
# 失敗したコマンドにAIが自動で説明・修正案を出す

$ pnpm build
> ERROR: Cannot find module 'next/dist/...'

# Windsurfが下に提案:
# > .nextと node_modulesを削除して再インストールしますか?
# > rm -rf .next node_modules && pnpm install [Enter]

10. Tabnine

Tabnineは老舗。セルフホスト・オンプレ運用を前提とした企業向けに強い。コードがクラウドに出ない要件で第一候補。

10.1 Tabnine Enterprise(オンプレ)

# docker-compose.yml (Tabnine Enterprise)
version: "3.8"
services:
  tabnine-server:
    image: tabnine/tabnine-server:latest
    ports:
      - "443:443"
    environment:
      - TABNINE_LICENSE_KEY=${TABNINE_LICENSE_KEY}
      - TABNINE_MODEL=tabnine-protected
    volumes:
      - ./models:/models
      - ./certs:/etc/tabnine/certs

  tabnine-gateway:
    image: tabnine/tabnine-gateway:latest
    ports:
      - "8443:8443"
    depends_on:
      - tabnine-server

10.2 Tabnine VSCode設定

// settings.json (オンプレ接続)
{
  "tabnine.serverUrl": "https://tabnine.internal.example.com",
  "tabnine.disable_line_regex": ["(?i)password|secret|api[_-]?key"],
  "tabnine.disable_file_regex": [
    "\.env",
    "secrets/.*",
    ".*\.pem$"
  ],
  "tabnine.experimentalAutoImports": true
}

11. 各ツールの強み・弱み

11.1 GitHub Copilot

• 強み: 補完精度、IDE統合の安定性、GitHub連携、組織ロールアウト容易、Copilot Workspaceで Issue→PR まで自動。
• 弱み: エージェント能力は Cursor / Claude Code に劣る。Composer型のマルチファイル編集はやや弱い。

11.2 Cursor

• 強み: Composer、@Codebase semantic search、Apply UI、.cursorrules、モデル選択の自由度。
• 弱み: VSCode forkゆえ拡張機能が一部動かない。利用ヘビーだとレート制限。

11.3 Claude Code

• 強み: CLIネイティブ、大規模リポ理解、CI連携容易、Hooks、サブエージェント並列。
• 弱み: 学習曲線あり、IDE上での視覚的編集は弱い、APIコスト管理が必要。

11.4 Cline

• 強み: OSS、VSCode統合、Plan/Actモード、モデル選択自由。
• 弱み: 大規模リポではコンテキスト管理に工夫が必要。APIコスト要監視。

11.5 Aider

• 強み: Git統合、差分管理、CI親和性、OSS。
• 弱み: UIなしCLIのみ、初心者にはハードル高い。

11.6 Continue.dev

• 強み: OSS、ローカルLLM、設定柔軟、JetBrains対応。
• 弱み: エージェント機能は Cursor / Cline より控えめ。

11.7 Codeium / Windsurf

• 強み: 無料補完、Cascade、UI洗練。
• 弱み: 企業向け機能は別契約、エコシステムはまだ発展途上。

11.8 Tabnine

• 強み: セルフホスト、コードを外に出さない、コンプラ強い。
• 弱み: 補完中心、エージェント機能弱い、料金高め。

12. 料金プラン比較

ツール	無料枠	個人有料	チーム/企業	API従量
GitHub Copilot	学生/OSS無料	$10/月	$19〜39/席	—
Cursor	Hobby (制限あり)	$20/月 Pro	$40/席 Business	$40+ Usage
Claude Code	—	Pro $20/Max $100〜	Team/Enterprise応相談	$3/$15 per Mtok (Sonnet)
Cline	拡張は無料	—	—	各APIプロバイダ次第
Aider	本体無料	—	—	各APIプロバイダ次第
Continue.dev	本体無料	—	Teams有償	各APIプロバイダ次第
Codeium	個人無料	—	Teams $12〜	—
Windsurf	制限あり	$15/月 Pro	$35/席	—
Tabnine	Basic無料	$12/月 Dev	$39/席 Enterprise	—

12.1 月コスト試算スクリプト

// aiTooling cost estimator
type Plan = {
  name: string;
  fixed: number;        // 月固定費USD
  apiRatePerMtok?: { input: number; output: number };
  estimatedTokens?: { input: number; output: number }; // M tokens
};

const plans: Plan[] = [
  { name: "Copilot Pro", fixed: 10 },
  { name: "Cursor Pro", fixed: 20 },
  {
    name: "Claude Code (API only Sonnet 4.5)",
    fixed: 0,
    apiRatePerMtok: { input: 3, output: 15 },
    estimatedTokens: { input: 8, output: 2 }, // 8M in / 2M out / 月
  },
  { name: "Windsurf Pro", fixed: 15 },
];

function monthlyCost(p: Plan): number {
  const api = p.apiRatePerMtok && p.estimatedTokens
    ? p.apiRatePerMtok.input * p.estimatedTokens.input +
      p.apiRatePerMtok.output * p.estimatedTokens.output
    : 0;
  return p.fixed + api;
}

for (const p of plans) {
  console.log(`${p.name}: $${monthlyCost(p)}/月`);
}
// Copilot Pro: $10/月
// Cursor Pro: $20/月
// Claude Code (API only Sonnet 4.5): $54/月
// Windsurf Pro: $15/月

13. AIモデル比較(Claude / GPT / Gemini)

ツールよりも実は裏で動くモデルが成果を左右します。2026年現在の主要モデルを比較。

13.1 ベンチマーク要約(SWE-bench Verified)

モデル	SWE-bench V	Context	得意	料金(in/out)
Claude Opus 4.5	74%	1M token	大規模リファクタ	$15/$75
Claude Sonnet 4.5	69%	1M token	日常タスク・コスパ	$3/$15
GPT-5	71%	256K	推論・数学	$10/$30
o3	67%	128K	難問解析	$15/$60
Gemini 2.5 Pro	63%	2M token	マルチモーダル・超長文	$3.5/$10.5
DeepSeek V3	61%	128K	OSS・コスパ	$0.27/$1.1

13.2 モデル切り替えの実コード(Vercel AI SDK)

// app/api/chat/route.ts
import { streamText } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { openai } from "@ai-sdk/openai";
import { google } from "@ai-sdk/google";

const modelMap = {
  "claude-opus": anthropic("claude-opus-4-5"),
  "claude-sonnet": anthropic("claude-sonnet-4-5"),
  "gpt-5": openai("gpt-5"),
  "o3": openai("o3"),
  "gemini-2.5": google("gemini-2.5-pro"),
} as const;

export async function POST(req: Request) {
  const { messages, modelKey } = await req.json();
  const model = modelMap[modelKey as keyof typeof modelMap];
  if (!model) return new Response("unknown model", { status: 400 });

  const result = streamText({
    model,
    messages,
    system: "あなたは厳密なTypeScriptエンジニアです。",
  });
  return result.toDataStreamResponse();
}

13.3 プロンプトキャッシュ活用(Claude)

// Anthropic SDK プロンプトキャッシュ例 (90%コスト削減)
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();
const longSystemPrompt = await Bun.file("./CODEBASE_GUIDE.md").text();
// 数万トークン規模

const res = await client.messages.create({
  model: "claude-sonnet-4-5",
  max_tokens: 1024,
  system: [
    {
      type: "text",
      text: longSystemPrompt,
      cache_control: { type: "ephemeral" }, // ← ここがポイント
    },
  ],
  messages: [{ role: "user", content: "ログイン処理の実装方針は?" }],
});
console.log(res.usage);
// { input_tokens: 30, cache_creation_input_tokens: 12000, cache_read_input_tokens: 0, output_tokens: 200 }
// 2回目以降は cache_read_input_tokens に乗って90%安くなる

14. 実プロンプト例 20種(コピペで使える)

下記は実際に成果率が高かった「型」のプロンプト。{XXX}を置換して使ってください。

14.1 リファクタ系

# P01: 純粋関数化
{ファイルパス}の{関数名}を純粋関数(副作用なし・参照透過)に書き換えて。
依存している外部状態は引数として明示し、I/Oは呼び出し側に押し出して。
変更後の関数シグネチャを最初に提示し、レビューしてから本体を編集して。

# P02: 早期return化
このifネストを早期returnパターンに書き換えて。
各早期returnの理由をコメントで残して。
ネストが4階層以上ある関数は別関数に抽出を提案して。

# P03: 型厳密化
このファイルのany / unknownをすべて適切な型に置換して。
zod schemaがあれば z.infer<typeof X> を活用。
変更困難な箇所は理由をコメントで明示し、TODO:にして残して。

14.2 テスト系

# P04: ユニットテスト生成
{ファイル}のユニットテストを vitest で書いて。
- 正常系3パターン
- 異常系(invalid input)3パターン
- 境界値(empty/null/undefined/最大値)
- AAA構造(Arrange/Act/Assert)
- describe.each で網羅

# P05: E2E (Playwright)
{機能名}のE2Eテストを Playwright で書いて。
シナリオ:
1. /login にアクセス
2. email/password入力
3. ログインボタンクリック
4. /dashboard にリダイレクト確認
5. localStorageに sessionToken が保存されているか
6. ログアウト後 /login に戻ること

選択子は data-testid を優先。 page.locator を使用。

# P06: テストカバレッジ向上
現在のテストカバレッジレポート ./coverage/coverage-summary.json を読み、
covered < 80% のファイルを特定。各ファイルについて、
未カバーの分岐をPlaywrightまたはvitestでテスト追加。

14.3 デバッグ系

# P07: スタックトレースから原因特定
このエラーログを分析:
{エラー全文をペースト}

スタック上位3フレームのコードを読み、考えられる原因を
- 1次原因
- 隠れた前提
- 再現手順
- 修正案(diff)
の順で提示して。

# P08: パフォーマンスボトルネック
Chrome DevToolsのPerformanceパネルでLong Taskが {N}ms 出ている。
このコンポーネント {ファイル} のレンダリングコストが高い疑いがある。
- React DevToolsで見るべきポイント
- 改善案 (useMemo/useCallback/Suspense/分割) を3つ
- どの順で試すべきか
を提示して。

14.4 設計系

# P09: ドメインモデリング
要件: {要件文}

このドメインのEntities, Value Objects, Aggregates, Repositoriesを設計して。
- TypeScriptの interface / class で表現
- 不変条件 (invariant) はクラスのコンストラクタで強制
- domain eventも検討

# P10: API設計レビュー
このREST API設計をレビュー:
{エンドポイント一覧}

- リソース指向か、RPC寄りになっていないか
- ステータスコード使用は妥当か
- ページネーション・フィルタリング・ソートは標準化されているか
- バージョニング戦略は?
を厳しく指摘して。

14.5 マイグレーション系

# P11: Pages Router → App Router
{ファイル一覧}を Next.js Pages Router から App Router に移行して。
- getServerSideProps → サーバーコンポーネント
- API Routes → Route Handlers
- _app.tsx / _document.tsx → app/layout.tsx
- next/router → next/navigation
段階的に1ファイルずつ。テストが落ちたら止めて報告。

# P12: Webpack → Vite
このプロジェクトのビルドツールを Webpack 5 から Vite 6 に移行して。
- 既存の loader / plugin の Vite相当を提案
- 環境変数 (process.env.XXX → import.meta.env.XXX)
- alias設定
- HMR動作確認手順

14.6 セキュリティ系

# P13: 脆弱性監査
このコードベース全体を OWASP Top 10 でレビュー:
- A01 アクセス制御
- A02 暗号化
- A03 インジェクション (SQL/XSS/SSRF/Prototype Pollution)
- A05 セキュリティ設定ミス
- A07 認証失敗

検出箇所をHigh/Med/Lowで列挙し、それぞれ修正diffを提案して。

# P14: 依存脆弱性対応
$ pnpm audit の結果を以下にペースト:
{出力}

各脆弱性について
- 影響の有無 (実コード参照)
- アップデート手順
- breaking change有無
を整理し、優先順位を提案して。

14.7 ドキュメント系

# P15: README自動生成
このリポジトリの README.md を生成して:
- プロジェクト概要 (package.json と src/ を読んで推定)
- 使用技術
- セットアップ手順
- 開発コマンド
- ディレクトリ構造
- ライセンス
スクショやバッジは入れず、テキストのみ。日本語で。

# P16: API ドキュメント
/app/api/ 配下の Route Handler を全て読み、
OpenAPI 3.1 仕様の YAML を生成して。
zod schemaがあれば z-to-jsonschemaで JSON Schema に変換して components.schemas に。

14.8 学習・調査系

# P17: アーキテクチャ図起こし
このリポジトリ全体を読み、Mermaidで以下を生成:
1. C4モデル Context図
2. C4モデル Container図
3. ER図 (Prisma schemaから)
4. 主要シーケンス図 (ログイン処理)

# P18: コードリーディング支援
{ファイル} の処理フローをステップごとに日本語で解説して。
- 各行がやっていること
- なぜそう書かれているかの推測
- 改善できそうな点
初学者向けに易しく。

14.9 運用系

# P19: ログ整形
このログ出力を構造化ログ(JSON)に書き換えて。
- pino 推奨
- requestId / userId / traceId を全エントリに含める
- ログレベル分離 (info / warn / error)
- 個人情報マスキング (email / phone)

# P20: SLO設計
このサービスの SLO/SLI を設計:
- 可用性 (target 99.9%)
- レイテンシ (P95 < 500ms)
- エラーレート (<0.1%)

OpenTelemetry + Prometheus で計測する場合の
- 計測実装コード
- アラート PromQL
- ダッシュボード構成
を提案して。

15. AI活用ワークフロー

15.1 1人スタートアップの黄金ワークフロー

# 朝のセットアップ
$ tmux new -s dev
$ claude            # ← 1ペイン: Claude Code
$ cursor .          # ← 別ペイン: Cursor

# 役割分担
# 1) 設計・大規模リファクタ・調査 → Claude Code (CLI)
# 2) UI実装・コンポーネント編集 → Cursor (IDE)
# 3) 補完 → Cursor内蔵 or Copilot
# 4) ローカルLLM (オフライン時) → Continue.dev + Ollama

15.2 git-driven AI開発

# 1コミット1機能を徹底
$ git checkout -b feat/contact-form

# Aider または Claude Code で実装
$ aider --message "お問い合わせフォーム実装 P01参照"
# → Aiderがdiff作成→git commit自動

$ git log --oneline
# 9c4f2 [aider] feat: contact form initial
# 7a1b8 [aider] feat: zod validation
# 33d0e [aider] test: contact form e2e

# レビューもAIに任せる
$ gh pr create --title "feat: contact form"
$ gh copilot suggest "PR description from commits"

15.3 CI/CDにAIを組み込む

# .github/workflows/ai-review.yml
name: AI Code Review
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }

      - name: Run Claude Code review
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          npm install -g @anthropic-ai/claude-code
          claude --headless 
            "git diff origin/main...HEAD を読み、レビューコメントをmarkdownで出力" 
            > review.md

      - name: Post review
        run: gh pr comment ${{ github.event.pull_request.number }} -F review.md
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

16. AI時代のエンジニア論

「AIが書いてくれるなら、エンジニアは要らないのでは?」——という不安に対する2026年現在の現実的回答。

16.1 むしろ価値が上がる3スキル

• システム設計力: AIは「与えられた仕様」は書けるが「ビジネス要件から仕様を切り出す」のは苦手。設計者の価値が相対的に上昇。
• レビュー眼: AIは平気で「動くが致命的に間違ったコード」を書く。動作確認・コード読解・セキュリティ感覚は引き続き必須。
• プロンプト設計力: 雑な指示=雑な出力。CLAUDE.md / .cursorrules を書ける人ほど成果が10倍違う。

16.2 学習ロードマップ

未経験〜中級者向けの全体像は「フロントエンドエンジニア学習ロードマップ2026」で詳説しています。AI時代でも基礎(言語/フレームワーク/設計)は不要にはなりません。

16.3 転職市場の動向

• AI活用前提のJDが2025年から急増。「Copilot/Cursorの実務利用経験」を必須化する企業も。
• 逆に「AIに丸投げした成果物」は評価されない。GitHub上の自分の意思決定が見えるコミットログが重要視される。

転職を視野に入れるなら、Geekly・レバテックなどのIT特化エージェントでAIスキルを正しく評価できる求人に当たるのが近道です。

17. AIコーディングの落とし穴

17.1 ハルシネーション(存在しないAPI)

// AIが平気でやらかす例
// ❌ 存在しないメソッド
import { useStableState } from "react";  // そんなhookは無い

// ❌ 古いAPI
import { unstable_renderSubtreeIntoContainer } from "react-dom";
// → React 18で削除済み

// ✅ 防御策: pnpm typecheck / tsc --noEmit をAI Hookに組み込む

17.2 秘密情報の漏洩

# .gitignore / .aiderignore / .cursorignore / .clineignore を必ず整備
.env
.env.*
!.env.example
secrets/
*.pem
*.key
config/credentials.yml.enc
service-account*.json

17.3 過剰課金

# Anthropic API利用量モニタ (簡易)
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();
let totalCost = 0;

async function ask(prompt: string) {
  const res = await client.messages.create({
    model: "claude-sonnet-4-5",
    max_tokens: 1024,
    messages: [{ role: "user", content: prompt }],
  });
  const cost =
    (res.usage.input_tokens / 1_000_000) * 3 +
    (res.usage.output_tokens / 1_000_000) * 15;
  totalCost += cost;
  console.warn(`このリクエスト: $${cost.toFixed(4)}  累計: $${totalCost.toFixed(2)}`);
  return res;
}

17.4 検証不足のままmerge

AIが書いたコードを「動いてるっぽい」だけでmergeするのは事故の元。最低限、以下は人間がやる。

• テスト追加 → CI緑確認
• セキュリティ観点の手動レビュー
• 本番に近い環境でのスモークテスト

18. FAQ

Q1. 初心者は何から使えばいい?

無料で始められる Codeium または GitHub Copilot(学生は無料) がおすすめ。補完に慣れたら Cursor に移行し、自律エージェント体験で世界観が変わります。

Q2. Cursor と Claude Code はどちらを買うべき?

用途で分けます。UI・コンポーネント実装中心なら Cursor、リファクタ・調査・CI連携・大規模リポなら Claude Code。両方使う(月$40〜)現役プロが2026年の標準です。

Q3. ローカルLLMで業務はまわる?

Qwen3 Coder 32B / DeepSeek V3 はかなり優秀ですが、Claude Opus 4.5 / GPT-5 と比べると「複雑なリファクタ」「曖昧仕様の解釈」で差が出ます。補完はローカル、エージェントはクラウドのハイブリッドが現実解。

Q4. 会社のコードを外部APIに送って大丈夫?

各社のZero Data Retention (ZDR)設定を確認。Anthropic / OpenAI / Google ともに法人プランでは学習除外+保持期間短縮が選択可能。それでも不安なら Tabnine Enterprise や Continue.dev + Ollama でセルフホスト。

Q5. AIで作ったコードの著作権は?

各ベンダーが「商用利用OK」を明示。ただし著作権の最終帰属はユーザー。コピー元の検知機能(Copilot duplicate detection等)はONにしておく。

Q6. AIで効率が落ちる場面は?

(1) 仕様がほぼ固まっている定型作業、(2) AIが学習していない超ニッチな社内DSL/古いSDK、(3) 1〜2行の微修正——これらは人間が直接書く方が速い。

Q7. プログラミングスクールでAIを学べる?

主要スクールはどこも2025年からAIカリキュラム導入済み。比較は「プログラミングスクール完全比較2026」参照。

Q8. 副業/フリーランスでAIスキルは評価される?

大いに。「同じ単価で2倍出せる」と判断されればリピート率激増。詳しくは「フリーランスエンジニア完全ガイド」「エンジニア副業完全ガイド」へ。

Q9. ポートフォリオに「Cursorで作りました」と書いていい?

正直に書いて問題なし。ただし自分が下した設計判断を README にしっかり書くこと。詳細は「エンジニアポートフォリオ作成完全ガイド」参照。

Q10. 年収はAI活用で上がる?

2026年現在、AI活用必須の求人は平均年収+50〜100万円のレンジ。年収比較は「エンジニア年収完全データ2026」を参照。

19. まとめ

AIコーディングツール選びの結論を一言で——

• 1ツールだけ選ぶなら: Cursor。Composerと .cursorrules の体験価値が圧倒的。
• 2ツール組み合わせ(2026年標準): Cursor + Claude Code。UIはCursor、CLI/CI/大規模リファクタはClaude Code。
• 無料縛りなら: Codeium + Continue.dev + Ollama (qwen3-coder)。
• セキュリティ最優先なら: Tabnine Enterprise セルフホスト、または Continue.dev + ローカルLLM。

そして最重要なのが、ツールよりも「裏で動くモデル」と「プロンプト設計」。Claude Sonnet 4.5 を使いこなせる人は、どのツールでも結果を出します。

本記事のプロンプト例20種をぜひ手元のプロジェクトで試し、自分のCLAUDE.md / .cursorrulesを育てていってください。あなたの開発生産性は、今日から確実に変わります。

関連記事:

• フロントエンドエンジニア学習ロードマップ2026
• Next.js 15完全実践ガイド
• Tailwind CSS 4完全実践ガイド
• async/await完全実践ガイド
• ESLint 9 + Prettier 3完全設定ガイド
• Turborepo + pnpm workspace Monorepo構築
• Node.js 22完全実践ガイド
• Hono完全実践ガイド
• Prisma完全実践ガイド
• JWT認証完全実装ガイド