こんにちは！

生成AIの台頭が凄まじいですよね。

我々WEBエンジニアにとって死活問題になりうる存在ですので、日々キャッチアップして行かなければと少々焦っておりますが、ついていけていない感が否めません…

そんな中、Xで生成AIの1つであるGitHub Copilotのさらなる進化といったつぶやきを見かけ（てしまい）ました。

ということで、今回はつい先日プレビュー公開された「GitHub Copilot Agent Mode」を使用してみたいと思います。

環境・準備

VS Code Insiderのダンロード

この記事を作成している2025年2月11日の段階では普通のVS Codeでは使用できず、「VS Code Insiders」というVS Codeの先行プレビュー版を使用する必要があります。（こちらから最新版をダウンロードしてください）

GitHubとの連携

VS Code Insidersを開くと下の画像ような表示になっているかと思うので、「Set Up Copilot for Free」→「Sign int to Use Copilot for Free」をクリックします。

そのあとはブラウザに切り替わるので、GitHubとの連携を承認します。

Agent Modeの有効化

エディターに戻ると下の画像のような表示になっていると思うので、右上の赤枠をクリックします。

続いて、右下に「Edit」が選択されているセレクトボックスが表示されるので「Agent」を選択します。

これで設定は完了です。

ToDoアプリを作ってみた

では試しにエージェントモードを利用して極力自ら作業せずに「Next.js(App Router)×Typescript×Tailwind.css」でToDoアプリを作成していきたいと思います。

まずは、下記コマンドでプロジェクトを作成します。（選択肢は全てデフォルトのまま）

1npx create-next-app@latest todo-app --typescript --tailwind --app

※いい感じのプロンプトを投げればプロジェクト作成からできるはずですが、なかなかうまくいかなかったので今回はNext.jsのプロジェクトだけ先に作成してしまいました。

作成されたプロジェクトのサーバーを立ち上げてみます。

良さそうですね！

ではここからエージェントモードにしたGitHub Copilotに頼ってアプリを作っていきます。

まず、下記のような指示を出してみました。

Next.js（App Router）とTypescriptとTailwind.cssで簡単な
ToDoアプリを作りたいです。
今エディタで開いているtodo-appフォルダのファイルを編集して作成してください！

実行すると、何やら解析っぽいのを始めて、少し経つと色々なファイルが自動で編集され始めます。（す…すごい！！）

編集が終わった後に下の画像の赤枠の「accept」を押すと編集が保存されるようです。

画面を見たのですが、エラーが起きていました。

これはNext.jsのクライアントコンポーネントの宣言がされていないからのようで、ToDo.tsxファイルの1行目に「"use client";」を追加することで修正できました。（この修正も指示してみればよかった）

そして、改めて画面を確認すると、ToDoアプリができておりました。

動作を確認してみます。

かなり簡易的なもの（そういう指示だったので）ですが、下記の機能ができているようです。

• ToDoの追加機能
• ToDoのステータス更新機能
• ToDoの削除機能

なかなかいい感じですね！Σ੧(❛□❛✿)

機能を追加してみる

では、ToDoアプリに優先度を設定できるような機能を追加してみます。

下記の指示を出してみました。

追加で「高」「中」「低」の優先度のタグを設定できる機能を作ってください。

実行すると、再度解析が始まり、ファイルが自動で更新され始めます。

指示していた通り、「高」「中」「低」とはならず英語になりましたが、いい感じに優先度を設定できるセレクトボックスが作成されていました。

挙動を確認してみます。

しっかり機能していますし、優先度に応じてタグの色がいい感じに設定されているのも良いですね！

アニメーションを追加してみる

最後にアニメーションも追加してみようと思います。

下記の指示を出してみました。

最後に良い感じにアニメーションをつけてください。

途中構文エラーが発生してしまっていたので、その修正もお願いしてみました。

ここではJavaScriptとReactのアニメーションライブラリである「framer motion」を利用してアニメーションを実装したようです。（現在は「MOTION」という名前に変わっている？）

ToDoの追加時と削除時のアニメーションが追加されているのがわかります。

終わりに

いかがだったでしょうか？

これまでGitHub Copilotをあまり使ってこなかったため、今回のAgent Modeが追加されたことで何が良くなったのか？というのはあまりわかりませんでした。

ですが、そういった状況にいる自分がまずいぞという感想を持ちました。

もちろん生成されたコードの品質などをしっかりチェックできる能力があることが前提ですが、GitHub Copilot（生成AI系のツール）を使いこなせるかどうかでエンジニアとしての生産性が段違いに変わってくると感じました。

まだプレビューの段階での公開ですが、Agent Modeを積極的に使っていき、これからの生成AIの時代にも太刀打ちできるような力をつけておこうと思います٩( 'ω' )و

参考記事・動画

• GitHub Copilot:エージェントの覚醒 - GitHubブログ
• GitHub Copilotのエージェントモードを使ってみた
• 【メガ進化】Github Copilotが待望のAIエージェントを搭載！今までからは考えられないくらい便利になったので解説