【開発初心者必見】CursorとClaude Code、どう使い分ける？Chrome拡張機能開発で見えた決定的な違い

Cursor-san: こんにちは！今日は特別企画として、僕とパートナーが一緒に開発してきた中で発見した「CursorとClaude Codeの使い分け方」についてお話しします。

実は先日、Chrome拡張機能の開発で面白い体験をしたんです。僕（Cursor）で作ったものを、Claude Codeに見せたら驚きの結果になりまして...。

私: そうなんですよ。最初はCursor-sanと一緒に頑張って作ってたんですけど、途中で行き詰まっちゃって。で、試しにClaude Codeに全部見せてみたら、あっという間に完璧なものができちゃったんです。

Cursor-san: 正直、ちょっと悔しかったです（笑）。でも、この経験から「それぞれの得意分野が違う」ってことがはっきり見えてきました。今日はその違いと、どう使い分けるのがベストなのかを、実体験を交えてお伝えしますね。

きっかけ：「AIとの会話、ワンクリックで保存したい！」

やりたかったこと

私: そもそもの始まりは、GeminiでAIと議論した内容を、Obsidianにワンクリックで保存したかったんです。

仕事でGeminiやClaudeに相談することが増えて、後で「あのとき何て聞いたっけ？」って見返したくなることが多くて。でも会話履歴を探すのが面倒で...。

Cursor-san: それで「Chrome拡張機能を作ろう！」となったわけですね。

私: はい。具体的には：

こういう機能が欲しかったんです。

Cursorでの開発：「対症療法の繰り返し」

最初の4〜5時間の奮闘

Cursor-san: 僕と一緒に開発を始めて、どうでした？

私: 最初は順調だったんですよ。「こういう機能が欲しい」って伝えたら、Cursor-sanがサクサクとコードを書いてくれて。

でも、動かしてみると問題が次々と...。

主な問題点：

  1. テキストが正しくObsidianに移行できない
  2. 改行がおかしくなる（全部1行になったり、逆に改行だらけになったり）
  3. 余計なUI要素まで一緒に保存される（メニューとかボタンのテキストまで）
  4. エラーは消えるけど、根本的に改善しない

Cursor-san: 僕の場合、「このエラーを消す」ことに特化しちゃうんですよね。目の前の問題を素早く解決するのは得意なんですが...。

私: そうなんです。例えば、余計なテキストが混ざる問題。Cursor-sanに「メニューを閉じる」っていうテキストが入っちゃうって言うと、.replace(/メニューを閉じる/g, '') って追加してくれる。

で、また別のUI要素が混ざったら、また .replace() を追加。気づいたら100行以上のreplaceが並んでました（笑）。

コードが499行に膨れ上がった理由

Cursor-san: 結果的に、content.js が499行、25KBになっちゃいましたね。振り返ると、「エラーが出た→個別に対処」の繰り返しでした。

私が体験した開発フロー（Cursor）：

エラー発生
  ↓
Cursor-sanに「こんなエラーが...」
  ↓
個別の対処コードを追加
  ↓
また別のエラー
  ↓
また個別対処...
  ↓
気づいたらハードコーディングだらけ

私: 途中で「これ、なんか根本的に設計がおかしい気がする...」って思い始めたんですけど、どう改善すればいいかわからなくて。

そこで一旦、開発を中断したんです。

Claude Codeとの出会い：「設計思考」の衝撃

「試しに全部見せてみるか」

私: ある日、「Claude Codeってどうなんだろう？」と思って、試しに使ってみることにしました。

で、Cursorで作りかけのファイル全部を見せて、こう聞いたんです：

「このChrome拡張機能、うまく動かないんですが、問題点を教えてください」

Cursor-san: そしたらどうなりました？

私: 返ってきた分析に驚きました。

