GitHub Copilot Coding Agentはnpm, apt, zip, ImageMagick, Playwrightを活用する

AIによるCLIツール活用を促進する重要性

GitHub Copilot Coding AgentはLinux上でCLIを利用しており、現時点おそらくGUIを人間同様に操作することはできません。一方、CLIで扱える手段は試した限りでも多岐にわたっていました。

• npmパッケージの利用と管理、npm-scripts追加と活用
• zipファイル作成
• 作業前後のユニットテスト実行
• CodeQLによるセキュリティチェック
• PlaywrightによるHTMLのレンダリング画像生成
• Playwrightによるフォーム操作
• アイコンやロゴなど、簡易的な画像生成

試した限りなので、間違いなく上記はごく一部でしょう。任せられる仕事の幅はこれからも広がっていきそうです。AI Agentをコーディング手段としてのみ捉えていると見誤るかもしれません。

こちらのレポジトリ（Chrome拡張機能）でCoding Agentを用いました。本記事はその事例集となります。

npmはChrome拡張機能を実装する際に不要ですが、AIとの協業には効果的でした。

• テストフレームワークのJest
• Windows/Linux共通で使えるzipアーカイバであるbestzip
• 画像変換ツールsharp

これらを使うのはもちろん、package.jsonの管理からnpm-scriptsの作成までCoding Agentが代行してくれました。npmのエコシステムがAIの裁量を拡張した形です。

コーディングだけではない、GitHub Copilot Coding Agentの活用事例

GitHub上では、Issueに「Copilot」と名付けられた仮想的なユーザーをアサインすることでGitHub Copilot Coding Agentが仕事を開始します。よって、以下その仮想的なユーザーをCopilotと呼びます。

PlaywrightによるHTMLのレンダリング

CopilotはHTMLを編集した場合には、プルリクにスクリーンショットも添えて作業報告してくれます。

これはPlaywrightというテストフレームワークにより実現されていました。しかし、このスクリーンショットを撮る過程が一筋縄ではいかないことがCopilotの独り言から推察されます。

HTTPサーバーを建て、Playwrightブラウザを起動し、要素をクリックしたが、Chromeのローカルストレージが機能しないように制限が掛かっていた。よって、chrome.storageを模倣するモックを作った...

スクリーンショット１つ撮る手間として、人間ではコストが見合わないことをさらっとやってしまうのはAI Agentならではです。

簡易的な画像・アイコン生成

CopilotはSVGという画像形式を生成可能で、さらにそこからPNG形式に変換も行ってくれます。これにより簡易的な画像生成、アイコン作成が可能です。

SVGはテキスト形式であるため、LLMの能力内で自然言語から生成できるようです。

AIは大量生成が得意であるため、アイコンのバリエーションを要求してみました。

npm run generate-iconsという、SVGをPNGに変換するスクリプトも用意してくれました。Sharpというnpmパッケージが活用されています。依頼すれば、Copilot自身でこのスクリプトを実行してPNGをコミットしてくれます。

Chromeストア用の画像も同様の手段で提案を依頼しました。既に作ったアイコンイメージとテキストを組み合わせるという手段を用いて、それらしい画像を生成してくれました。破綻した画像が生成されることはほぼなく、レイアウトや配色の概念も認識しているようです。

なお、これらアイコンやストア用の画像がプルリクに貼られています。その過程をみてみると、一覧用のHTMLが作られてSVGファイルが並べられ、Playwrightでレンダリングするという手順でスクリーンショットが生成されていました。

ところで、プロジェクト初期にはSVGからPNGを生成するnpm-scriptはありませんでした。その時は、CopilotはImageMagickを自分の環境にインストールしてSVGからPNGを生成したようです。

テストフレームワークの活用

ユニットテストや後述セキュリティチェックは、明示的に指示せずともCopilotがイテレーション毎に実行してくれるので、整備が早ければ早いほど投資効果が高そうです。

JestというJavaScriptのテストフレームワーク導入を依頼したところ、プロジェクトに組み込むと同時にモックの作成、テスト追加も遂行してくれました。

