VSCode GitHub copilot とCursor 1ヶ月使ってみたレポート

【🎄Merry Christmas🎄 WWWAVE アドベントカレンダー　12/1の記事です】

AIでコーディングすることが流行している今日、
流行りにのるために、２種類のAIコーディングエージェントを1ヶ月間使ってみました。

個人的な感想が主になりますが、これからAIでコーディングしようという方たちの
参考になればと思います。

前提

使い分け

• GitHub Copilot · あなたの AI ペア プログラマー : フロントエンドの修正担当
• Cursor: AIで最もスマートにコードを書く方法 : バックエンドの修正担当

モデル

• Claude Sonnet 4.5
  基本は、この方。自分には一番使いやすいです。

• Codex 5.1
  最近出たので、たまに使ってみていました。Codex 5は、微妙だなと思っていたんですが、Codex 5.1は結構いい精度だと思います。しかし、少し長考ぎみな気がします。

使った部分

開発フェーズ	担当・体制
要件定義	✍️全部人間
設計	✍️🤖人間主体（AI補助）
コーディング	🤖全部AI

開発手順

1. ✍️要件定義 & 設計
   ステークホルダーの方々を直接やりとりが発生するため、全部人間で対応しました。
   やりたいこと と 具体的な対応内容(設計？？)をドキュメントに記載します。

例(一部伏せ字,省略あり)

## やりたいこと

- SEO向上

## 対応

- /anime_titles/[:id] ページに構造化データを導入
  - 構造化データとは: https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja

### 設定内容

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Movie",
  "name": "???????",
  "image": "https://xxxxxxxx/path/to/main.jpg",
  "description": "summary",
  "genre": ["genre","tag"],
  "datePublished": "2020-04-10",
  "url": "https://xxxxxxxx/anime_titles/xxxx",

  "trailer": {
    "@type": "VideoObject",
    "name": "????????",
    "description": "?????????",
    "thumbnailUrl": "https://xxxxxxxx/path/to/thumbnail.jpg",
    "uploadDate": "2020-03-30",
    "contentUrl": "https://xxxxxxxx/preview.mp4",
    "embedUrl": "anime_titles/:id=anime_episode_id=xxxx"
  }
}
</script>

### npmパッケージ

- xxxxxxx を利用する

2. ✍️🤖 設計レビュー&タスク洗い出し
   AIに「設計で足りない部分を教えて」と指示を出し、足りない情報がないかを確認します。
   不足している情報を補足し、「タスク洗い出しして」と指示を出し、タスクの洗い出しをしてもらいます。洗い出したタスクは、設計書と同じドキュメントに書いてもらいます。

## タスク
* タスクは、1つづつ実行指示を出します。
* 勝手に実装しないでください！！怒ります！くまに貴方を襲わせます。

### 1. xxxxxxx パッケージのインストール
- [x] `xxxxxxx` をプロジェクトに追加
- [x] `nuxt.config.ts` にモジュール設定を追加

### 2. AnimeTitle詳細データの取得と変換ロジック実装
- [ ] `/pages/anime_titles/[id].vue` 内で構造化データへのマッピング関数を作成
- [ ] `genre` と `tags` を配列化処理（genre?.name、tags.map(t => t.name)）
- [ ] `startAt` を datePublished フォーマットに変換
.....続く

4. 🤖コーディング
   「1のタスクを実行して」と順番にタスクをこなしてもらいます。完了したタスクは、[x]をつけてもらうと、管理しやすいです。タスク完了ごとに、問題ないかレビューして、コミットしておくようにしました。

   たまに、全部のタスクを一気に完了させてしまう暴挙に出るときがあります、、。

比較検証結果

総括

コーディングの精度の差はほとんど感じませんでした。
若干Cursorを使うほうが精度高いような気がする？？かもしれないかもしれないくらいです。
使っているモデルによって差が出るのかなと思います。(多分)

UIが異なるので、使いやすさが変わるという印象です。
どのAIエージェントでも無料で使える期間があると思うので、
試してみて自分の使いやすいものを選んだらいいのかなと思いました。

各エージェントで思ったこと

VSCode GitHubCopilot

🍯 使ってる人が多いので、安心感あり
エディタ自体がなくなることはないという安心感があります。また、困ったときに検索すると参考になる記事がたくさんあるのもいいです。

🐻 Agentモードだと、暴走することたまにある。
たまに暴走して、頼んでいないような他のファイルの編集をしたりします。Agent主体で作業する場合は問題なさそうですが、私のようにタスクを1つづつ実行させるタイプの使い方だと、うあ、ってなります。

🍯 Editモードができた！
ちょこっと編集用にEditモードが最近?できました。Editモードだと暴走がありません。タスク１つづつ指示するタイプの使い方におすすめです！

Cursor

🍯 commandsやruleなどカスタマイズが多い
自分の使いやすいような便利なコマンドや、独自ルールを定義できるのは嬉しいです！

• commands: /[コマンド名]で呼び出せるプロンプトを定義できる
• rules: ユーザー、プロジェクトごとにルールを設定できる

🍯 Agent/Editorのモード切り替えができる！

• Modes | Cursor Docs
  基本はEditorとして利用して、たまにガッツリAIAgentと話したいなというときは、Agentモードに切り替えて使っていました。

Editor	Agent
コードエディタがメインで、サポートとしてAIに指示を出すモード(copilotなどと同じ感じ)。サイドパネルのチャットでAIに指示を出す。	AIとのチャットがメイン。AI主導で開発を進めるときに使う。ChatGPTなどのチャットエージェントのコーディング版だと思ってます。

🐻 AIとのチャットのパネルの位置が変えられなくて、editorスペースが狭く感じる
他にいい方法があるのかもしれないですが、VSCodeに慣れていると、結構不便だなと感じました。

Cursor	VSCode
チャットは左パネル固定(or Editor内)。ファイルエクスプローラや他ツールは右パネルにあるので、エディタが狭くなる。	チャットが右パネル。エディタ部分が広く使える。

時間短縮になるのか？？？

今の私のやり方だと、要件定義&設計までは自分でやっていますし、タスク洗い出しの段階で細かく実装内容を決めているので、大幅な時間短縮にはならないなと感じました。ぽちぽちコードを書くという、いわゆるコーディングの作業がなくなるので、めんどくささや疲れは減少した気がします。

理想

AIにすべて任せるのであれば、要件定義段階からAI主体で、人間がレビューするようにするというのがいいと思います。将来的には、要件定義段階でステークホルダーとAIが直接やり取りして、要件定義や設計をして、エンジニアはAIに指示させるだけになるのかもしれません。人間と人間とのやり取りの中から生まれるアイデアも多くあるので、全部が全部AIに任せるのは、個人的には好まないですが、デザイン修正や文言修正など、簡易的な修正は、AI主体で開発が完結できるようにしていきたいと思っています。

まとめ

• 結局、個人の好み
• AIと仲良くなれるようがんばります