はじめに
どうも、鳩胸になりたい文鳥です。
Cursor？Copilotみたいなもんやろ！？
って思ってました。はい。
「コーディング支援のAIだったらCopilotあるしなー」
「JetBrains製品の強力な静的解析とコーディング補助は変えたくないなぁ」
「結局既存コード改修するから、AIにコーディングは任せられんなー」
とか思ってたのですが、予想をだいぶ上回ってきたのでブログに残しておくことにしました。
きっかけ
転職を機に扱うプログラミング言語も変わったので、今の組織で利用者の多いツールを聞いたところCursorを使っている人が多くて試してみることにしました。
CursorのARRがすごいという話を最近耳にするようになったのも触ってみるきっかけの一つです。
その辺は下記の記事にまとめています。
ええからはよどんなんか教えろや
って声が聞こえてきそうなので早速本題に
一切コーディングせずにブログサイトを改修した
普段Qiitaに投稿することが多い私ですが
- 大学院・英語の話: note
- 考えを殴り書きするところ: hatena
- ポエム: Qiita
- 技術記事: zenn
のように使いたいなーと思っていたのですが集約する自分のサイトが欲しくなり調べていたところ良さげなOSSを見つけました。
こちらのサービスはチームのブログを集約する目的で使われるようですが、カスタマイズすれば自分のブログをRSSで取ってきて集約できるな？
と思ったので、やってみることに。
cursorの基本的にな使い方
①Agentに依頼
②コーヒーを飲む
③出来上がったコードをチェック
という感じです。
コーディングしている様子
Qiitaに動画が貼れなかったのでreadmeに貼り付けました(1分30秒)
指示内容は
現在はTeamのMembersのブログサービスを集約しているアプリケーションですが、Membersの1人であるCatNoseのブログを管理するサービスに変更したいです。 トップページを/members/catnoseにアクセスした時のコンテンツに変更してください。
で動画がこちら。実際にコーディングしている様子を見たい方はどうぞ。’
結果がこの通り
| 修正前 | 修正後 |
|---|---|
 |
 |
ものの1分半で指示通りに個人ページの内容を、トップページに表示できています。
私はclaude 3.7 sonnet thinkingモードを使いましたが、
thinkingモードでなければもっと早いのかもしれないです。
エージェントの動き
①指示文を解析・質問文のメタ変換
②依存関係の調査
③コーディング
④テスト
のように動いています。
そもそもファイルをこちらで開く必要がないという点がcopilotを使ってた時と大きく違う点です。（最近追えていないのでCopilotにもエージェント機能あったりするのかもしれないですが）
一回実装してみてうまく行かないときは別のアプローチをしたりして、本当に裏で人間が高速に動いているみたいです。
実際のコードはクソコードなんちゃいますの？
ということで、指示内容とコミットを対応させてみました。私は一切手を加えていません。
この記事とPRのコミットを送りながら見比べていただくとわかりやすいかもしれません。
①指示内容：現在はTeamのMembersのブログサービスを集約しているアプリケーションですが、Membersの1人であるCatNoseのブログを管理するサービスに変更したいです。 トップページを/members/catnoseにアクセスした時のコンテンツに変更してください。
指示通り。一発でできたのが驚き。（この時にブログに残しておこうと思いました）
| 修正前 | 修正後 |
|---|---|
|
|
②指示内容：ヘッダー左のロゴを、CatNoseのプロフィール画像に差し替えしたいです。個人用になったのでヘッダーの「About」を「About CatNose」にしてください。「Company」は削除でいいです。
細かい修正もOK。要素指定せず抽象的な依頼でもOK。
| 修正前 | 修正後 |
|---|---|
|
 |
③指示内容：member-headerとmember-posts-containerの間にpopular-posts-containerを作って人気の2記事を表示してください。popular-posts-container → popular / member-posts-container → Articleという見出しをつけてください
要素を指定してもうまくいく。Container上部と下部borderが両方ついてるのが個人的に気になる
| 修正前 | 修正後 |
|---|---|
|
) |
 |
