Slide 1

Slide 1 text

2025/03/18 #さくらのAI Meetup vol.9「AIコーディングエージェント活⽤」 クラスメソッド株式会社 ⾦城 秀哉 AIネイティブの全く新しい統合開発環境 「GitHub Copilot Workspace」で考える AIコーディングエージェントの開発⽣産性

Slide 2

Slide 2 text

● 好きなAIコーディングエージェント ○ Cursor Agent(旧 Composer) ● クラスメソッド株式会社 ○ リテールアプリ共創部マッハチーム ○ エンジニア ● 興味‧関⼼ ○ IaC‧CI/CD ○ 開発⽀援系AI ⾃⼰紹介 2 ⾦城 秀哉(Shuya Kinjo) @joe-king-sh

Slide 3

Slide 3 text

AIコーディングエージェントと聞いて 何を思い浮かべますか? 3

Slide 4

Slide 4 text

1. 指⽰を完遂するために必要なタスクの洗い出し‧分割、実⾏計画の策定 ができる。 2. 必要な情報(既存のコードベース、静的解析、テスト実⾏結果、ログ等) を⾃律的に収集する。 3. タスクを順番に実⾏する。 4. エラーが発⽣した場合、原因を調査し⾃律的に修正できる。 AIコーディングエージェントの定義 4 このセッションでは、上記のような特徴を持つコード⽣成AIを 「AIコーディングエージェント」として扱います。

Slide 5

Slide 5 text

様々なAIコーディングエージェント 5 1. エディタ搭載型 a. Cursor Agent、GitHub Copilot Edits、Windsurf、Cline、Roo Code 2. ターミナル型 a. Claude Code 3. ⾮同期的‧⾃律型 a. Devin

Slide 6

Slide 6 text

1. エディタ搭載型 a. Cursor Agent、GitHub Copilot Edits、Windsurf、Cline、Roo Code 2. ターミナル型 a. Claude Code 3. ⾮同期的‧⾃律型 a. Devin 4. 同期的‧⾃律型 + 統合開発環境型 a. GitHub Copilot Workspace 様々なAIコーディングエージェント 6

Slide 7

Slide 7 text

今⽇お話しすること 7 1. GitHub Copilot Workspaceの開発体験をご紹介 2. AIコーディングエージェントの開発⽣産性について 3. 現時点での最適な選択(私⾒)

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

GitHub Copilot Workspaceとは 9 1. 開発サイクル全てをAIがサポート a. Issueから先の、調査‧計画、実装、ビルド、テスト、実⾏、デバッグ、PR作成まで全て の開発プロセスをAI⽀援 b. Devinのように⾃律的だがこちらは開発者が伴⾛する同期的なAI 2. 全てのステップで開発者が修正可能 a. AIが⽣成した仕様や実装計画、コードはいつでも編集‧修正が可能で、開発者が最終的な 意思決定を⾏える 3. チームでの協働作業 a. チームとワークスペースを共有でき、変更の履歴や⽂脈が⾃動的にバージョン管理される 4. マルチデバイス a. PCだけでなくスマートフォンからも利⽤可能 5. 現在もテクニカルプレビュー(GitHub Nextからは卒業)

Slide 10

Slide 10 text

1. 新規プロジェクトでの利⽤は厳しい印象 a. ターミナルを使ってAIが⾃律的にコマンド実⾏ができない b. 指⽰するタスクの規模が⼤きくなりがち i. コード⽣成の品質が上がらない、開発者のレビュー負荷が⾼い 2. 既存プロジェクトへの機能追加向き a. ある程度育ったコードベースに⼩さい機能追加‧修正ならアリかも 半年前に触ってみた感想 10

Slide 11

Slide 11 text

次のIssueをGitHub Copilot Workspaceで実装してみる 11

Slide 12

Slide 12 text

12 以下の構成のSNSトピックに適切なリソースポリシーを設定する Issueを起票する背景説明

Slide 13

Slide 13 text

Issueを起票する背景説明 13

Slide 14

Slide 14 text

このIssueで⾏うタスク 14

Slide 15

Slide 15 text

GitHub IssueからWorkspaceを開く 15

Slide 16

Slide 16 text

Copilot Workspaceのセッションが開始される 16 Issue ブレスト結果 質問 AsIs ToBe 追加質問の提案

Slide 17

Slide 17 text

● 変更仕様を⽴てる前に、必要な情報を集めたり検討するフェーズ。 ● 初めの質問は固定だが、開発者が質問を追加‧ブレスト結果の取捨選択が可能。 ● 調査‧検討した結果をIssueに紐付けて、変更仕様検討フェーズに移⾏する。 ブレインストーミングフェーズでの質問 17 ‧どのようにしてこのIssueを解決できるか?

Slide 18

Slide 18 text

Copilot Workspaceのセッションが開始される 18 Issue ブレスト結果 質問 AsIs ToBe 追加質問の提案

Slide 19

Slide 19 text

