GitHub Copilot Agentモードを使って、Reactアプリを作ってみた
はじめに
2024年に実施された東京都都知事選に出馬された安野さんは、Youtubeにて2025年が「AIエージェント 元年」になると予想しました。AIエージェントは今年、大注目の技術です！
今日はたくさんあるAIエージェント中でも、GitHub CopilotのAgentモードについて紹介します。
実は、2025/2/7にGitHub CopilotのAgentモードがプレビューで利用可能になりました。
この記事を読んでいただくと、AIエージェントを使った開発がイメージできるようになると思います！
できること
今まではEditモードとしてGitHub Copilotが利用可能でした。今回新たに、Agentモードが利用可能になりました。
GitHub Copilotの新しいエージェントモードは、自身のコードを反復してエラーを認識し、それを自動修正することができます。また、ターミナルコマンドを提案し、実行を促すこともできます。また、ランタイムエラーを分析し自己修復が可能です。
ターミナルでコマンドを提案してくれたり、エラーを自分で認識し、解決してくれるみたいです！
事前準備
GitHub Copilot
個人利用の料金
毎月の支払いサイクルを選択すると、カレンダー月ごとに 10 米国ドル が課金されます。
年単位の支払いサイクルを選択した場合、年間 100 米ドル が課金されます。
https://docs.github.com/ja/copilot/managing-copilot/managing-copilot-as-an-individual-subscriber/managing-your-github-copilot-pro-subscription/about-billing-for-copilot-pro
GitHub Copilotは有料サービスなのですが、30日間のトライアル期間中は無料で利用することができます。
設定
※ GitHubのアカウントがない方は先にアカウントを作成してください。ここでは説明を割愛します。
GitHub 設定にアクセスし、「Start a free trial」を押下します。
「Upgrade Pro」を押下し、請求情報を入力します。これでProに切り替え完了です！
これでGitHub Copilotが使えるようになります。
Visual Studio Code Insiders
公式に「Visual Studio Code Insiders」を使うように書かれているので、こちらに従います。
こちらからダウンロード可能です。
ダウンロードされたアプリを起動すると、Visual Studio Codeとほとんど同じUIのアプリが起動します。
「Sign in to Use Copilot for Free」を押下すると、ブラウザが起動し、GitHubの認証ができます。表示に従って、認証すれば設定完了です。
サイドバーを開いて、「Edit」→「Agent」にすることでエージェントモードが利用できます。
ちなみに、設定から言語を日本語にすることができますが、難しいことは英語で返されます。
Editモードを使ってみる
まずは「Edit」モードを使ってアプリを作るために、以下のプロンプトを投げました。
以下の要件のアプリケーションを構築してください。
・言語はJavaScript、ライブラリはReactを使ってください。
・カウンターアプリを作りたいです。上に数字、下にボタンがあり、ボタンを押すと数字が+1されるようにしてください。
すると、ローカルにファイルが作成されていきます！
「Accept」or「Discard」するか問われているので、すべて「Accept」しました。「Accept」するとファイルがローカルに保存されました。
指示されるがまま、npm startを実行したら、以下のエラーが出ました。
npm error enoent Could not read package.json
このエラーをAgentモードで解決してみます。
Agentモードを使ってみる
ここから本題の「Agent」モードに切り替えます。モードを切り替えると、セッションが新しくなるみたいです。
このエラーを修正してもらうために、以下のプロンプトを投げました。
以下のエラーが発生したので、修正してください。
npm error enoent Could not read package.json
すると、package.jsonが作成され、コマンドを提案してくれました。ファイルを「Accept」した後、コマンド「Continue」を押してみました。
ターミナルが開き、Copilot用のプロセスが起動し、コマンドを実行してくれました。
次に、ブラウザでアプリを見たいので、以下のプロンプトを投げました。
Reactのアプリがブラウザで見れるようにしてください。
いくつかのエラーが発生したのですが、なんと出力されたメッセージを勝手に読んで、新しいファイルを作成したり、ファイルを修正したりしてくれました👏
無事、ブラウザでアプリを見ることができました👏
良かった点
- 今までChatGPTにコードを貼って、生成されたコードをコピーしていたので、その手間を省くことができました。
- コマンドを提案してくれて、ボタンを押すと、ターミナルが起動してくれてるのは、めちゃくちゃ便利だなと思いました。
- ターミナルで出力された結果を検出して、ファイルを修正してくれる部分に感動しました！
良くなかった点
- ターミナルでのコマンドが正常終了しているはずなので、「Running command in terminal…」表示されて、次のコマンドが出力されなかったので、まだプレビューモードだなと感じました。
- Agentモードでは、GPT 4oとClaude 3.5 Sonnetしか使えないのですが、推論の精度が低かったです。ある程度、できることをイメージしている状態でプロンプトを投げないと、変な方向に進んでいきます。
まとめ
- これからの時代、AIエージェントを使った開発が当たり前になるのだなと実感しました。無料で30日間試せるので、食べず嫌いせず試してみるといいと思いました！
Discussion