自分なりのCopliotとの付き合い方：2025年4月

Cursorが勢いをましていますが、私としてはそう簡単にvscodeから乗り換えられない腰の重さがあります。さらに以前から会社として、Github CopilotのBusinessシートに課金しているので、良い付き合い方が無いかなと考えていました。

今回実務案件で良い感触を得られたので、感想になりますが記事として残そうと思いました。

Cline（エージェント）への所感
ちなみに流行りに乗って、Cline + Claude 3.7 sonnetの試用したことがあります。40ドルほど使いNext.js+Supabaseでのプロジェクト立ち上げを試しました。

その時の感想としては、体験として楽しいしスピード感も良いけど、従量課金の伸びが気になりました。それだけの事をしてくれているとは思いますが、無視出来る金額では無いと思います。

また、完全にお任せには出来る段階では無いですし、こちらの指示の経験も足りていません。プロジェクト全体に対してコミットしてくれる結果、こちらのチェック範囲も広くなります。
他の人が書いてくれたコードを読みながらチェックするのは簡単なことではありません。

---

そういった経緯もあり、VS Code + Copilot(Claude 3.7 sonnet)での狭い経験ですが、実務でも使っている事例を紹介出来ればと思います。

前提

この記事はUI/デザイン寄りのフロントエンド実装時に、Copilotを使用した時に感じた内容になります。

使用技術の前提

フレームワーク：React, shadcn, react-hook-form

💬 コメントを書かせるのは良い

前提技術で実装していくと、コンポーネントファイルが量産されると思います。コンポーネントの内容を理解しやすくするために、ファイル名を工夫したりフォルダ階層を工夫したりします。
サービス開発での機能は多岐に渡り、それぞれに意味合いの違うコンポーネントが存在します。同じプロジェクト内でも、しばらく手を付けていない箇所は「？？？」と、コードの読み直しが発生します。
その度にコメントって大事だなと思うのです。

今回Copilotにコメントを書かせたのですが、思った以上に的確・丁寧に書いてくれます。

Copilotはコードが読めるので「コードは変更せずにコメントを追加してください」と伝えると、開いているファイルのコードにコメントを追記してくれます。

Reactはjsx/tsxを多用しますが、js/html（場合によってはcss）も１ファイルに記述するので、コメントもまとめられて便利だと思います。
また、「@param」のようなjsDoc風なことも追記してくれます。

今回はshadcnを使っているのでshadcnのコンポーネントの意図も拾ってコメントしてくれます。情報の多いコンポーネントライブラリを使うメリットですね。

Clineと比べるとレスポンスが遅いなと感じるCopilotですが、このやり方ならコメントをCopilotが考えている間に他のファイルの作業は気にせず行えます。
ほんとにアシスタントみたいですよね。ある程度形になって動作も問題無いことを確認したら、Copilotに「コメント書いといて」と頼んで自分は別の作業に移れます。

📚 型が苦手だけど便利さは享受している、なら書いてもらおう（参考にしよう）

Reactならtypescriptを使っていると思うのですが 型 は面倒じゃないでしょうか？自分は面倒です。
コンポーネントを細かく分割していくと、特に面倒だなと感じています。
でも補完も効くし、エラーも出してくれるので便利さは享受しまくってます。

これもCopilotに書いてもらってます。もしくは参考にしています。

今回はreact-hook-formを使ったのですが、メジャーなライブラリなら型情報も比較的適切に書いてくれます。型とは違いますがvalidationも書いてもらってます。

フロントなので一旦のダミーデータを用意することも有るのですが、ダミーデータを用意し、それに合わせた型を書いてもらうのも、手間が省けて良い体験です。

これまで一旦はanyとしていた所を書いてもらえるようになったのでモヤモヤを残さず進めれるので気分が違います。

時間をかけて今まで書いていたところを、段違いのスピードで書いてもらえるので大変助かっています。もちろん型パズルが得意な人なら簡単なところはご自身で書いたほうが早いことも多いと思いますが、私のように苦手意識があると、下手に手をいれるよりまるっと任せてしまう方が良いと思っています。

💡 便利・必要だけど面倒なところに

コメントや型は便利なので使える方が良いと思います。しかし、機能そのものとは違い、また記述も面倒。こういったところにはAIを活用していけると思いました。

Playwright MCPも話題ですが、テストも同じ部類だと思うので使いたいと思っています。storybookなどもまさにですよね。そのうちPR時にCopilotが用意してくれたりしそうですね。

🎉 Copilotにもエージェントモードが来た

書いている間にCopilotにエージェントとMCPが来ました。
こちらも試して行きたいと思います。そのうちvscodeでcopilotと会話している時間の方が長くなりそうです。