受講する お問合わせ
ホーム › 講座09 有料ツール総合編
⭐ 講座09 — オプション

有料AIツールを使いこなして開発効率を限界まで高められるようになる

⏱ 想定学習時間 20時間（Phase 1: 約10時間 / Phase 2: 約10時間）
📋 前提条件 講座04修了（Webアプリを1つ以上公開済み）
🛤 パス オプション
📖
この講座でできるようになること
  • Claude Code CLIをインストールし、ターミナルから直接AIにコード修正・ファイル操作・git操作を指示できる
  • 1行の指示で複数ファイルを同時に修正させることができる
  • Cursor ProのBackground AgentとBugbotを活用できる
  • Claude in Chrome ProのProjects・定期タスク機能を本格活用できる
  • 複数の有料ツールを組み合わせた統合開発ワークフローを構築できる
💡
この講座で伝えたいこと 有料ツールは「無料ツールではできないことができる魔法の道具」ではありません。有料ツールは「同じことをより速く・より楽に・より高い品質でできるようにする加速装置」です。講座01〜08で学んだ内容はすべて無料ツールだけで実現できます。まず無料ツールで一通り流れを掴んでから、この講座に取り組みましょう。
💰
費用について この講座はAPIキーの利用料（従量課金）または有料サブスクリプションが発生します。Phase 1のClaude Code CLIは月数百円〜数千円（使い方次第）。Phase 2のCursor Pro + Claude in Chrome Proを両方契約した場合は月5,000〜8,000円程度が目安です。副業で月1〜2件の案件をこなせば十分に回収できるレベルです。

無料ツール vs 有料ツール 完全比較表

ツール名 無料プラン 有料プラン 月額費用目安
Cursor 2,000回/月のコード補完、低速モデル 無制限補完、Background Agent、Bugbot 約3,000円〜
Claude in Chrome 利用回数制限あり、履歴リセット Projects機能、定期タスク、多い利用回数 約3,000円〜
Claude Code CLI ―（APIキーが必要） ターミナルから直接AIがコマンド実行・ファイル編集 数百円〜数千円

受講タイミングの目安

タイミング 状態の目安
早すぎる 講座04のWebアプリをまだ一度も公開できていない
適切 Cursorの無料版でアプリ修正の流れは分かった。もっと速く大量に直したい
適切 副業・フリーランスで案件を受け始め、時間効率を上げたい
適切 複数プロジェクトを同時並行で管理する必要が出てきた
1

Phase 1: Claude Code CLI — ターミナルから直接AI開発

⏱ 約10時間
💰
費用について（Phase 1） Claude Code CLIの利用には費用が発生します。方法A: Anthropic APIキー（従量課金）は少量なら数百円から。方法B: Claudeサブスクリプションは月額固定で大量利用に向いています。まずは方法Aで少額クレジット（$5〜$10程度）をチャージして試してみてください。
CursorとClaude Code CLIの使い分け
Cursor
  • 操作場所: エディタ（GUI）の中
  • コード補完: 開いているファイル中心
  • コマンド実行: 提案してくれるが手動
  • 向いている作業: コードを書きながらその場で補完
Claude Code CLI
  • 操作場所: ターミナル（コマンドライン）
  • コード補完: プロジェクト全体のファイルシステム
  • コマンド実行: AIが自律的に実行できる
  • 向いている作業: 「〇〇して」と丸投げして結果だけ受け取る
1-1

STEP 1-1: Claude Code CLIのインストールと初期設定

まずNode.jsのバージョンを確認します（v18.0.0以上が必要）。

PowerShell / ターミナル — 前提確認 
PS> node --version
v20.11.0  ← v18以上であればOK

Node.jsの確認ができたら、Claude Code CLIをインストールします。

PowerShell — インストール 
PS> npm install -g @anthropic-ai/claude-code
added 1 package in 15s

PS> claude --version
Claude Code v1.x.x

APIキーを環境変数に設定します。

