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

by ShuyaKinjo

Slide 1

Slide 1 text

2024/09/25 ⾦城秀哉 GitHub Copilot Workspaceでこれからのアプリ開発がどう変わるのか？

Slide 2

Slide 2 text

⾃⼰紹介 2 ⾦城秀哉(Shuya Kinjo) ● クラスメソッド株式会社 ○ リテールアプリ共創部マッハチーム ● サーバーサイドエンジニア ● 興味‧関⼼ ○ IaC、CI/CD、⽣成AIアプリ開発 @joe-king-sh

Slide 3

Slide 3 text

リテールアプリ共創部とは 3 アプリ開発のクライアントワークを専⾨に⾏っていますクラスメソッドの⽀援領域

Slide 4

Slide 4 text

GitHub Copilot使ってますか？

Slide 5

Slide 5 text

GitHub Copilotの歴史 5 ● 2021年6⽉29⽇ ○ VS Code向けにGitHub Copilotのテクニカルプレビューを発表

Slide 6

Slide 6 text

GitHub Copilotの歴史 6 ● 2021年6⽉29⽇ ○ VS Code向けにGitHub Copilotのテクニカルプレビューを発表 ● 2022年6⽉21⽇ ○ テクニカルプレビューを終了し、個⼈開発者向けの有償サブスクリプションサービスとして⼀般提供開始

Slide 7

Slide 7 text

GitHub Copilotの歴史 7 できること ● コードの先読み補完できないこと ● こちらから明確な指⽰出し ○ 出だしを書く ○ コメントを先に書く ■ など、⼯夫が必要 ● 2021年6⽉29⽇ ○ VS Code向けにGitHub Copilotのテクニカルプレビューを発表 ● 2022年6⽉21⽇ ○ テクニカルプレビューを終了し、個⼈開発者向けの有償サブスクリプションサービスとして⼀般提供開始

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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と会話 ○ このコードを説明して ○ このエラーの原因は？できないこと ● コードの断⽚以上の⽣成 ○ 複数ファイルの修正

Slide 10

Slide 10 text

次のブレイクスルーが気になりませんか？ 10 2024年4⽉29⽇

Slide 11

Slide 11 text

今⽇話すこと 11 1. GitHub Copilot Workspaceの概要 2. テクニカルプレビューを触ってみた感想

Slide 12

Slide 12 text

GitHub Copilot Workspaceとは？

Slide 13

Slide 13 text

GitHub Copilot Workspaceとは 13 ● GitHubが提供する全く新しい統合開発環境 ● ⾃然⾔語で、コード断⽚⽣成ではなくタスク遂⾏を指⽰ ● 開発プロセスの全体をAIがサポート ○ 仕様策定 ○ 変更計画 ○ 実装 ○ PR作成 ● 現時点ではテクニカルプレビュー ○ wait listへ登録が必要

Slide 14

Slide 14 text

● セッションという単位で1つの開発プロセスを管理 GitHubが提供する全く新しい統合開発環境 14

Slide 15

Slide 15 text

● 以下の流れで開発を進める ○ Issue ■ タスクの指⽰ ○ Speciﬁcation ■ Copilotと仕様策定 ○ Plan ■ Copilotと変更計画 ○ Implement ■ Copilotと実装 GitHubが提供する全く新しい統合開発環境 15

Slide 16

Slide 16 text

● 以下からセッションを開始可能 ○ GitHub Issue ○ Pull Request ○ リポジトリを指定して、アドホックタスクの開始 GitHubが提供する全く新しい統合開発環境 16

Slide 17

Slide 17 text

● 例として、TODO管理APIの OpenAPI作成をするGitHub Issueでセッションを開始 ● 元Issueとは独⽴している。 ○ Workspace上でタスクを編集してもGitHub Issueには反映されないタスクの指⽰ 17

Slide 18

Slide 18 text

● As-Is ○ openapi.yamlはリポジトリに存在しない ● To-Be ○ ルートにopenapi.yamlを含んでいる ○ OpenAPI 3.0.3で仕様を書いている。 ○ 登録、取得、更新、削除のエンドポイントを含んでいる。 ○ TODOのアイテムは id,title,content,status,createdAtを含んでいる。 Copilotと仕様策定 18

Slide 19

Slide 19 text

● openapi.yamlファイルを追加する ○ OpenAPIを3.0.3で定義する ○ info section ■ title, description, versionを記述する ○ paths ■ 登録、取得、更新、削除を⽤意する ○ components ■ TODO itemを id,title,content,status,createdAtでスキーマ定義する Copilotと変更計画 19

Slide 20

Slide 20 text

● 変更計画をもとにCopilotが実装 Copilotと実装‧PR作成 20

Slide 21

Slide 21 text

● PR作成もWorkspace上で⾏う ● もちろんDescriptionもCopilot が書いてくれる Copilotと実装‧PR作成 21

Slide 22

Slide 22 text

● チームメンバーにPRレビュー依頼を出す ● PRからWorkspaceを開いて、変更の経緯、指⽰内容を確認することも可能 ● PRを元に新しいセッションも開始可能 ○ 貰ったコメントについて Copilotと修正できる Copilotと実装‧PR作成 22

Slide 23

Slide 23 text

もう⼈間がすること無くない？もしかして 23 全部やっといたよ

Slide 24

Slide 24 text

めちゃくちゃありますそんなことありません 24 全部やっといたよ

Slide 25

Slide 25 text

全てのプロセスで⼈の⼿を加えられる 25 ● 修正⽅法 ○ 直接提案内容を編集

Slide 26

Slide 26 text

