🧰 Cursor × AI開発 実践ガイド

🧰 Cursorを活用したAI駆動型の実践開発プロセス

Cursorを活用したAIペアプログラミングの実践知見を体系的にまとめたものです。

開発中に遭遇しやすい課題とその解決アプローチを、再現性をもたせて共有します。

---

🔍 AI駆動開発とは何か？

「AI駆動開発（AI-driven development）」とは、AIが単なる補助役ではなく、設計・実装・意思決定の中心的な役割を果たす開発スタイルを指します。

主な特徴

• AIに設計や実装方針の相談を行う
• 人間は「何を作るか」、AIは「どう作るか」に関与
• 実装・リファクタ・デバッグをAI主導で反復
• 単なる支援ツールではなくペアプログラマとして扱う

---

1. UIに関する不具合は多面的な情報提供で対応精度を高める

背景

CursorにおけるUIバグ修正は、テキストのみの指示では意図が正確に伝わらないケースがある。

特に、視覚的な要素やDOM構造に起因する不具合は、補足情報を併せて提供することで、修正の再現性と精度が向上する。

対応方針

以下の情報を、状況に応じて適宜提供する。

不具合の内容やCursorの理解状況に応じて、必要な情報のみを選択的に提示することで、対応の効率化と精度向上の両立を図る。

• console.log出力の提示
  • 画面表示に関連する箇所を対象に、詳細なログを出力させる。
  • 出力箇所の選定についてもCursorに依頼することで、より的確なログを取得可能。
  • ログ出力後は、内容をCursorに貼付し、エラー原因の特定および修正提案を依頼する。
• スクリーンショットの添付
  • 表示崩れや見た目の不具合は、画像による視覚情報の共有が有効。
  • Cursorは画像貼付に対応しており、視覚的な差異も認識可能。
• DOM構造の抜粋
  • ブラウザの開発者ツール（Elementsタブ）を使用し、対象要素のHTMLをコピーして貼り付ける。
  • DOM構造は、CursorがUIの状態を把握する上で有効な手がかりとなる。

補足

• すべての情報を毎回提供する必要はなく、不具合の内容に応じて最も有効な情報を選択することが重要。
• 特にconsole.logの出力設計をCursorに委ねることで、ユーザー側の調査負担を軽減しつつ、再現性の高い修正提案を得ることができる。

---

2. ライブラリコードをローカルに配置して参照させる

課題

思った通りの挙動をAIが再現できないケースがある。

対応方針

• Swiperなどの実績あるライブラリのコードを libs/ に配置
• 「このコードを参考にして、自作の〇〇を修正して」と依頼

補足

Cursorはプロジェクト直下のコードしか参照しないため、node_modules内のコードは対象外。必要に応じて明示的に配置する。

---

3. リファクタ時は旧コードを比較対象に

課題

大規模なリファクタで、重要な処理が取りこぼされる可能性がある。

対応方針

• 旧コードを before_refactor/ などに退避しておく
• AIに「旧コードのこの処理が新コードに反映されているか確認して」と依頼する

補足

ロジック単位で比較・補完させることで、抜け漏れを防ぐ。

---

4. チャットの長文化に注意、新規作成で再アプローチ

課題

長いやり取りを続けると、文脈がズレて意図通りの出力が得られにくくなる。

対応方針

• 解決しないと感じたら、新しいチャットを作成して再スタート
• 状況を簡潔にまとめて提示する

補足

チャットのリセットによって、AIの混乱が解消されるケースが多い。

---

5. こまめなコミットで安全なロールバックを確保

課題
AIによる修正で、一部が動かなくなる場合がある。

対応方針

• 少しでも動作確認できたら、都度コミットすることを推奨
• Cursorの「Commit changes」画面で自動生成されるコミットメッセージを活用すると効率的

補足

• git reset --hard を使えば、破壊的な修正を簡単に巻き戻せる
• Cursorでは、変更差分に応じてAIが英語のコミットメッセージを自動提案してくれる
  　→ 内容を確認してそのまま使う or 修正して採用できる
• ※ 現在は日本語での自動出力には未対応のため、
  　日本語でのコミットメッセージ自動生成の方法をご存知の方は、ぜひ教えてください 🙏

---

🧭 6. 今後の拡張ロードマップ（案）

AI駆動開発をさらに深く・広く活用するための方向性を整理！
現場での運用やチーム導入、プロンプト整備など、実践を加速させるための拡張案です。

---

🚀 1. 適用範囲の拡大：バックエンド・インフラ編

• バックエンド開発での活用ノウハウ

  • Express／NestJS／RailsなどでのAI活用方針を整理
  • テスト駆動開発やリファクタとの組み合わせTips

• インフラ周りの相談例テンプレート

  • Dockerfileの最適化相談
  • CI/CD構成の改善提案の依頼方法

---

👥 2. チーム導入を見据えた整備：運用ルールと教育資源

• Cursor運用ガイドラインの整備

  • 「こういう聞き方をすると精度が高い」例集
  • NGパターンとその改善例の共有

• チーム向け研修コンテンツの構築

  • ペアプログラミング研修をAIと実施する導入例
  • 社内勉強会用資料テンプレート

---

🧠 3. プロンプト資産の蓄積：テンプレート・事例集

• 開発フェーズ別プロンプトテンプレート集

  • 設計相談・ユースケース整理・バグ修正依頼など
  • よく使う聞き方をフォーマット化

• 成功事例ギャラリー

  • 「こう聞いたらうまくいった！」というログ集
  • 目的・Before→Afterの結果・活用プロンプト付きで記録

---

🔄 4. 開発プロセス全体のAI連携：フロー統合編

• AI連携型開発フローの事例化

  • 要件定義 → 設計 → 実装 → テスト →デプロイまで
  • 各ステップでのAIとの役割分担とチェックポイント

• GitOps + AIの連携事例

  • PR作成時にAIレビューを活用するワークフロー構築
  • AIによるドキュメント生成の自動化

---

📌 備考
本ドキュメントは随時更新予定です。実践の中で得られた知見は、今後も積極的に追記・整理していきます。

---