Github Copilot ワークショップをやってみた
概要
GitHub Copilot ワークショップというコンテンツを知り、これをやってみた記録（公式コンテンツとは別物なので注意）
実際に行った結果はこちらのリポジトリを参照のこと
背景
本職では長くマネジメント業務を行っており、自分でコードを書くことがめっきり減った。そんな中でメンバーがAIを駆使してコーディングを行っているのが楽しそうだったので、入門する機会を伺っていた。たまたまコンテンツの存在を知り軽く触ったところ色々学びがあったので、本腰を入れて検証してみた次第。
やったこと
当該コンテンツは、前半で一通りCopilotの使い方のレクチャーがあり、後半でCopilotと共同しながらポモドーロタイマーを作るという内容。用意されているポモドーロタイマーのUIモック（png画像）をCopilotに渡し、アーキテクチャの設計、機能一覧の作成、実行計画の検討をそれぞれ行った上で、段階的に実装まで行っていく。
コンテンツ通りに行うと指定されたリポジトリをフォークすることになるが、今回は別途自分でリポジトリを立て、ローカルのVS Codeを使って実施した（GitHub Codespacesを使う方法も案内されていたが使わなかった）。
学んだこと
初歩中の初歩から知って良かった便利機能まで、いろいろと学んだ。以下列挙。
コード補完
基本中の基本だが一応触れておく。VS CodeにCopilot拡張機能をインストールすることで、AIを使ったコード補完を利用することができる。コメントを書くだけでコードを生成してくれるのはやはり便利。
コードについて質問する
Copilot ChatのAskモードを使用することで、コードについての様々な質問が可能となる。このとき、Chatに#を打ち込むことでファイルや関数（！）をコンテキストとして指定することができる。関数レベルで指定することができるのは知らなかった。コンテキストには他にも画像やファイルを指定することができる。
Copilot Chatでファイルや関数をコンテキストとして指定している様子
設計資料を.md形式で作成する
どちらかというとベストプラクティスの一種という感じの話題になるが、Copilot ChatのAgentモードを使用して、本実装のための設計資料を.md形式で作成させるやり方を学んだ。
たとえばこのプロジェクトでポモドーロタイマーのWebアプリを作成する予定です。添付の画像はそのアプリのUIモックです。FastAPIとHTML/CSS/JavaScriptを使用してこのアプリを作成するにあたって、どのような設計で進めるべきか、アーキテクチャの提案をしてください。というプロンプトをCopilot Chatに投げたのち、これまでの会話の内容を踏まえてプロジェクトのルートにarchitecture.mdというファイルを作成し、Webアプリケーションアーキテクチャ案をまとめてください。と指示すると、ファイル構成などが含まれるアーキテクチャの概要がテキスト化される。
以後はこのarchitecture.mdをコンテクストに含めた上で、機能一覧（features.md）、実装計画（plan.md）などを作っていくことで、Copilotに本実装させる準備が整ってゆく。
Copilotに恒久的な指示を与える
Copilotに指示するたびに、毎回architecture.md、feature.md、plan.mdを指定するのは手間となる。そのような時のために、便利な.github/copilot-instructions.mdがある。
このファイルには、たとえば以下のような内容を書くことができる。
このプロジェクトは、ポモドーロタイマーをFastAPIで実装するものです。
以下はプロジェクトの重要なファイルです。ユーザーの指示に対して、必要に応じてこれらのファイルを参照してください。
- `pomodoro.png`: アプリケーションのUIモックです。
- `architecture.md`: アプリケーションのアーキテクチャドキュメントです。
- `features.md`: 実装する機能の一覧です。
- `plan.md`: 段階的な実装計画です。
GitHub上で動くGitHub Copilot
GitHub上でいくつか設定をすれば、GitHub Copilotの力を借りて開発を加速することができる。たとえばPull Requestの内容をコードをもとにサマリーして作ってくれるCopilot Summary、レビュアーとしてCopilotをアサインするCopilot code reviewなどがある。脆弱性スキャンを実施してくれるGitHub Advanced Securityについても記載があった。
その他
他にもGitHub Copilotを用いて簡単なユーザーの指示からIssueを自動起票し、さらにこうして作成されたIssueにCopilot Agentをアサインしてコード実装、PR作成、テスト実行までを自動で実施させる方法が紹介されていた。
結果と感想
以上のノウハウを駆使して行ったAI支援開発は、短時間での凄まじい量のコード生成、単体テストを通した自己検証、繰り返し行われる改善を見せてくれた。しかしながら途中からテストコードを通すことをCopilotが諦め始め、結果としてはplan.mdを完遂することなくCopilotの使用制限に達して終了した。
敗因はいくつか考えられるが、中でもひとつあげておきたいのは、自分がよくわかっていない技術（今回はBroadcastChannel）を使われると人間側もAIの試行錯誤を理解できず、結局袋小路にハマるということ。AIはそれを使う人間の能力以上のものはなかなか生み出せないという実際を知った。
とはいえものの数十分で方針付きのモックアップが出来上がるのは楽しいし、末恐ろしい。今後も時間を見つけてキャッチアップに励みたい。
Discussion