前述のとおり、現時点でCopilot自身による人間が行う操作同様のGUIの実行検証は難しそうです。HTML要素はPlaywrightを使って検証してくれそうですが、Chrome拡張機能など特化した機能のQAは難しそうです。しかし、テストフレームワークを用いて実行検証の過程を擬似的にAI Agentに提供する試みは検討する価値があります。

不具合をTDDで認識する

不具合修正にTDDを組み合わせたところ、精度の高い仕事をしてくれました。

バグそのものによって失敗するテストをまず書くように指示します。

指示通り追加したテストが期待した通りに失敗することを確認し、作業を開始してくれました。

作業の結果、まだいくつかのテストが失敗し続けていることを自身で確認し、追加の修正を行ってくれています。

CodeQLによるセキュリティチェック

セキュリティ・脆弱性のテストも行ってくれています。

TDDによらない自律的な動作チェック

Copilotは、テストとして記述されたテストだけを行うわけではありません。人間がソフトウェアを操作しながらQAするかのように機能をテストしてくれることがあります。

以下Copilotの作業に登場するtest-sanitize.jsというファイルはレポジトリに存在しません。動作チェックのために一時的にスクリプトを書いたようです。

zipアーカイブ作成

Chrome拡張機能は.jsファイルなど必要なファイルを全て含めたzip形式で提出します。そのzipを「npm run build」で作成できるようにCopilotがメンテナンスしてくれました。

package.json

  ...
  "scripts": {
    ...
    "build": "npx bestzip dist.zip manifest.json background.js tabFlux.js domainUtils.js settingsProvider.js userOptions.js options.html options.js json-editor.html json-editor.js UserOptionsErrorLocalizer.js i18n.js icons _locales",
    ...
  },
  "devDependencies": {
    "bestzip": "^2.2.1",
    ...
  }

開発が進めば新しいjsファイルが増えます。その時、必要であればzip対象として追加し、ユニットテスト用のファイルは除外してくれています。このプロセスは明示的に依頼せずとも自律的な判断に基づいて行われており、感心しました。なぜなら、このあたりの取り決めはプロジェクト依存であるはずで、プロジェクト構造を正しく理解していないと判断を下せないはずだからです。

まとめ：AIの裁量を最大化したい

本記事で扱った事例はGitHub Copilot Coding Agentがうまくこなした仕事の例でした。

逆のケースとして、GitHub Copilot Coding Agentがいまいちうまくこなせなかったプロジェクトは以下の通りです。

• Windowsで動くGUIツール
• Windowsで動くDirectX12のプログラム

これらのケースで、GitHub Copilot Coding Agentが生産性向上に貢献できていなかったわけではありません。しかし、ポテンシャルを活用できない理由がありました。それは、実行はおろかビルド・コンパイルエラーの有無すらGitHub Copilot Coding Agent自ら検証できない点です。GitHub Copilot Coding AgentがLinuxであるからです。

ここから得た教訓は、いかにAI Agentに裁量を与えるかがAI Agent時代は重要であるということです。これは任せられる仕事の幅が広がるのみならず、AI Agentによる能動的な提案のバラエティも期待できるようになります。

AI Agentに与える裁量とは以下のようなものがあると考えています。

• コンパイル、ビルド、テスト等、コーディング結果の正しさを検証する手段
• CLIツール(npm、npxを含む)
• MCPサーバー等、外部サービスを利用する手段

WindowsプログラムをAI Agentと協業するのであれば、以下の手段が考えられます。

• ローカルのGitHub Copilotにエージェントモードで仕事してもらう(一番簡単)
• 副作用や外部依存がないモジュールを抽出し、部分的にクロスコンパイル・ユニットテスト可能にする(GitHub Copilot Coding Agentも仕事可能）

関連記事：Coding AgentによるIssueの並列実行について

Copilotが複数人いるかのようにIssueを同時並列で作業します。別途記事にしているので、よろしければあわせてご覧ください。