1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Browser tools for GitHub Copilot が GA になったので、電卓アプリを作ってテストさせてみた

1
Posted at

はじめに

2026 年 7 月 1 日 Browser tools for GitHub Copilot が VS Code で GA になりました。

一言でいうと、AI エージェントが本物のブラウザを自律的に操作できるようになった機能です。

これまで Copilot に「このページを確認して」と頼んでも、AI はコードを読むだけでしたが、これからはエージェントが自分でブラウザを開き、ボタンをクリックし、バグを見つけて、コード修正まで一貫して行えるようになります。

この記事では、実際にエージェントに電卓アプリを作らせてブラウザでテストさせた体験を書きます。

エージェントが使えるブラウザ操作ツール

外部の MCP サーバー不要、VS Code に標準搭載です。

ツール できること
openBrowserPage / navigatePage URL を開く・ページ遷移
readPage / screenshotPage ページ内容の読み取り・スクリーンショット
clickElement / typeInPage / hoverElement / dragElement クリック・入力・ホバー・ドラッグ
handleDialog alert / confirm / prompt への応答
runPlaywrightCode 複雑な自動化をスクリプトで一括実行

やってみた

準備

VS Code を最新版にアップデートするだけで使えます(GA でデフォルト有効)。

チャットを Agent モードに切り替えて、ツールピッカーで「Built-in > Browser」が有効になっていることを確認しておきます。

Step 1:電卓アプリを作ってもらう

空フォルダを VS Code で開いて、このプロンプトを投げます。

0〜9の数字、四則演算(+−×÷)、クリア、イコールのボタンを持つ電卓を
HTML・CSS・JavaScript で作ってください。

エージェントが index.htmlstyles.cssscript.js などを生成します。

Step 2:ブラウザで開いてもらう

電卓をブラウザで開いてください。

エージェントが openBrowserPage ツールで統合ブラウザに index.html を開きます。

電卓の初期表示
VS Code の統合ブラウザ内に電卓が表示された

Step 3:テストしてもらう

全ての操作が正しく動くか確認してください。

エージェントが clickElement を呼び出して実際にボタンを押してテストします。7 + 3 = 10 の確認から始まり、各演算を順に検証していきます。

7 + 3 = 10 のテスト
エージェントが 7+3= の順にクリックし、結果が 10 であることを確認した

Step 4:バグを発見する

テストを続けていくと、エージェントが 5 ÷ 0 を実行します。

5 ÷ 0 = Infinity のバグ
Infinity が表示された。ゼロ除算チェックが抜けていた

エージェントが「5 ÷ 0 を実行したところ Infinity が表示されました。ゼロ除算の処理が実装されていません」と報告してくれます。

Step 5:バグを直してもらう

バグを直してください。

エージェントが script.js を修正します。

  case '÷':
-   result = a / b;
-   break;
+   if (b === 0) {
+     current = 'エラー';
+     updateDisplay();
+     previous = '';
+     return;
+   }
+   result = a / b;
+   break;

修正後、エージェントがブラウザをリロードして同じ操作を再実行し、「直った」ことを確認します。

修正後:エラーが正しく表示された
5 ÷ 0 に対して エラー が正しく表示されるようになった

プロンプトを数回投げるだけで「作る → テスト → バグ発見 → 修正 → 再テスト」のサイクルが完結しました!

プライバシーについて

「AI がブラウザを操作できるなら、自分のタブも全部見られる?」

いや、違います。設計はこうなっています。

  • 自分が開いたタブ:ツールバーの「Share with Agent」ボタンを押さない限り、AI からは見えない
  • エージェントが開いたタブ:自分の Cookie・ストレージとは完全に分離されたセッションで動く
  • カメラ・マイク・位置情報:AI が自動で承認することはできない

ログインが必要な操作をエージェントに任せる場合は、自分でログインしたタブを Share with Agent で明示的に共有する必要があります。

まとめ

Browser tools for GitHub Copilot の GA で、フロントエンド開発の「確認する」作業を AI に任せられるようになりました。

「作ったものが動くか確認するのは自分の仕事」という前提が変わっています。試してみる価値はあると思います。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?