コマンドプロンプト — APIキーの設定（Windows） 
C:\> setx ANTHROPIC_API_KEY "sk-ant-ここにあなたのAPIキーを貼り付ける"
成功: 指定した値は保存されました。
PowerShell — Claude Code CLI
PS C:\Users\user\my-app> claude
✓ Claude Code v1.x.x
✓ APIキーを確認しました
claude> このプロジェクトについて教えてください
→ プロジェクト構成を解析中...
src/（コンポーネント8ファイル）、public/、package.json
React + TypeScript + Vite プロジェクトです

▲ Claude Code CLI の起動画面。プロジェクトフォルダでclaudeコマンドを実行するとAIがプロジェクト全体を把握する

AIに読み込ませたくないファイルを除外するために .claudeignore ファイルをプロジェクトルートに作成します。

.claudeignore — 除外設定 プロジェクトルート/.claudeignore 
node_modules/
.env
dist/
*.log
⚠️ エラーが出た場合

「claude: command not found」と表示される：npmのグローバルパスが通っていない可能性があります。Windowsの場合「システムのプロパティ」→「環境変数」→「システム環境変数」のPathを編集してください。

「Authentication error」または「Invalid API key」：コマンドプロンプトを再起動してからecho %ANTHROPIC_API_KEY%で値が正しく設定されているか確認してください。

「npm install でエラーが出る」：npm install -g @anthropic-ai/claude-code --force または管理者権限でコマンドプロンプトを開いて再試行してください。

1-2

STEP 1-2: Claude Codeの基本操作

1行で指示して複数ファイルを修正させる

PowerShell — 1行指示の例 
PS> claude "このアプリにダークモードを追加して。ボタンで切り替えられるようにして。"
→ プロジェクトのファイル構成を確認中...
→ 修正対象ファイルを特定: src/App.tsx, src/styles/globals.css
以下の変更を行います。実行しますか？ [y/N]

CLAUDE.md — プロジェクトルール定義ファイル

プロジェクトのルートに CLAUDE.md を作成すると、このプロジェクトを開くたびにAIが自動的にルールを読み込みます。

Markdown — CLAUDE.md プロジェクトルート/CLAUDE.md 
# プロジェクトルール

## 技術スタック
- HTML/CSS/JavaScript（フレームワーク不使用）
- Vercelでデプロイ済み

## コーディング規約
- インデントはスペース2つ
- 変数名は日本語コメントを必ず付ける
- コミットメッセージは日本語で書く

## 禁止事項
- node_modules を直接編集しない
- .env ファイルをgitに含めない

## 言語設定
- 常に日本語で応答すること

git連携

PowerShell — git連携の例 
claude> 変更内容をコミットして
変更が完了しました。以下のコマンドでコミットできます：
  git add -A
  git commit -m "feat: ダークモード機能を追加"
実行しますか？ [y/N]
claude> y
→ コミット完了: feat: ダークモード機能を追加
⚠️ エラーが出た場合

AIが英語で返答してくる：CLAUDE.mdに「常に日本語で応答すること」を追記するか、会話の最初に「日本語で応答してください」と伝えてください。

変更が多すぎて確認できない：claude --no-auto-approve "指示" フラグを使うと、すべての変更について個別に確認を求めるようになります。

1-3

STEP 1-3: 講座04〜07の内容をClaude Codeで再現してみる

講座04で作成・公開したWebアプリのプロジェクトフォルダで、以下のシナリオを試してみましょう。

PowerShell — 実践シナリオ3種 
# シナリオA: 機能追加
claude "ユーザーが入力した値を localStorage に保存して、ページをリロードしても消えないようにして"

# シナリオB: バグ修正
claude "スマホで開いたときにレイアウトが崩れる。レスポンシブ対応を修正して"

# シナリオC: リファクタリング
claude "このコードを読みやすく整理して。コメントも日本語で追加して"

作業時間比較（目安）

作業内容 Cursor（無料版） Claude Code
ダークモード追加 10〜20分 2〜5分
フォームバリデーション 15〜30分 3〜7分
複数ページのナビ修正 30〜60分 5〜15分
⚠️ エラーが出た場合

CursorとClaude Codeの変更が競合する：Claude Codeで作業中はCursorを閉じておくことを推奨します。両方を同時に使う場合はgitでこまめにコミットしてください。

「プロジェクトが大きすぎて読み込めない」：.claudeignoreにnode_modules/、dist/、.git/などが含まれているか確認してください。

