【AI駆動開発】若手が生成AI任せで仕事して、レビュアーがストレスで禿げかけた話

はじめに

こちらのnoteの若手目線のお話になります。

はじめまして！駆け出しエンジニアのしっしーです！
株式会社HARVESTでフロントエンドエンジニアをやっております！
先日、弊社でCursorを使用したAI駆動開発を行うことになり、全くの知見がない中手探りで導入を進めていきました。
結果、生産性が爆上がりするかと思いきや、レビュワーを禿げかけさせるまでの事態に陥りました😱
そんな時、少し前の記事にはなりますが上記のバズり記事を見て、まさに自分がシニアエンジニアの方を陥らせてしまっている状況だなと思いました。。。
反省と学びのアウトプットとして、若手目線からの考えを記事にしたいと思います！

先にまとめ

• 弊社の標準エディターをCursorにすることになった👏
• Cursor自体は非常に優れたツールであり、Rulesを厳格に整備すれば生産性は爆発的に向上する
• コーディングエージェントを使用して作成したアウトプットは、使用者の設計力以上のパフォーマンスを発揮することはできないので、駆け出しエンジニアは設計力を磨こう

プロジェクト概要

Webデザイナーが制作した、HTMLをReactでリコードする

技術構成

言語: TypeScript
ライブラリ・フレームワーク: React、TailwindCSS、Highcharts
ビルドツール: Vite

Cursor導入のきっかけ

従来の弊社では、エディターはVSCode、AIエージェントとしてGitHub Copilotを使用していました。ただ、「Cursor」の人気が高まっていることもあり、試験的にCursorを導入することになりました。生産性が上がるようなら、弊社のエディターはCursorをデフォルトにすることも検討していました。

導入決定の会話

CTO: AI駆動開発をうちも進めていきましょう！今回は人気も高いCursorを使ってみよう！もう課金しておいたので自由に使ってね😎

しっしー: わかりました！調べながらやってみます！

→ベンチャー企業すぎる意思決定の速さ

Cursorの使い方

前提

まず、Cursorには2つのモードがあります。

ベータ版の機能として、カスタムモードもあるようですが、ここでは触れません。

Agent モード

複雑なコーディングタスク向けのデフォルトモード。Agent はコードベースを自律的に探索し、複数のファイルを編集し、コマンドを実行してエラーを修正し、リクエストを完了する。

Ask モード

学習や探索のための読み取り専用モード。Ask はコードベースを検索し、変更を一切加えずに回答を返す—コードを変更する前に理解を深めるのに最適。

また、Rulesという機能を用いて、Cursorに適応するコンテキストを定義できます。
Project Rulesを設定すればプロジェクトごとに、User Rulesを設定すれば、全プロジェクトにコンテキストを適応できます。

（他にもいろいろな機能がありますので、詳しくは公式ドキュメントを参照してみてください。）

設定

• Project Rulesを作成して常時コンテキストに適応させる
  • フロントエンド用のrules（使用ライブラリのバージョン、Atomic Disignを使用すること、程度）
    → コーディング規則については特に記載をしていなかった
• モデルはclaude-4-sonnetを使用（コードについてはclaudeがいいと聞いたので）

実装方法

• Agentモードを使用して、Webデザイナー制作のHTML、CSSをCursorに投げ、rulesを元にReactにリコードさせる
• プロンプトは、「このHTMLと対応するcssファイルを参照しつつ、Reactで書き換えて。ただし、〇〇の要素を付け加えること。そのほかの条件は...」のような感じ
  • 既存のHTMLをそのままReactにリコードしてもらいつつ、現状で実現していない機能は、追加条件として追記していく
• セルフレビューして動作問題なければ適応
• 出力されたコードが理解できない時、そもそもどのように指示をしたらいいかわからない場合は、Askモードで相談する

問題

作業段階で起きたこと

• CursorのAgentモードで書かせると、要求は満たすものの、やけに複雑なコードを書く場合がある
  • もはや自分で書いた方がシンプルで良いコードを早く書ける場合もあったり😳

結果：Cursorが出してきたコードをレビューするのにも時間を取られ、手戻りが発生し工数が増加

レビュー段階で起きたこと

• 動いてはいるものの、コーディング原則を守れていないコードを量産

結果：レビュー工数が大幅増加、CTOが疲弊、禿げる

機能追加、改善段階で起きたこと

• コードのスパゲティ化によりデグレが頻発
• 可読性の低さにより修正にかかる工数が増加

結果：技術的負債の量産体制構築

原因分析

• Cursorがコードを生成、意図も説明してくれるものの、そのコードが設計に沿っているか、プロジェクトにおける最適解なのかの判断ができていない

教訓と対策

教訓

• コーディングエージェントを使用して作成したアウトプットは、使用者の設計力以上のパフォーマンスを発揮することはできない

→コーディングエージェントはあくまでも「作業者」であり、指示が正しくないもしくは曖昧だと、無限に技術的負債を量産する
→Rulesをかなり厳格に整備しないと、期待するレベルのコードは出てこない

対策

• 個人としての対策

  • 雛形や補助に限定してAIを活用
  • AIが出したコードを理解してから提出

• チームとしての対策

  • Cursor Rulesの整備
  • レビュー基準の明確化
  • 小さな単位でのレビュー依頼

まとめ

Cursor自体は非常に優れたツールであり、Rulesを厳格に整備すれば生産性は爆発的に向上することがわかったため、弊社の標準エディターとしてCursorを導入することになりました👏
また、Cursor Rulesを厳格に整備したことにより、Cursorの精度が上がったことはもちろんですが、同時に会社のコーディング規則が整備されました🙆

生成AIはできないことをできるようにするツールではなく、できることをより早くできるようにするツールです。（なぜならば、自分ができないことは指示出しもままならず、正しくできたかどうかの判断もつかないため、使いこなすことができないからです）。

※「若手が生成AI任せで仕事して、レビュー地獄で逆に生産性が落ちた話」より引用

本当にこれが全てだと感じました。
「実働しているHTMLをCursorに食わせれば、爆速でタスク終わるっしょ！」とか思っていた自分を殴りたいと思います。
駆け出しエンジニアがAIに翻弄されないためには、まず設計する力を磨くことが第一かと思います。
感動したレビュアーの髪の毛が生えてしまうくらい、圧倒的設計力を身につけていきましょう！

お知らせ

株式会社HARVESTでは、一緒に働くエンジニアを募集しております。
ご興味のある方は、[e-mail] までご連絡下さい！