ブレインストーミング結果(AsIs分析) 19 現在SNSトピックにメッセージを送信しているリソースからのみPublishを受け 付ける、明⽰的なリソースポリシーが設定されているか? ‧SNSトピックは`infra/lib/construct/sns-construct.s`に定義されている ‧現在はSNSトピックにリソースポリシーは何も設定されていない ‧デフォルトのポリシーは同じAWSアカウントから全ての操作を許可する ‧このIssueは明⽰的なリソースポリシー設定を求めている

Slide 20

Slide 20 text

ブレインストーミング結果(ToBe検討) 20 ‧SNSトピックにはリソースポリシーが設定されている ‧リソースポリシーは特定のリソースからのみのアクセスを許可している ‧全てからの操作を許可していたデフォルトのポリシーは上書きされている ブレスト結果は直接編集したり、Itemの追加も可能

Slide 21

Slide 21 text

● 仕様検討に必要な情報についての質問をCopilotから提案してくれる機能。 ブレインストーミング結果(追加の質問を提案) 21 ‧現在SNSにメッセージをPublishしているリソースはどれか? ‧SNSトピックにはどうやってリソースポリシーを設定できるか?

Slide 22

Slide 22 text

ブレインストーミング結果(追加の質問) 22 SNSトピックにはどうやってリソースポリシーを設定できるか? ‧addToResourcePolicy()メソッドを使って定義ができる。 ‧リソースポリシーの定義が必要なSNSトピックを特定する。 ‧今回の場合は`sns-consturct.ts`に定義されている。

Slide 23

Slide 23 text

23 ‧こんな感じで実装できるよ。 ブレインストーミング結果(追加の質問)

Slide 24

Slide 24 text

ブレインストーミングフェーズのアップデート 24 ● 半年前はブレスト機能は「Specification」というフェーズ扱いで、⼀⽅的に Copilotから出されたAsis/Tobeの計画をレビューする形だった。 ○ 結局コードベース全体を読まないと開発者は正当性を判断できないので、⼈ 間のレビュー負荷が⾼く感じていた。 ● ブレスト機能になり、より対話的に既存のコードベースや実装⽅法を調査し、 計画を⽴てられるようになった。 ○ 「XXX」ってどの⽅法で実装するつもり? ○ 「YYY」にも影響なかったっけ? ○ 「ZZZ」だとパフォーマンス的な懸念はない?

Slide 25

Slide 25 text

ブレインストーミングの終了 25 ブレスト結果を紐づけて Plan作成 or そのまま実装

Slide 26

Slide 26 text

変更計画の⽣成 26 変更計画 ワークスペース全体に 「Plan」が追加

Slide 27

Slide 27 text

変更計画の⽣成 27 このフェーズではファイル単位で変更計画を⽴てる。 ‧errorTopicにリソースポリシーを追加する ‧wafBlockTopicにリソースポリシーを追加する ‧addToResourcePolicy()メソッドを利⽤する

Slide 28

Slide 28 text

変更計画の⽣成 28 ここでも開発者によるPlanの修正や書き換えや、 チャットでの修正指⽰が可能。

Slide 29

Slide 29 text

実装 29 実装 Copilotによる実装の FileChangedビュー

Slide 30

Slide 30 text

実装内容の変更⽅法 30 FileChangedビューを直接変更できる

Slide 31

Slide 31 text

ビルド、テスト、デバッグ⽅法 31 ターミナル、Codespaces環境(クラウド上にホストされた VSCode)で任意のコマンド実⾏やコードの閲覧‧修正が可能

Slide 32

Slide 32 text

VSCode拡張機能により、VSCode上でCopilot Workspaceの セッションを表⽰‧管理可能 ビルド、テスト、デバッグ⽅法 32

Slide 33

Slide 33 text

VSCode拡張で開くCopilot Workspaceのセッション 33 Issue ブレスト結果 質問 変更計画 WebのWorkspaceセッションと、 同等の機能を提供

Slide 34

Slide 34 text

VSCode拡張で開くCopilot Workspaceのセッション 34 ● 以前は⽣成されたコードの編集⽅法が以下に限られていた。 ○ FileChanged View、Codespaces、チャットでの再指⽰ ○ Copilot Workspaces上で開発を完結させ、モバイルデバイスや外出先でも 開発を可能にするようなコンセプトから? ● 現時点で⽣成されるコードの品質や速度では、開発者⾃⾝がコードを書き換え る必要性を感じ、VSCode拡張機能との統合は⼤きなアップデートに感じた。 ● ⼀⽅で、Webとローカル環境での同期遅延や更新の競合なども⾒られ、GAまで 課題はありそう。 ● WorkspaceとCopilot Editsを両⽅開けたりするので、Agentの使い分けが気に なる。

Slide 35

Slide 35 text

⽣成されたコードを修正する 35 ServicePrincipalの指定が多すぎる ※基本はCloudWatch Alarm経由で通知が来るの で、cloudwatch.amazonaws.comだけで良い。

Slide 36

Slide 36 text

チャットで変更指⽰を出す場合 36 チャットで変更指⽰ 変更計画を修正 実装反映

Slide 37

Slide 37 text

Copilot Workspace上でPull Requestの作成 37 Workspace内でPRを作成すると セッションのリンクが記載される ここから先は通常の開発フローと同様