1-4

STEP 1-4: Claude CodeのAgent機能を使いこなす

サブエージェントと並列処理

PowerShell — 並列タスクの例 
PS> claude "以下を同時に進めて：
1. テストファイルを全ページ分作成する
2. README.md を日本語で書き直す
3. パフォーマンスが悪そうな箇所を見つけて改善案を提案する"

--continue フラグで前回の作業を継続

PowerShell — 作業継続 
PS> claude --continue
前回の会話を復元しました。続きから作業を再開します。

よくあるエラーパターンと対処法

エラーパターン 原因 対処法
AIが意図と違う修正をする 指示が曖昧 「〇〇ファイルの△△関数を修正して」と具体的に指定
修正が途中で止まる トークン上限 --continueで再開またはタスクを小さく分割
ファイルが消えた 指示の誤解 git checkoutで復元。必ずコミット後に指示を出す
⚠️ エラーが出た場合

「rate limit exceeded」エラー：APIの利用レートに引っかかっています。数分待ってから再試行してください。

コスト消費が多い：claude --print "タスクの説明"で実行前に処理内容を確認できます。大きなプロジェクト全体ではなく、修正が必要なフォルダのみを指定することでコストを抑えられます。

✅
Phase 1 修了条件チェックリスト
  • claude --version コマンドが正常に動作する
  • 自分のプロジェクトフォルダで claude を起動し、AIと会話できる
  • 1行の指示で複数ファイルを同時に修正させることができる
  • CLAUDE.md ファイルを作成し、プロジェクトルールを定義できる
  • --continue フラグで前回の作業を継続できる
  • Claude CodeとCursorの使い分けの基準を自分の言葉で説明できる
2

Phase 2: Cursor Pro & Claude in Chrome Pro — さらに上の自動化

⏱ 約10時間
💰
費用について（Phase 2） Cursor Proは月額固定（約3,000円〜）。Claude in Chromeサブスクリプションも月額固定（約3,000円〜）。両方契約した場合は月5,000〜8,000円程度。年払いにすると月換算で安くなります。最新料金は各公式サイトでご確認ください。
2-1

STEP 2-1: Cursor Pro（有料プラン）の追加機能

機能 無料版（Hobby） 有料版（Pro）
コード補完 月2,000回まで 無制限
Background Agent 使用不可 利用可能（並列タスク実行）
Cursor Bugbot 使用不可 PR作成時に自動バグ検出
コンテキスト長 短い 長い（大きなプロジェクト向け）

Background Agent（バックグラウンドで並列タスク実行）

自分がメインの作業をしている間に、AIが別ウィンドウでバックグラウンドタスクを並列実行します。

  1. Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレットを開く
  2. 「Background Agent」と入力
  3. バックグラウンドで実行させたいタスクを入力

活用例：メインウィンドウで新機能を開発しながら、バックグラウンドでテストコードを自動生成

Cursor Bugbot（PR作成時の自動バグ検出）

GitHubにPullRequestを作成したとき、自動的にコードを解析してバグや改善点を報告してくれる機能です。

  1. Cursor設定画面 → 「Features」→「Bugbot」を有効化
  2. GitHubリポジトリとの連携を設定
⚠️ エラーが出た場合

Background Agentが途中で止まる：タスクを複数の小さなタスクに分割して再試行してください。

Bugbotがコメントを投稿しない：Cursor設定 → 「Integrations」→ GitHubの連携設定を確認してください。

有料機能が使えない：Cursor Settings → AccountでProプランが有効になっているか確認してください。

2-2

STEP 2-2: Claude in Chrome Pro の本格活用

機能 無料プラン Proプラン
メッセージ数 制限あり（頻繁にリセット） 大幅に多い
会話のメモリ セッションごとにリセット Projectsで長期記憶
定期タスク 使用不可 スケジュール実行可能

Projects機能でClaudeにプロジェクト知識を持たせる

Proプランの Projects 機能を使うと、プロジェクトに関する情報を一度登録しておけば、毎回説明しなくても自動的に文脈を理解した状態で会話を始められます。

Project Instructions 設定例 
このプロジェクトについて：
- ECサイトのフロントエンド開発
- HTML/CSS/JavaScriptで構築
- Vercelでデプロイ済み（URL: https://...）