④指示内容：popularのcontainerの最後の下線が不要です。Articlesの線があるので重複しているように感じます。記事ごとのカードの四角に丸みを持たせてください。その他モダンなデザインに修正してください。その際コンポーネント間の統一感を重視してください。
抽象的なスタイル修正もOK
| 修正前 | 修正後 |
|---|---|
|
 |
⑤カラーテーマを変えたいです。白背景・グレー・ミントグリーンを使っておしゃれな感じにしてください。その他ワンポイントで別の色を使っても良いです。
カラーテーマの修正も行けた。「オシャレな感じ」とかも、マウスオーバーの立体感や背景のグラデーションに反映される。
| 修正前 | 修正後 |
|---|---|
|
 |
⑥人気記事の数を2→3にしてください。
これだけコミットミスで2個に割れてしまった
めちゃくちゃ修正が早かった
| 修正前 | 修正後 |
|---|---|
 |
 |
⑦人気記事がzennから取得している場合いいね数を表示できますか？
APIの認証があることから実装コストが高いことを説明された。
その上で、人気記事は３つしかないことを理由に、ベタ書きで実装し「10+」のように運用することを勧めてきた。
| 修正前 | 修正後 |
|---|---|
|
 |
賢すぎる
欠点はないのん？
既存コードで使うと余計修正を加えてきたりすることがあるのでそこが不満ではあります。
いい感じにやってくれるのとトレードオフなのでこの辺は細かく指示を出すとか、こっち側の問題でもありそうです。慣れてくればもっと精度の高い指示が出せそうだなという感触はあります。
あとちょいちょいレスポンスが不安定な時もあるので簡単なタスクはclaude3.5で様子見してもいいかもしれないです。
感想
多分スクショとか撮ってなければ考える時間も含めて30分ぐらいで一度もコードを触らずに仕様変更とデザインの修正が終わりました。
抽象的な指示も難なくこなしてくれます。
当方バックエンドエンジニアのため、UIデザインの能力が絶望的なのですが、細かいスタイル修正なくざっくり指示するだけでいい感じのサイトが出来上がったので、これから個人開発なども捗るかもしれないです。
またCopilotに戻るかもしれないですが暫くCursor を使ってみようと思います。
また、
「〜をリファクタリングしてくれ」といった要望にも応えてくれます。
実際に業務で使える能力があるのか検証するのはこの手のタスクを与えてみるのが良いかもしれないですね。
色々触って出来上がったサイトがこちら。
AIがつけた立体的なアニメーションなどもあるのでよければ触ってみてください。
OSSのデモサイトと比べてみると分かりやすいかも知れません。
これからQiita以外の記事もがんばります。
触ってみたい人・背中押して欲しい人への情報
- とりあえず2週間無料で試せます。限定機能で引き続き無料で使い続けることもできるよう
- OpenAI/Gemini/AnthropicのAPIキーがあれば有料版を使えます
- VSCodeの拡張はそのまま移行できます
- VSCodeユーザーにとっては一個拡張を入れる時ぐらいの以降コストの無さです
- また、VSCodeをフォークしているので基本的にエージェント以外はVSCode触ってるのと同じです
- そもそも自分でコーディングする頻度やバグ調査などもエージェントに依頼するため、JetBrainsのコーディング補完や高度なジャンプ機能が要らなくなってしまいました
- デザイナーさんが今まで技術的に難しかったタスクをちょちょっと指示出してPR出すとかも全然できるようになると思います
ぜひ非エンジニア職のプロダクトに関わる人たちは触ってみることをお勧めします
とりあえず触ってみたいけどちょうどいいプロジェクトがないという人はぜひteam-blog-hubを使ってみてください。catnose99さんに感謝
誰か別のモデルでどれぐらい差があるか検証してください
いやいや、それCopilotでも出来ますよ。みたいな情報もあれば知りたい！