全てのプロセスで⼈の⼿を加えられる 26 ● 修正⽅法 ○ 直接提案内容を編集 ○ 新たな変更指⽰を直接追加

Slide 27

Slide 27 text

全てのプロセスで⼈の⼿を加えられる 27 ● 修正⽅法 ○ 直接提案内容を編集 ○ 新たな変更指⽰を直接追加 ○ チャットで修正内容を指⽰

Slide 28

Slide 28 text

全てのプロセスで⼈の⼿を加えられる 28 ● 修正⽅法 ○ 直接提案内容を編集 ○ 新たな変更指⽰を直接追加 ○ チャットで修正内容を指⽰ ● 全てのステップでやり直し可能

Slide 29

Slide 29 text

Copilotとコードの共同編集 29 ● Files changedビューでの編集 ○ ⽣成された変更内容を直接⼿動で変更可能 ● チャットで修正指⽰出し

Slide 30

Slide 30 text

Copilotとコードの共同編集 30 ● Codespaces上での表⽰‧編集 ○ ブラウザで動作するVS Codeで表⽰可能 ○ Workspaceの編集状態と同期される ○ ターミナルも利⽤可能

Slide 31

Slide 31 text

テスト実⾏、動作確認 31 ● Workspace上でもターミナルを利⽤可能 ● ⾃動テストや静的解析などが実⾏できる

Slide 32

Slide 32 text

やるべきことは(楽になるが)変わらない Copilotはあくまでも副操縦⼠ 32 操縦桿を握るのはあなたです

Slide 33

Slide 33 text

GitHub Copilot Workspace 使ってみた

Slide 34

Slide 34 text

タスクを丸投げしてみた 34

Slide 35

Slide 35 text

タスクを丸投げしてみた 35 ● 流⽯にタスクを遂⾏できない ○ Issueが不明瞭で仕様策定ができないアラート ○ Issueの説明に注⽬すべきファイルやディレクトリ名を明⽰すると良いとのこと

Slide 36

Slide 36 text

Issueを詳細化してタスクを丸投げしてみた 36

Slide 37

Slide 37 text

Issueを詳細化してタスクを丸投げしてみた 37 ● 以下を⼀通り実装してくれた ○ AWS CDKのインフラ ○ Lambdaのコード ○ テスト ○ CI/CD ○ API仕様

Slide 38

Slide 38 text

Issueを詳細化してタスクを丸投げしてみた 38 ● 提案仕様、変更計画のレビューが難しい ○ Issueで指⽰は出しているが、仕様にはなく、実装には含まれる ● 細かい点まで指⽰が難しい ○ ⾔語やライブラリのバージョンが全体的に古め ○ 指⽰漏れが発⽣ ● 変更内容が⼤きく扱い⾟い ○ テストが動くまでが⼤変 ○ PRがレビューし⾟い

Slide 39

Slide 39 text

Issueを詳細化してタスクを丸投げしてみた 39 ● 結論 ○ AIにざっくりプロジェクトのベースを作ってもらって⼿動で直すような⽤途には不向き

Slide 40

Slide 40 text

⼩さなタスクを1つずつ投げてみた 40

Slide 41

Slide 41 text

⼩さなタスクを1つずつ投げてみた 41 ● 指⽰出し、提案内容のレビューの問題は解消 ● プロジェクト初期段階のタスクは不向き ○ コマンドを叩く系 ■ npm init ■ cdk init ○ 全体アーキテクチャの設計

Slide 42

Slide 42 text

⼩さなタスクを1つずつ投げてみた 42 ● 結論 ○ プロジェクトの⽴ち上げ段階は⼿動の⽅が良い ○ 既存コードのコンテキスト無しに理想のコードを書かせることが困難 ○ ある程度育ったリポジトリ向き

Slide 43

Slide 43 text

既存プロジェクトへの機能追加を試してみた 43 ● 既存コードを読み設計⽅針を理解した上で提案 ○ 設計⽅針などは既存コードのコンテキストの⽅が意図が明確に伝わる ○ 現在のコンテキストはセッションを実⾏する1リポジトリに閉じるので、複数リポジトリやナレッジベースの参照に期待(ドキュメントも読ませたい) ● 良く把握したリポジトリであることが前提 ○ 変更仕様をいきなり提案されてもレビューができない ○ 別途コードリーディングが必要 ● ⽣成されるコードの品質はさらに改善を期待 ○ シンタックスエラーを含む提案も ○ どこまで指⽰を出し、どこから⾃分で書くか迷う ○ 途中で仕事を奪えるのはAIとのペアプロならでは

Slide 44

Slide 44 text

その他注意点 44 ● テクニカルプレビューの現時点では英語のみ対応 ○ ⽇本語で指⽰出しは可能だがCopilotからは英語で提案 ○ Enterキー変換を待たずに送信 ● コード⽣成の待ち時間 ○ 指⽰→再⽣成のループを回す上でコード⽣成のスピードは重要 ○ 今後はビルド時間に加えてコード⽣成時間も待つように？

Slide 45

Slide 45 text

まとめ

Slide 46

Slide 46 text

まとめ 46 ● GitHub Copilot Workspaceは新しい統合開発環境 ● Copilotが開発プロセスを広くサポートしてくれるが丸投げはできない ○ Issueの⾒極めと切り出し、AIの提案をコードレビュー、必要に応じて⼿直しする技術は引き続き重要 ○ 開発プロセス、扱うツールが変わるので適応する必要あり ● 現時点ではテクニカルプレビュー ○ GAまでにコード⽣成の品質向上や参照するコンテキスト追加を期待 ○ 触りたい⽅はwait listへ登録を！

Slide 47

Slide 47 text

No content