Slide 38

Slide 38 text

AIコーディングエージェントで 開発⽣産性を上げるには? 38

Slide 39

Slide 39 text

AIコーディングの開発速度 = フィードバックループの回数🔄 ✖ 反映スピード💨

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

ココをいかに少なく‧速く回すか

Slide 42

Slide 42 text

フィードバック反映速度 42 チャットで変更指⽰(5秒) 変更計画を修正(30秒) 実装反映(30秒) AIへのフィードバックが反映されるまで1分以上 (Cursor Agentだと10秒程度)

Slide 43

Slide 43 text

● フィードバックループ回数に作⽤する要因 ○ AIのコード⽣成品質 ○ 開発者の指⽰品質 ○ 1セッションの⻑さ ■ ⾃律型に近づく程フィードバックを挟むタイミングが少ない ■ ⼀⽅で早めに間違いを修正できない場合は結果的に回数増 ● フィードバック反映の速度に作⽤する要因 ○ 使⽤するモデル‧サービス ○ サービスのレートリミットや⽉間リクエスト上限 フィードバックループの回数と速度に作⽤する要因 43

Slide 44

Slide 44 text

フィードバックループの回数と反映速度の⽐較 44 回数 反映速度 特徴 エディタ 搭載型 多い 速い ‧開発者が常に伴⾛する ‧1セッションが短い ‧早く失敗して速く間違いを正せる GitHub Copilot Workspace ? 遅い ‧⾃律的だが開発者が各⼯程を伴⾛する ‧1セッションが⻑い ‧やり直しが多発すると⽣産性低下  ‧AIのコード⽣成品質向上の期待  ‧⼈間の指⽰品質の担保が必要 Devin ? 遅い ‧⾮同期の完全⾃律型AI ‧1セッションが⻑い ‧やり直し多発すると⽣産性低下 ‧⾮同期で並列実⾏可能なので同じ⼟俵で⽐べる のが違うかも? ⾃ 律 度 ⾼ 低

Slide 45

Slide 45 text

回数 反映速度 特徴 エディタ 搭載型 多い 速い ‧開発者が常に伴⾛する ‧1セッションが短い ‧早く失敗して速く間違いを正せる GitHub Copilot Workspace ? 遅い ‧⾃律的だが開発者が各⼯程を伴⾛する ‧1セッションが⻑い ‧やり直しが多発すると⽣産性低下  ‧AIのコード⽣成品質向上の期待  ‧⼈間の指⽰品質の担保が必要 Devin ? 遅い ‧⾮同期の完全⾃⽴型AI ‧1セッションが⻑い ‧多発すると⽣産性低下 ‧⾮同期で並列実⾏可能なので同じ⼟俵で⽐べる のが違うかも? ⾃ 律 度 ⾼ 低 フィードバックループの回数と反映速度の⽐較 45 現時点ではエディタ搭載型(Cursor Agent)が最適。 フィードバック不要なレベルでコードを書かせられるよ うになれば、より⾃律的なAgentの時代が来そう。

Slide 46

Slide 46 text

● GitHub Copilot Workspaceは GitHub が提供する新しい統合開発環境 ○ Issueを起点にしてCopilotが調査‧設計‧実装を⾏い、PR作成までの全ての フェーズをサポートしてくれる。 ● AIコーディングエージェントを利⽤した開発⽣産性は、フィードバック回数と速度の 側⾯から検証可能。 ○ 現時点のAIのコード⽣成品質‧スピードを考えると、フィードバック回数が多く ても即時に修正を反映できるエディタ搭載型を発表者は好んで利⽤している。 ○ どこかで、より⾃律型のエージェントに軍配が上がるタイミングが来るかも。 まとめ 46

Slide 47

Slide 47 text

宣伝

Slide 48

Slide 48 text

● AWS、Google Cloud、Azureなんでも ● データ分析 ● アプリ開発(受託、⾃社開発) 基本的に全て直案件です クラスメソッドとは? 48 クラウド‧⽣成AIなど先端技術に強いIT企業です ● ZennやDevelopersIOを運営しています 主な事業

Slide 49

Slide 49 text

リテールアプリ共創部マッハチームとは 49 アプリ開発の 「立ち上げ専門チーム」 です。 高速に、プロダクト開発 と、 顧客との信頼関係構築 を行うことを目指しています。

Slide 50

Slide 50 text

‧ モダンな技術でフルスタック開発に挑戦したい ・2~3名のエンジニアで、フロントエンド、サーバーサイド、インフラの全てを担当できます ‧ プリセールスから⼊りプロダクトの⽅向性を提案したい ・エンジニアがプリセールスも顧客折衝もガンガン進めていきます ・案件最上流と実際に手を動かした開発の両フェーズを担当できます ‧ AIコーディング⽀援ツールをバリバリ活⽤したい ・GitHub Copilotは全エンジニアに配布、希望者は Cursorも使用可能です。 Devinを用いた検証も開始しました。 ・プリセールス × AIコーディングという、今後 AIに置き換えられないポジションとしておすすめです! こんな⽅を求めています! 50

Slide 51

Slide 51 text

No content