VSCodeのCopilot Editsを試してみた
先日公開されたVisual Studio Codeで、「Copilot Edits」というGitHub Copilotが自動的にファイルを生成・編集できる機能がリリースされました。
そこで早速、この機能を使って「ログイン画面」のHTMLを作成してみました。
Copilot Editsを起動する
Copilot Editsを起動するには、画面上部のCopilotアイコンをクリックして「Copilot Editsを開く」をクリックします。
または、チャットを起動中に左上のアイコンで切り替えます。（こちらは「Copilotの編集」となっていて翻訳まわりがややこしいです。
右下で、モデルを選択できます。現状、GPT 4o、Claude 3.5 Sonnet、Gemini 2.0 Flashとo3-miniが選択できます。GPT 4o以外は「プレビュー版」となっています。
ログイン画面を作ろう
ではここで、各モデルに次のようなプロンプトを投げてみました。
ログイン画面を作って
すると、ファイルが自動的に生成されます。Geminiなどを選択した場合は、一旦許可を求めるダイアログが表示されます。
生成されたファイルは、未保存状態で留まるので、「採用」ボタンをクリックするとファイルが保存されます。
各モデルで生成した結果はこちら。
GPT-4o
こちらはなかなか厳しい結果でした。初っぱなから、入力欄が横にはみ出てしまいました。
エラーメッセージは正しく挿入されました。
Claude 3.5 Sonnet
こちらは、優秀すぎるのかいきなりReactのコンポーネントを作ってくれました。ただ、Reactのプロジェクトなどは作ってくれないので、自分でインストールなどをする必要があるようです。
そこで、少しプロンプトを変えて次のようにしました。
HTMLとCSSだけでログイン画面を作って
すると、しっかり崩れないようなログイン画面を作ってくれました。（テキストフィールドの右に写っているアイコンは、Chrome拡張機能のもので生成したものではないです）
エラーメッセージに関しては、優秀すぎるゆえかJavaScriptのプログラムを作ろうとしたり、再びReactベースで作ろうとするなど、高度なことをやろうとしすぎてなかなか追加してくれず、途中断念しました。
Gemini 2.0 Flash
こちらも、JavaScriptのプログラムも作ってくれたりして優秀です。ボタンの色をなぜか緑にしてきました。GPTやClaudeはBootstrapを学習のベースに使っていて、GeminiはGoogleのMaterial Designなどをベースにしているのでしょうか？
エラーメッセージは、なぜかフォームの下に追加されました。
o3-mini
結論からいえば、これが一番期待が持てるモデルでした。
エラーメッセージの追加もそつなく行ってくれます。
追加で少しお願いしてみました。
エラーメッセージを赤枠で囲って
XでログインとGoogleログインボタンを追加して
欲を言えば、Xでのログインボタンにはアイコンなども付与してほしかったですが、この辺も追加プロンプトで生成できます。
o3-miniは「こうなって欲しいな」という思いを、かなり素直に実現してくれました。
VSCodeに戻りました
ということで、VSCode+Copilot。Cursorをしっかり研究して、良いところをしっかりパクってくるところは、王者の風格を感じさせます。この開発力から逃げ切れるのかがCursorの今後を左右しそうです。
筆者は、Cursorは「アプリアイコンにファイルをドラッグできない」という致命的なバグ？ 仕様？ があって、これがかなり不便していたので、一旦VSCodeに戻ってきました。
また、次のCursorのアップデートでVSCodeにない機能が搭載されたら戻ろうと思います。
おまけ：bolt.new
最後に、同じプロンプトでbolt.newで作ってみました。
正直、格の違いを見せつけられました。。もはや、このまま使えそうです。bolt.newはやっぱりレベル違いにすごいです。。