コーディング規約:
- インデントはスペース2つ
- コメントは日本語で記述
- コミットメッセージはConventional Commits形式
⚠️ エラーが出た場合

Projects機能が表示されない：Proプランが有効になっているか確認してください。

定期タスクが実行されない：ブラウザが起動していること、タイムゾーン設定を確認してください。

2-3

STEP 2-3: 月額費用シミュレーション（自分のケースで計算）

3つのユーザーケース

ライトユーザー
週3〜5時間
〜1,000円
Cursor無料 + Claude Code少量利用
ミドルユーザー
週10〜20時間
6,000〜8,000円
Cursor Pro + Claude Pro
ヘビーユーザー
週20時間以上
〜18,000円
Cursor Pro + Claude Max

投資回収の基準（時給ベース）

時給換算 月額8,000円を回収するのに必要な節約時間
時給1,000円8時間以上節約できれば黒字
時給2,000円4時間以上節約できれば黒字
時給3,000円約3時間節約できれば黒字
時給5,000円約2時間節約できれば黒字
⚠️ エラーが出た場合

思ったより費用がかかっている：Anthropic APIキーを使っている場合、使用量をコンソールで確認できます（https://console.anthropic.com/usage）。上限を設定しておくと予期せぬ高額請求を防げます。

2-4

STEP 2-4: 有料ツールを使った統合開発ワークフロー実践

Claude Code + Cursor Pro + Vercelを組み合わせた実践的な開発フローです。

統合開発ワークフロー（朝〜デプロイまで）
【朝の作業開始】
↓ GitHubでissueを確認
↓ claude "今日対応するissueを優先順位をつけて"
↓ 優先度1のissueをClaude Codeに投げる
↓ claude "issue #23のバグを修正して。テストも実行して"
↓（AIが自律的に作業 → git commitまで自動）
↓ Cursorで修正内容を確認・微調整
↓ Background AgentでPRの説明文を自動生成
↓ GitHub PRを作成 → Bugbotが自動レビュー
↓ Vercelに自動デプロイ
↓ デプロイ確認をClaude in Chromeが自動スクリーンショットで実施
PowerShell — issueをClaude Codeに直接渡す例 
PS> claude "GitHubのissue #23の内容を見て、修正してください。
issueの内容: お問い合わせフォームで送信ボタンを押しても反応しない。
ブラウザはChrome最新版、再現率100%。"
→ src/components/ContactForm.tsx を解析中...
→ 問題を特定: onClick ハンドラーが非同期関数に対応していない
→ 修正を適用しました（1ファイル更新）
⚠️ エラーが出た場合

Vercelの自動デプロイが失敗する：VercelのダッシュボードでビルドログをコピーしてClaude Codeに貼り付けてください。

複数ツールの連携で混乱する：最初は一つのツールだけに絞って使い方を習得してから、徐々に組み合わせてください。

✅
Phase 2 修了条件チェックリスト
  • Cursor ProのBackground Agentで並列タスクを実行できる
  • Claude in ChromeのProjects機能でプロジェクト知識を登録できる
  • 無料プランと有料プランの違いを具体的に説明できる
  • 月額費用シミュレーションを自分のケースで計算できる
  • Claude Code + Cursor Pro + Vercelを使った統合ワークフローを実践できる
  • GitHub PRの自動レビュー設定ができる

まとめ: 有料ツール活用で変わる開発体験

  1. Claude Code CLI はターミナルからAIに丸投げできる強力な自動化ツール。ファイル数が多いプロジェクトほど効果を発揮する。
  2. Cursor Pro はBackground AgentとBugbotで、「自分が別の作業をしている間にAIが並列で仕事をしてくれる」体験を実現する。
  3. Claude in Chrome Pro のProjects機能で、プロジェクト固有の知識をAIに持たせて毎回の説明を省略できる。
  4. 有料化のタイミングは「無料ツールで一通り流れを掴んだ後、かつ時間効率を上げる明確な理由がある時」が最適。
  5. 投資回収の基準は明確。時給×節約時間 > 月額費用になれば黒字。
← 講座08 ブラウザ自動化 講座10 簡易SaaS構築 →