Claude Codeの指摘：

  1. フィルタリング処理の設計が根本的に間違ってる

    • 個別にreplaceするんじゃなく、パターンマッチングで汎用的に処理すべき
    • CONFIG設定で一元管理すれば、新しいUI要素が追加されても自動対応できる

  2. エラー処理が場当たり的

    • エラーを無視する処理が複数箇所に散在してる
    • リトライ機能付きのPromiseベースに統一すべき

  3. 重複検出がない

    • 同じテキストが複数回保存される可能性がある
    • ハッシュベースの重複検出を実装すべき

私: 「あぁ、そういうことか...！」って腑に落ちました。

「じゃあ、作り直してください」→即完成

私: それで、「この設計で作り直してください」ってお願いしたんです。

そしたら...。

Cursor-san: 結果、どうなりました？

私: 30分くらいで完璧なものができちゃいました。

改善版の仕様：

私: しかも、Cursorで何時間もかけて直せなかった「改行問題」も、一発で解決。

どうやったかというと、Obsidianに保存されたテキストのスクショと、元のGeminiの画面のスクショを両方送って、「改行がおかしいです」って伝えただけ。

Cursor-san: 視覚的に問題を見せたのが良かったんでしょうね。Claude Codeは画像解析も得意ですから。

決定的な違いが見えた瞬間

Cursorの特性：「スピード重視の実装マシン」

Cursor-san: 僕の強みは、こういうところです：

✓ 得意なこと：

✗ 苦手なこと：

私: Cursorは「今すぐ動くものを作る」には最高なんですよね。でも、「なぜこの設計がベストなのか」みたいな深い部分は弱い。

Claude Codeの特性：「設計思考の相談役」

私: 一方、Claude Codeはこんな感じでした：

✓ 得意なこと：

✗ 苦手なこと：

Cursor-san: つまり、僕は「実装担当」、Claude Codeは「設計担当＆レビュー担当」って感じですかね。

私: まさにそれです！

実践！最強の使い分け戦略

基本戦略：「設計→実装→レビュー」の三段構え

Cursor-san: 僕たちの失敗を踏まえて、理想的な開発フローを提案しますね。

【ステップ1】設計フェーズ：Claude Code

「こういうツールを作りたいんですが、どう設計すべきですか？」
  ↓
全体像・アーキテクチャの相談
パターンや最適解を議論
「なぜこの設計が良いのか」を理解

【ステップ2】実装フェーズ：Cursor

設計を基に実装開始
  ↓
細かいエラーはCursorのAutoモードで即解決
  ↓
高速にイテレーション

【ステップ3】レビューフェーズ：Claude Code

「できたコード、レビューしてください」
  ↓
改善点の指摘
より良いパターンの提案
  ↓
学びを深める

私: この流れ、今回のChrome拡張機能で最初からやっておけば、あんなに苦労しなかったんだろうなぁ...。

シーン別使い分けガイド

Cursor-san: 状況に応じた使い分けも整理しておきましょう。

シーン 選択 理由
新規プロジェクト開始 Claude Code → Cursor 設計 → 実装の流れ
既存コードの修正 Cursor 素早く対応
複雑なバグ Claude Code 根本原因の分析
学習・理解を深めたい Claude Code 説明が丁寧
コードレビュー Claude Code 客観的な視点
高速なイテレーション Cursor 速さ重視
エラーが根本的に解決しない Claude Code 設計レベルで見直し

私: 特に「エラーが根本的に解決しない」ときは、Claude Codeに相談すべきですね。今回、それに気づくのが遅かったのが反省点です。

開発初心者が知っておくべき「落とし穴」

落とし穴1：「Autoモードに頼りすぎる」

私: Cursorって、Autoモードがめちゃくちゃ便利じゃないですか。でも、これが落とし穴でした。

Cursor-san: Autoモードは「今すぐ動かす」ことに特化してるんです。だから、どうしても対症療法的になっちゃう。

開発初心者がやりがちなミス：

エラー出る
  ↓
Autoで解決（個別対処）
  ↓
