Share
Embed
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
■ タスクの指⽰
○ Specification
■ 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