GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか？

CATs #2 ：AI駆動型開発の最前線：GitHub Copilot Workspace、Claude、Bedrockが変える開発スタイルの登壇資料です。

・セッション概要
GitHub Copilot Workspaceは作成したIssueを元に、AIが必要なタスクを分解し、実行計画を立て、仕様策定・実装までを行なってくれる新しい開発のプラットフォームです。現在はプレビュー中のこの機能を使い、これからの開発スタイル、我々が求められるスキルがどう変わるのかを検証してみました。

Transcript

1. 2024/09/25 ⾦城 秀哉 GitHub Copilot Workspaceで これからのアプリ開発がどう変わるのか？
2. ⾃⼰紹介 2 ⾦城 秀哉(Shuya Kinjo) • クラスメソッド株式会社 ◦ リテールアプリ共創部 マッハチーム • サーバーサイドエンジニア • 興味‧関⼼ ◦ IaC、CI/CD、⽣成AIアプリ開発 @joe-king-sh
3. リテールアプリ共創部とは 3 アプリ開発のクライ アントワークを専⾨ に⾏っています クラスメソッドの⽀援領域
4. GitHub Copilot使ってますか？ 
5. GitHub Copilotの歴史 5 • 2021年6⽉29⽇ ◦ VS Code向けにGitHub Copilotのテクニカ ルプレビューを発表
6. GitHub Copilotの歴史 6 • 2021年6⽉29⽇ ◦ VS Code向けにGitHub Copilotのテクニカ ルプレビューを発表 • 2022年6⽉21⽇ ◦ テクニカルプレビューを終了し、個⼈開発 者向けの有償サブスクリプションサービス として⼀般提供開始
7. GitHub Copilotの歴史 7 できること • コードの先読み補完 できないこと • こちらから明確な指⽰出し ◦ 出だしを書く ◦ コメントを先に書く ▪ など、⼯夫が必要 • 2021年6⽉29⽇ ◦ VS Code向けにGitHub Copilotのテクニカ ルプレビューを発表 • 2022年6⽉21⽇ ◦ テクニカルプレビューを終了し、個⼈開発 者向けの有償サブスクリプションサービス として⼀般提供開始
8. GitHub Copilotの歴史 8 • 2021年6⽉29⽇ ◦ VS Code向けにGitHub Copilotのテクニカ ルプレビューを発表 • 2022年6⽉21⽇ ◦ テクニカルプレビューを終了し、個⼈開発 者向けの有償サブスクリプションサービス として⼀般提供開始 • 2023年3⽉22⽇ ◦ GitHub Copilot Xの発表 ▪ GitHub Copilot chat ▪ GitHub Copilot for docs ▪ GitHub Copilot for pull requests ▪ GitHub Copilot for CLI ▪ GitHub Copilot Voice
9. GitHub Copilotの歴史 9 • 2021年6⽉29⽇ ◦ VS Code向けにGitHub Copilotのテクニカ ルプレビューを発表 • 2022年6⽉21⽇ ◦ テクニカルプレビューを終了し、個⼈開発 者向けの有償サブスクリプションサービス として⼀般提供開始 • 2023年3⽉22⽇ ◦ GitHub Copilot Xの発表 ▪ GitHub Copilot chat ▪ GitHub Copilot for docs ▪ GitHub Copilot for pull requests ▪ GitHub Copilot for CLI ▪ GitHub Copilot Voice できること • コードの先読み補完 • ⽣成内容を明確に指⽰ ◦ 〇〇を××に変更して ◦ △△を参照して ◦ テストを書いて • VS Code上でCopilotと会話 ◦ このコードを説明して ◦ このエラーの原因は？ できないこと • コードの断⽚以上の⽣成 ◦ 複数ファイルの修正
10. 次のブレイクスルーが気になりませんか？ 10 2024年4⽉29⽇
11. 今⽇話すこと 11 1. GitHub Copilot Workspaceの概要 2. テクニカルプレビューを触ってみた感想
12. GitHub Copilot Workspaceとは？
13. GitHub Copilot Workspaceとは 13 • GitHubが提供する全く新しい統合開発環境 • ⾃然⾔語で、コード断⽚⽣成ではなくタスク遂⾏を指⽰ • 開発プロセスの全体をAIがサポート ◦ 仕様策定 ◦ 変更計画 ◦ 実装 ◦ PR作成 • 現時点ではテクニカルプレビュー ◦ wait listへ登録が必要
14. • セッションという単位で1つの 開発プロセスを管理 GitHubが提供する全く新しい統合開発環境 14
15. • 以下の流れで開発を進める ◦ Issue ▪ タスクの指⽰ ◦ Specification ▪ Copilotと仕様策定 ◦ Plan ▪ Copilotと変更計画 ◦ Implement ▪ Copilotと実装 GitHubが提供する全く新しい統合開発環境 15
16. • 以下からセッションを開始可能 ◦ GitHub Issue ◦ Pull Request ◦ リポジトリを指定して、ア ドホックタスクの開始 GitHubが提供する全く新しい統合開発環境 16
17. • 例として、TODO管理APIの OpenAPI作成をするGitHub Issueでセッションを開始 • 元Issueとは独⽴している。 ◦ Workspace上でタスクを編 集してもGitHub Issueには 反映されない タスクの指⽰ 17
18. • As-Is ◦ openapi.yamlはリポジトリに存在し ない • To-Be ◦ ルートにopenapi.yamlを含んでいる ◦ OpenAPI 3.0.3で仕様を書いている。 ◦ 登録、取得、更新、削除のエンドポイ ントを含んでいる。 ◦ TODOのアイテムは id,title,content,status,createdAtを含 んでいる。 Copilotと仕様策定 18
19. • openapi.yamlファイルを追加する ◦ OpenAPIを3.0.3で定義する ◦ info section ▪ title, description, versionを 記述する ◦ paths ▪ 登録、取得、更新、削除を ⽤意する ◦ components ▪ TODO itemを id,title,content,status,createdAtでス キーマ定義する Copilotと変更計画 19
20. • 変更計画をもとにCopilotが 実装 Copilotと実装‧PR作成 20
21. • PR作成もWorkspace上で⾏う • もちろんDescriptionもCopilot が書いてくれる Copilotと実装‧PR作成 21
22. • チームメンバーにPRレビュー 依頼を出す • PRからWorkspaceを開いて、 変更の経緯、指⽰内容を確認す ることも可能 • PRを元に新しいセッションも 開始可能 ◦ 貰ったコメントについて Copilotと修正できる Copilotと実装‧PR作成 22
23. もう⼈間がすること無くない？ もしかして 23 全部やっといたよ
24. めちゃくちゃあります そんなことありません 24 全部やっといたよ
25. 全てのプロセスで⼈の⼿を加えられる 25 • 修正⽅法 ◦ 直接提案内容を編集
26. 全てのプロセスで⼈の⼿を加えられる 26 • 修正⽅法 ◦ 直接提案内容を編集 ◦ 新たな変更指⽰を直接追加
27. 全てのプロセスで⼈の⼿を加えられる 27 • 修正⽅法 ◦ 直接提案内容を編集 ◦ 新たな変更指⽰を直接追加 ◦ チャットで修正内容を指⽰
28. 全てのプロセスで⼈の⼿を加えられる 28 • 修正⽅法 ◦ 直接提案内容を編集 ◦ 新たな変更指⽰を直接追加 ◦ チャットで修正内容を指⽰ • 全てのステップでやり直し可能
29. Copilotとコードの共同編集 29 • Files changedビューでの編集 ◦ ⽣成された変更内容を直接 ⼿動で変更可能 • チャットで修正指⽰出し
30. Copilotとコードの共同編集 30 • Codespaces上での表⽰‧編集 ◦ ブラウザで動作するVS Codeで表⽰可能 ◦ Workspaceの編集状態と同 期される ◦ ターミナルも利⽤可能
31. テスト実⾏、動作確認 31 • Workspace上でもターミナル を利⽤可能 • ⾃動テストや静的解析などが実 ⾏できる
32. やるべきことは(楽になるが)変わらない Copilotはあくまでも副操縦⼠ 32 操縦桿を握るのはあなたです
33. GitHub Copilot Workspace   使ってみた 
34. タスクを丸投げしてみた 34
35. タスクを丸投げしてみた 35 • 流⽯にタスクを遂⾏できない ◦ Issueが不明瞭で仕様策定が できないアラート ◦ Issueの説明に注⽬すべき ファイルやディレクトリ名 を明⽰すると良いとのこと
36. Issueを詳細化してタスクを丸投げしてみた 36
37. Issueを詳細化してタスクを丸投げしてみた 37 • 以下を⼀通り実装してくれた ◦ AWS CDKのインフラ ◦ Lambdaのコード ◦ テスト ◦ CI/CD ◦ API仕様
38. Issueを詳細化してタスクを丸投げしてみた 38 • 提案仕様、変更計画のレビューが難 しい ◦ Issueで指⽰は出しているが、仕 様にはなく、実装には含まれる • 細かい点まで指⽰が難しい ◦ ⾔語やライブラリのバージョン が全体的に古め ◦ 指⽰漏れが発⽣ • 変更内容が⼤きく扱い⾟い ◦ テストが動くまでが⼤変 ◦ PRがレビューし⾟い
39. Issueを詳細化してタスクを丸投げしてみた 39 • 結論 ◦ AIにざっくりプロジェクト のベースを作ってもらって ⼿動で直すような⽤途には 不向き
40. ⼩さなタスクを1つずつ投げてみた 40
41. ⼩さなタスクを1つずつ投げてみた 41 • 指⽰出し、提案内容のレビュー の問題は解消 • プロジェクト初期段階のタスク は不向き ◦ コマンドを叩く系 ▪ npm init ▪ cdk init ◦ 全体アーキテクチャの設計
42. ⼩さなタスクを1つずつ投げてみた 42 • 結論 ◦ プロジェクトの⽴ち上げ段 階は⼿動の⽅が良い ◦ 既存コードのコンテキスト 無しに理想のコードを書か せることが困難 ◦ ある程度育ったリポジトリ 向き
43. 既存プロジェクトへの機能追加を試してみた 43 • 既存コードを読み設計⽅針を理解した上で提案 ◦ 設計⽅針などは既存コードのコンテキストの⽅が意図が明確に伝わる ◦ 現在のコンテキストはセッションを実⾏する1リポジトリに閉じるので、複数リ ポジトリやナレッジベースの参照に期待(ドキュメントも読ませたい) • 良く把握したリポジトリであることが前提 ◦ 変更仕様をいきなり提案されてもレビューができない ◦ 別途コードリーディングが必要 • ⽣成されるコードの品質はさらに改善を期待 ◦ シンタックスエラーを含む提案も ◦ どこまで指⽰を出し、どこから⾃分で書くか迷う ◦ 途中で仕事を奪えるのはAIとのペアプロならでは
44. その他注意点 44 • テクニカルプレビューの現時点では英語のみ対応 ◦ ⽇本語で指⽰出しは可能だがCopilotからは英語で提案 ◦ Enterキー変換を待たずに送信 • コード⽣成の待ち時間 ◦ 指⽰→再⽣成のループを回す上でコード⽣成のスピードは重要 ◦ 今後はビルド時間に加えてコード⽣成時間も待つように？
45. まとめ
46. まとめ 46 • GitHub Copilot Workspaceは新しい統合開発環境 • Copilotが開発プロセスを広くサポートしてくれるが丸投げはできない ◦ Issueの⾒極めと切り出し、AIの提案をコードレビュー、必要に応じ て⼿直しする技術は引き続き重要 ◦ 開発プロセス、扱うツールが変わるので適応する必要あり • 現時点ではテクニカルプレビュー ◦ GAまでにコード⽣成の品質向上や参照するコンテキスト追加を期待 ◦ 触りたい⽅はwait listへ登録を！