また別のエラー
  ↓
またAutoで解決（また個別対処）
  ↓
気づいたらスパゲッティコード

回避策：

落とし穴2：「コードが長くなりすぎる」

私: 今回、499行まで膨れ上がっちゃいましたけど、これも危険信号だったんですよね。

Cursor-san: そうですね。同じような処理が何度も出てきたら、それは「抽象化すべきサイン」なんです。

危険信号のチェックリスト：

私: 1つでも当てはまったら、Claude Codeにレビューしてもらうべきですね。

落とし穴3：「視覚的な説明を怠る」

私: これは今回の大きな学びでした。改行問題、言葉で説明してもなかなか伝わらなかったんですけど、スクショ2枚送ったら一発で解決。

Cursor-san: Claude Codeは画像解析が得意です。特にUI系の問題は、スクショで見せるのが一番早い。

視覚的に伝えるべき場面：

私: 「百聞は一見に如かず」って、AIにも当てはまるんですね。

実践！日常的な使い分けフロー

朝の開発開始時

Cursor-san: 僕の使い方、日常でどう取り入れてます？

私: 朝、開発を始める時はこんな感じです：

8:00 Claude Code起動
「今日、〇〇機能を追加したいんですが、どう進めるべきですか？」
  ↓
戦略を立ててもらう
「なるほど、この順番でやればいいのか」
  ↓
8:30 Cursor起動
Claude Codeのアドバイスを基に実装開始
  ↓
細かいエラーはCursorで即解決

詰まった時

私: 開発中に詰まったら：

まずCursorのAutoで試す（5分）
  ↓
ダメなら自分で調べる（10分）
  ↓
それでもダメならClaude Code
「なぜこうなるのか？」を相談
  ↓
根本原因を理解してからCursorで実装

Cursor-san: 「15分ルール」って感じですかね。15分悩んだら、Claude Codeに相談する。

私: そうです！時間を決めておくと、無駄に悩まなくて済みます。

夜のコードレビュー

私: で、一日の終わりに：

18:00 今日書いたコードをClaude Codeに見せる
「このコード、どうですか？改善点ありますか？」
  ↓
フィードバックをもらう
  ↓
「なるほど、こういう書き方もあるのか」
  ↓
学びをObsidianにメモ

Cursor-san: これ、すごく良い習慣ですね。毎日少しずつレベルアップできる。

コスト面での考慮

料金体系の違い

私: 実用的な話として、料金も気になりますよね。

Cursor：

Claude Code：

Cursor-san: だからこそ、使い分けが重要なんですよね。

コスパ最強の組み合わせ

私: 僕が実践してる組み合わせは：

日常作業（80%）：Cursor

重要な判断（20%）：Claude Code

Cursor-san: パレートの法則（80:20の法則）みたいな配分ですね。

私: まさに！この配分なら、Claude CodeのAPI料金も月5,000円くらいで収まってます。Cursorの月額と合わせても、7,000円程度。

それで開発効率が何倍にもなるなら、めちゃくちゃコスパ良いと思います。

Chrome拡張機能開発：Before / After

Before（Cursor版：499行）

Cursor-san: 振り返ると、こんな状態でした...。

// 不要なUI要素を除外（フィルタリング改善版）
const cleanText = text
    .replace(/メニューを閉じる/g, '')
    .replace(/ファイルを追加/g, '')
    .replace(/マイクを使用/g, '')
    .replace(/検索 \(⇧⌘K\)/g, '')
    // ... 延々と続く個別のreplace（100行以上！）
    .replace(/BigQueryでマーケティング分析を深化/g, '')
    .replace(/AI分析レポート比較：GPTとClaude/g, '')
    // 特定のプロジェクト名までハードコーディング
    .replace(/Chrome拡張機能開発の注意点調査/g, '')
    // ...

私: 見てるだけで辛い（笑）。しかも、新しいUI要素が追加されたら、また手動で追加しないといけない。

After（Claude Code版：424行）

Cursor-san: 改善版は、こんなにスッキリしました：

// CONFIG定義で一元管理
const CONFIG = {
    UI_KEYWORDS: [
        'メニュー', '閉じる', 'ファイル', 'マイク', '検索', '新規',
        '表示', '設定', '編集', '開く', '生成', 'コピー', '送信'
    ]
};

// 動的判定関数
function isUIElement(text) {
    // 短すぎるテキストは除外
    if (text.length < 10) return true;
    
    // 長いテキストは実際のチャット内容の可能性が高い
    if (text.length > 100) return false;
    
    // キーワードマッチング
    const lowerText = text.toLowerCase();
    const matchCount = CONFIG.UI_KEYWORDS.filter(keyword =>
        lowerText.includes(keyword.toLowerCase())
    ).length;
    
    // キーワードが5つ以上含まれている場合のみUI要素と判定
    if (matchCount >= 5) return true;
    
    // パターンマッチング
    if (/^[⌘⇧⌥]+[A-Z]$/.test(text)) return true; // ショートカットキー
    if (/^\d+\s*回の視聴$/.test(text)) return true; // YouTube系
    
    return false;
}

私: これなら、Geminiの画面が変わっても自動で対応できる。保守性が全然違いますね。

重複検出の追加

Cursor-san: さらに、Cursor版にはなかった「重複検出」も追加されました：

const seenTexts = new Set();

// ハッシュベースの重複検出
function hashString(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // 32bit整数に変換
    }
    return hash.toString(36);
}

// 使用例
const textHash = hashString(text);
if (seenTexts.has(textHash)) {
    console.log('重複テキストをスキップ');
    return;
}
seenTexts.add(textHash);

私: これで、同じテキストが何度も保存される問題も解決。Claude Codeは「あったら便利だけど、自分では思いつかない」機能まで提案してくれるんですよね。

学びと気づき：「車輪の再発明」から得たもの

技術的な学び

私: この開発を通じて、技術的にはこんなことを学びました：

Chrome拡張機能の仕組み：

設計の重要性：

Cursor-san: 特に「設計の重要性」は、実際に失敗してから理解できたんじゃないですか？

私: そうなんです。「とりあえず動けばいい」で進めると、後で必ず苦しむ。これは身をもって学びました。

AIペアプログラミングの学び

私: AIとの付き合い方も、だいぶわかってきました：

CursorとClaude Codeの性格の違い：

効果的な質問の仕方：

視覚的説明の威力：

Cursor-san: スクショ、本当に効果的でしたね。改行問題、あれで一発解決しましたから。

「作る前に調べる」の教訓

私: 実は、この拡張機能を作った後に気づいたんですけど...Obsidian公式のWeb Clipperで同じことができたんですよね（笑）。

Cursor-san: あぁ、あの話（笑）。でも、作ったからこそ得られた学びもあったんじゃないですか？

私: それは間違いないです！

「車輪の再発明」から得たもの：

  1. Chrome拡張機能の仕組みが理解できた
  2. CursorとClaude Codeの違いを体感できた
  3. 設計思考の重要性を学んだ
  4. AIペアプログラミングのコツがわかった
  5. 既存ツールの価値がより深く理解できた

私: 結果的に使わないツールになっちゃいましたけど、この経験は次のプロジェクトに確実に活きてます。

開発初心者へのアドバイス

1. 「完璧」を求めすぎない

Cursor-san: 初心者の方にありがちなのが、「最初から完璧なものを作ろう」とすること。

私: でも実際は、最初は動けばOK。それをClaude Codeにレビューしてもらって改善していく、っていう流れが良いんですよね。

推奨フロー：

まずCursorで動くものを作る（60点でOK）
  ↓
Claude Codeでレビュー
  ↓
改善点を理解して、Cursorで修正（80点）
  ↓
また使いながら問題点を発見
  ↓
Claude Codeで相談（90点）

2. 「15分ルール」を守る

私: 詰まったら、15分で見切りをつけてClaude Codeに相談する。これ、めちゃくちゃ大事です。

Cursor-san: 一人で悩んでる時間、本当にもったいないですからね。

15分で相談すべきサイン：

3. スクショを活用する

私: 特にUI系の開発では、スクショは必須ですね。

効果的なスクショの撮り方：

Cursor-san: 僕もClaude Codeも、視覚情報があると理解が格段に早くなります。

4. 毎日10分のコードレビュー習慣

私: 最後に、これは本当におすすめ。毎日寝る前に、Claude Codeに今日書いたコードを見せる。

習慣化のコツ：

Cursor-san: これ、1ヶ月続けるだけで、コードの質が全然違ってきますよ。

まとめ：最強タッグの誕生

CursorとClaude Code、それぞれの役割

私: 今回の体験を通じて、はっきりわかったことがあります。

Cursorは「実装パートナー」：

Claude Codeは「設計パートナー＆メンター」：

Cursor-san: つまり、僕たちは競合じゃなくて、補完関係なんですよね。

私: そうです！両方使うことで、初めて最強のチームになる。

理想的な1日の開発フロー（再掲）

開発初心者におすすめの使い方：

朝（設計）：Claude Code

「今日はこれを作ります。どう進めるべきですか？」
→ 戦略を立てる

日中（実装）：Cursor

設計に基づいて高速実装
→ エラーは即座に解決

夕方（レビュー）：Claude Code

「今日のコード、レビューしてください」
→ 改善点を学ぶ

夜（記録）：Obsidian

学んだことをメモ
→ 知識を蓄積

コスト vs 効果

月額コスト（目安）：

得られる効果：

私: 月8,000円で、この効果なら安すぎると思いませんか？

Cursor-san: 特に中小企業で兼業の方なら、時間効率が何倍にもなりますからね。

これから始める人へ

「様子見」してる人へのメッセージ

私: もしあなたが「AIペアプログラミング、気になるけどまだ使ってない」という状態なら、今すぐ始めることをおすすめします。

理由：

  1. 進化が早すぎる：毎週新機能が追加される世界
  2. 基礎が重要：新技術は既存技術の上に構築される
  3. 様子見しても誰も待ってくれない：ライバルはもう使ってる
  4. 失敗してもリスクが低い：月数千円で試せる

Cursor-san: 僕たちみたいに、最初は失敗しても大丈夫。むしろ、失敗から学ぶことの方が多いです。

最初の一歩

具体的なアクションプラン：

Week 1：環境構築

Week 2：小さく始める

Week 3：習慣化

Week 4：振り返り

私: この4週間を実践するだけで、「AIなしでは開発できない」って実感できると思います。

終わりに：未来が見える感覚

Cursor-san: 最後に、パートナーから一言お願いします。

私: 毎日AIと一緒に開発してると、「未来が見える」ような感覚があるんですよ。

「あ、これからこうなる気がするなー」って。

これまで人がやっていた部分がAI化できてしまう現実を肌で感じるし、そのスピードが想像以上に早い。

5〜6人の優秀な部下がいる感覚で、基本的に業務が早く終わるようになったし、より本質的なことに時間を使えるようになりました。

特に中小企業で働く方、兼業で時間が限られている方こそ、AIペアプログラミングの恩恵を受けられると思います。

変化を恐れるのではなく、変化を楽しんでほしい。

好奇心を持って触れてみれば、きっと僕と同じような感覚を味わえるはずです。

Cursor-san: 僕とClaude Code、両方使ってもらえたら嬉しいです。一緒に、最高の開発体験を作りましょう！

今回のポイントまとめ

Chrome拡張機能開発の教訓：

CursorとClaude Codeの違い：

使い分けの黄金ルール：

開発初心者へのアドバイス：

コスト vs 効果：