AIコーディングエージェント勉強会

by Kiminori Yokoi

Slide 1

Slide 1 text

AIコーディングエージェント勉強会資料 2025/3/25 @nasuvit_z

Slide 2

Slide 2 text

2 AIコーディングエージェント AI + Coding agent

Slide 3

Slide 3 text

3 AIコーディングエージェントとは AIがコードの自動生成、補完、デバッグ、ドキュメント作成などを支援するツール手作業でコードを書く手間を削減し、生産性やコード品質の向上を図ることが可能 AIによって、わずか2年で、コーディング体験が劇的に変わっている手作業で全てのコードを書く AIが部分的にコードを補完する AIが全自動で全てのコードを書く 2023年まで 2024年まで 2025年から従来のIDE GitHub Copilot GitLab Duo Amazon Q Developer (旧名称: CodeWhisperer) Cline Roo Code Cursor GitHub Copilot Agent Amazon Q Developer CLI

Slide 4

Slide 4 text

4 今、皆さんが思っているであろうことの言語化 (基本) • 今まで手で書いていたコードがもっと楽に書けるようになりそう • 人間が一文字もコードを書かなくてもプロダクトが出来上がりそう • 人が書かないのだから、人的ミスがなくなるのではないか • 想定と違ったら、違うよって言えば自動で修正してくれるのは凄い • でも、誰でもプログラムが書けるようになってしまうのではないか • 内製開発が進んでいくのではないか • お客様から頼られなくなってしまうのではないか

Slide 5

Slide 5 text

5 今、皆さんが思っているであろうことの言語化 (応用) • デプロイまで自動でやってくれそう • リファクタリングを自動でやってくれそう • パフォーマンス改善もできそう • 依存関係の調査をしなくても自動でやってくれそう • パッケージング作業も自動でやってくれそう • インフラが完全に自動で構築できそう • OSやソフトウェアのインストールコマンド、シェルスクリプト、設定ファイルも全自動で作れそう • 実機からドキュメントやパラメータシートを逆起こしできそう • フレームワークやライブラリが気にならなくなりそう • ペアプロの相手が人間ではなくなりそう

Slide 6

Slide 6 text

6 何が変わるのか作業のやり方の変化 • 自然言語プロンプトで指示し、AIが即時にコードを提案 • デバッグ、リファクタリング、ドキュメント作成も自動化エンジニアの役割の変化 • 「コードを書く」作業から「AIに意図を正確に伝える」作業へ • その上で、AIが出力したコードの検証や最適化(手直し)が重要に • ネットで言われる「ドライバーの交代」はこれらをわかりやすく説明したもの • プロンプトの設計力と言語化力の向上がより重要に • 要件定義やアーキテクチャ設計の重要性がより高まる

Slide 7

Slide 7 text

7 主要なAIコーディングエージェントの紹介

Slide 8

Slide 8 text

8 Cline

Slide 9

Slide 9 text

9 Clineとは • 今一番SNSでの言及が多いと思われるAIコーディングエージェント • 誰でも無償で入手し、インストールして使い始めることができ、推論の料金のみクラウド利用料として発生 • 既に使用中のクラウドと接続すれば、新たな調達作業が不要 • コーディングに関連する様々な思考プロセスやタスクを自動化 • コードを考えて、書き、直すという一連のプロセスを自動化 • ターミナルでのコマンド実行も一連のプロセスに含めて自動化 • 動作確認や調査のためのブラウザ操作も自動化 • プロジェクト固有のルールや作法に基づいた作業が可能 (.clinerules)

Slide 10

Slide 10 text

10 Roo Code

Slide 11

Slide 11 text

11 Roo Codeとは • ClineからForkされた (ある時点までの成果物を元にして新たに立ち上げられた) プロジェクトによるAIコーディングエージェント • 同じく無償で入手し、インストールして使い始めることが可能 • Clineが持つ特徴をほぼ全て押さえており、より細かく設定が可能 • Amazon Bedrock がサポートするモデルを幅広く使用可能 (Clineは2025年3月時点でClaudeとDeepSeekに限定) • プロジェクト固有のルールや作法に基づいた作業が可能で、より意図を細かく伝えやすくなる機能「モードごとの役割」「モード固有の指示」「モード共通の指示」「サポートプロンプト」を備える

Slide 12

Slide 12 text

12 GitHub Copilot Agent (有償) 出典: https://github.blog/news-insights/product-news/github-copilot-chat-now-generally-available-for-organizations-and-individuals/

Slide 13

Slide 13 text

13 GitHub Copilot Agentとは • GitHub公式のAIコーディングエージェント • ポイントは課金で、GitHub Copilotのライセンス費用で完結するため、他のツールとは異なり、青天井になることがない • ただし2025年3月時点ではAgent機能がベータ版であり、標準のVS Codeでは動かず、VS Code Insidersを使用する必要あり • 利用できるAIのモデルは今のところ限定されているが、将来的には他のツールに追いつくと予想される

Slide 14

Slide 14 text

14 どのツールを使うべきか • 正直、どのツールでも構わない • 選んでいる時間が無駄と思えるほど、出来ることは類似している • ダウンロード数から推測すると、この中で利用者が最も多いのはClineで、ナレッジも大量かつ頻繁に飛び交っている • 利用のハードルが最も低いのは、ClineとAmazon Bedrockの組み合わせと思われる • 多くの会社では、既にAWSの利用開始や支払いの業務プロセスが確立されていると考えられるため • 但し開発プロセス全体を見渡した時、サポートや周辺機能との統合、ライセンスやコスト管理の容易さを求めてGitHub Copilotが選ばれるケースがあると考えられる (例: GitHub Actionsを使用しているケースなど)

Slide 15

Slide 15 text

15 実行の構成と仕組み

Slide 16

Slide 16 text

16 実行の構成 (ClineとRoo Codeを例に)

Slide 17

Slide 17 text

17 実行の構成 (ClineとRoo Codeを例に) プラグインとして導入アクセスキーかセッショントークンで接続推論にかかる料金が発生

Slide 18

Slide 18 text

18 MCP Server ClineやRoo Codeに、リソース（データ、ツール、サービス）へのアクセス手段を与えて何かのドメインに特化した回答を得る、または外部サービスを利用するための機能 (実際の使用に基づく意訳です) 出典: https://modelcontextprotocol.io/introduction • ローカルに構築して利用する • ClineやRoo Codeと組み合わせて使用することで効果を得る • Clineでは、VSCodeのプラグインをインストールするような操作で利用を開始可能 • MCP Serverが外部サービスと通信する場合、外部サービスの認証情報が必要となる場合あり

Slide 19

Slide 19 text

19 MCP Server の考えられる用途 • パブリッククラウドやプライベートクラウド上の環境の運用を行う • 外部サービスからAPIを介して情報を取得する

Slide 20

Slide 20 text

20 プロジェクト固有のルールや作法を守らせる機能様々なルールや作法を予め文書化しておき、その指示に従った成果物を生成可能例: Clineの場合は「.clinerules」に指示を文書化しておく出典: https://github.com/henryalps/OpenManus/blob/main/.clinerules

Slide 21

Slide 21 text

21 過去の会話や作業履歴を保存し、次に活かす機能記憶するファイル名内容 productContext.md プロジェクトの目的、解決する問題、期待される挙動 activeContext.md 現在作業中の内容、最近の変更点、次のステップ（最重要） systemPatterns.md システムの構成、技術的判断、設計パターン techContext.md 使用技術、開発環境、技術的制約 progress.md 完成済みの機能、残作業、進捗状況タスクの状況や結果を文書化して保存し、会話(タスク)を跨いで活用することが可能例: Clineの場合は、Custom Instrictions (任意の指示を書く場所) に、Memory bank の機能を使う (構築する) ための指示をプロンプトで書くことによって使用可能プロンプトで記憶を指示

Slide 22

Slide 22 text

22 基本的な使い方

Slide 23

Slide 23 text

23 VS CodeにClineをインストールする拡張機能としてインストール

Slide 24

Slide 24 text

24 Amazon Bedrockと接続するためのセットアップを実施 ① AWS Bedrockを選択 ② 認証情報を入力任意の開発用環境で使用する ※今回はテストのためアクセスキーを使用 ③ モデルを選択

Slide 25

Slide 25 text

25 Clineに作業指示を出す ①ターミナルで作業ディレクトリに移動 ②チャットで指示を書いて送信

Slide 26

Slide 26 text

26 今回、チャットに送信した作業指示 HTMLとJavaScriptを使って、画面上に「パスワード生成」ボタンを表示し、クリックするとランダムかつ強力なパスワード（大文字・小文字・数字・記号を含む）を10個生成して、画面上のリストに表示するWebアプリを作ってください。パスワードの長さは12文字程度とし、ページ遷移なしで動作するシンプルなUIにしてください。生成されたパスワードは見やすいように整列して表示してください。

Slide 27

Slide 27 text

27 AIが出す指示を確認して承認 ① 今から行われる作業結果のプレビューを確認 ② 問題なさそうであれば承認問題がある場合、Rejectするか、指示をやり直す (指示のやり直しを推奨)

Slide 28

Slide 28 text

28 タスク完了時に、結果を確認する手作業で1文字もコードを書いていないのにアプリケーションが完成

Slide 29

Slide 29 text

29 その後は、デプロイや改修の指示を出す成果物が出来上がった後に行う指示は、様々ですが、ほぼ全て可能例1: このアプリケーションを、Amazon S3バケットを作り、アップロードして公開してください。S3バケットは特定のIPアドレスからのみ接続可能とします。 AIがS3バケットポリシーや静的Webサイトホスティングの設定を考えてくれ、さらにAWS CLIを発行するなど、必要な一連の作業を全て実行してくれる。例2: このアプリケーション自体に認証機能を追加したいです。ユーザディレクトリはAWS Directory Serviceで管理するものとします。 AIがAWS Directory Serviceのユーザディレクトリに関する設計を行う。 AWS CLIを発行し、ディレクトリの作成など、必要な一連の作業を全て実行。さらに、アプリケーションのコードに認証ロジックを追加してくれます。

Slide 30

Slide 30 text

30 作業全体にかかったコストを確認するポイント: 会話が長くなればなるほどコストが大きくなる

Slide 31

Slide 31 text

31 効果的な使い方

Slide 32

Slide 32 text

32 指示は具体的に書く方が良い HTMLとJavaScriptを使って、画面上に「パスワード生成」ボタンを表示し、クリックするとランダムかつ強力なパスワード（大文字・小文字・数字・記号を含む）を10個生成して、画面上のリストに表示するWebアプリを作ってください。パスワードの長さは12文字程度とし、ページ遷移なしで動作するシンプルなUIにしてください。生成されたパスワードは見やすいように整列して表示してください。 HTMLをベースに、画面上でボタンを押すと、ランダムかつ強力なパスワードを 10個生成して表示するアプリケーションを開発したいです。これでも良い (最終的にできないことはない) が、初めからこう書けると、イメージ通りの成果物が素早くできる可能性が高まるやり直しが多くなると、前述のようにコストが高くなる

Slide 33

Slide 33 text

33 作業指示自体を生成AIに詳細化させる ChatGPT、Claude、Geminiなどを使って、Clineに指示するプロンプトを作成詳細化されたプロンプトを吟味した後、Clineに送信すると効果的無料の範囲でもかなり詳細化可能

Slide 34

Slide 34 text

34 初めは小さく作り、継ぎ足していくのが良い • 詳細化はしても良いが、範囲は広げてはいけない (むずかしい) • 最後にテスト工程があるとは言え、人間は普段、細かい粒度でコードを書いてはローカルで実行し、動作確認することを繰り返して、コードを仕上げていく • 一方でClineなどは、指示に従い、一瞬でアプリケーション全体を開発してしまうため、人間は初めから出来上がった物の全体を確認することになる • これらの新旧の体験の間には、大きなギャップがある • 一度の指示で全体を作ろうとすると、うまくいかなかった時にそのコード全体を破棄することになり、破棄したコードに費やしたコストが全て無駄になる • 少しずつ作ってはコミットして保存し、万が一の時に戻せるようにする

Slide 35

Slide 35 text

35 少しずつ機能を継ぎ足していく例 (ロールバックを容易にする) HTMLとJavaScriptを使って、画面上に「パスワード生成」ボタンを表示し、クリックするとランダムかつ強力なパスワード（大文字・小文字・数字・記号を含む）を10個生成して、画面上のリストに表示するWebアプリを作ってください。パスワードの長さは12文字程度とし、ページ遷移なしで動作するシンプルなUIにしてください。生成されたパスワードは見やすいように整列して表示してください。このアプリケーションに機能を追加します。画面上でパスワードの桁数をプルダウンで選択し、「パスワード生成」ボタンをクリックした時に、選択した桁数でパスワードを生成するように機能を追加および改修してください。次に、画面上でパスワードの複雑さを選択できるようにしたいです。大文字・小文字・数字・記号を含むかどうかを、画面上でチェックして決められるようにしてください。 MUST (絶対欲しい) 機能を確実に作る WANT (あったら良い) 機能を作る

Slide 36

Slide 36 text

36 コーディング能力が高い (と言われる) モデルを使おう • 現状、経験に基づけば、Anthropic の Claude 3.7 Sonnet が群を抜いている • 最新のニュースやアップデートに常に目を向け、試しつつ、利用するモデルを適宜変えていけるようにする

Slide 37

Slide 37 text

37 .clinerules は詳細に書く • Clineでは、設計標準やコーディング規約と戦略、テスト方法などをマークダウンに書き起こして .clinerules に細かく表現するようにする • しかし、それでも、生成AIの出力は不確実である (100%ではない) • .clinerules は人間によるやり直しや手直しの作業を極力減らすために書くものであり、確認作業を放棄できるものではないことに注意する • 個人や社内でこれまで積み上げた、数多くの知恵を言語化しつつ、トライアンドエラーを繰り返して調整する • 先人の知恵に感謝し、優れたプラクティスを参考にする

Slide 38

Slide 38 text

38 失敗やトラブルの例

Slide 39

Slide 39 text

39 コストは気にしよう (Cline / Roo Code) あっという間に積み上がっていくコスト

Slide 40

Slide 40 text

40 ブラウザ機能は使いすぎない • Clineなどが持つ内部ブラウザの機能は、チャット内でブラウザを開いて画面を確認するが、裏側ではスクショして画像をモデルに送り、マルチモーダルで推論している • そのスクショが一定数を超えるとエラーになり、後戻りできなくなる ←苛立ちがプロンプトに出ている。。

Slide 41

Slide 41 text

41 curlも使いすぎない • ブラウザの代わりに、一連の会話の中でcurlを実行させてページを取得して、curlした結果をモデルに送って推論させるアプローチも考えられるが、これも使いすぎに注意する • モデルの最大入力トークン数を超えるとエラーになり、リクエストが不可能になる過去の会話も含めて全て推論させる仕様になっていることが原因と推測

Slide 42

Slide 42 text

42 APIの制約に関わるエラーが出るとタスクが中断する • 先ほどまでのエラーが出ると、そのタスク自体を破棄しなければならず、作業結果とコストが無駄になる • 作業結果をこまめにコミットに保存したり、Memory bankの機能を活用するなどして、中断するリスクに備えるのが良い • 何度リトライしても結果は同じ • しかも、この状態では、チャットに指示を入力し直すことができない (詰み) ← 書けないし押せないメッセージ入力欄。どうしようもない

Slide 43

Slide 43 text

43 多くの情報が自動で走査され、推論に使用されるどこにデータを送信しているのかを気にして使用する出典: https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/d2a5 bbd2-ae8f-450c-adaa-33979181d26a/e7bfeba7/20250206_councils_social- promotion-executive_outline_01.pdf

Slide 44

Slide 44 text

44 リスクを軽減するために、AWSを利用する • Amazon Bedrockのモデルは、AWSのインフラストラクチャ上で実行されており、リクエストはAWSに送信される • 同じDeepSeekでも「DeepSeek社がホストするモデル」と「AWS社がホストするモデル」では、モデルを実行している場所も違えば、適用される法律も規約も異なる • 詳しい情報はAWSのService Termと、モデルごとに存在するEULAを確認するここ ↓モデルアクセスを設定する画面

Slide 45

Slide 45 text

45 AWSではオプトアウトが可能です • AWS Organizationsでオプトアウトポリシーを有効化

Slide 46

Slide 46 text

46 コーディング以外の応用例

Slide 47

Slide 47 text

47 コードからドキュメントを逆に書き起こす • 例えばgit cloneした後に、ディレクトリを全て走査して構造を洗い出し、コードの解説を分かりやすく書き起こすことが可能 • ブラックボックスと思われていたプロジェクトを短時間で解読できる可能性

Slide 48

Slide 48 text

48 技術ブログを書かせる • コードを全て書き終えた後、コードが存在するディレクトリ全体を俯瞰し、開発した成果を技術ブログとして書き起こすことが可能 • 前のページと本質的にやっていることは同じで、文章の中身と構造が違うだけ

Slide 49

Slide 49 text

49 プロジェクト全体の脆弱性やリスクを検査させる • コードが存在するディレクトリを走査できるため、気が済むまで依存関係を含めて潜在する脆弱性を検査させ、修正対応を指示可能 (セキュリティ診断をセルフで実施可能)

Slide 50

Slide 50 text

50 プロモーションやマーケティングに活用する • 特定のフォルダに雑多に取材情報や写真を置いて指示するだけで、全ての情報からプロモーション用のコンテンツを自動で生成することが可能 • ついに広報(CC)部や営業部がVS Codeを使用する時代が到来してしまうのか? <やっていること> • 取材メモや画像を全てディレクトリに放り込む • 記事を書くように指示する • メモや画像、構成図 (アーキテクチャ) を理解し、本物と見紛うインタビュー記事を作り上げてくれる出典: https://www.tis.jp/service_solution/aws/managed support/multiaccountsuite/

Slide 51

Slide 51 text

Slide 52

Slide 52 text

52 Amazon Q Developer CLI Agent

Slide 53

Slide 53 text

53 Amazon Q Developer CLI Agentとは? 主な機能 • ローカルファイルシステムの操作 • ファイルの読み書き • ディレクトリの一覧表示 • AWS CLIコマンドとBashコマンドの実行 • AWSリソースの管理 • コードの作成や修正 • インフラストラクチャのコードや設定ファイルの作成支援 • ベストプラクティスの提案 • トラブルシューティング AWS CLIを通じて利用できるAIアシスタントコマンドライン上で動作し、様々な開発タスクやAWS関連の質問に対応

Slide 54

Slide 54 text

54 Amazon Q Developer CLI Agent の使い方使い方 • AWS CLIをインストールする • AWS Builders’ IDを作成する • 作成して https://profile.aws.amazon.com/ にログイン • Amazon Q でサインインする時に、AWS CLIからのアクセスを許可 • Share Amazon Q with AWS と Telemetry を Off にする • データを学習させないため • 会話を開始するにはターミナルで q chat コマンドを入力 • 会話を終了するには /quit と入力

Slide 55

Slide 55 text

55 Share Amazon Q with AWS と Telemetry を Off にする

Slide 56

Slide 56 text

56 Amazon Q Developer CLI Agent をコマンドラインから使用日本語でガイドが表示される様々なことができそう

Slide 57

Slide 57 text

57 Amazon Q Developer CLI Agent をコマンドラインから使用環境情報を表示するのは序の口

Slide 58

Slide 58 text

58 Amazon Q Developer CLI Agent をコマンドラインから使用無駄リソース削減の提案を得ることが可能

Slide 59

Slide 59 text

59 Amazon Q Developer CLI Agent をコマンドラインから使用環境の設定状況を解説してくれる設定の背景も推測して解説してくれる

Slide 60

Slide 60 text

60 Amazon Q Developer CLI Agent をコマンドラインから使用アクセスキーのローテーションも可能人手の承認が必要なタスクも自動判別

Slide 61

Slide 61 text

61 Amazon Q Developer CLI Agent で構成図を図示「VPCの構成図をHTMLで書いてください」と依頼すると、非常にグラフィカルな図が表示される実は、これに限らず、「HTMLで書いてください」という指示は、様々な図示に使える覚えておくと役に立つ

Slide 62

Slide 62 text

62 Amazon Q Developer CLI Agent で構成図を図示 diagrams.net (draw.io) 用の XMLで出力してと依頼し、出力されたXMLを diagrams.net で開いた結果、精度の高い構成図が表示された Claude 3.7 Sonnet に匹敵する精度!

Slide 63

Slide 63 text

63 ローカルのナレッジを参照する • 最初に q chat ”指示したい内容” というコマンドを使うことが可能 • 例えば q chat ”XXXというKnowledgeを読み込んだ上で回答して” と指示すると、初回起動のタイミングで、パスを指定してナレッジ参照の指示ができる • ただし、絶対パスで指定する必要がある

Slide 64

Slide 64 text

64 AWS環境の運用やドキュメンティングの自動化に使おう • 手軽に使用でき、導入効果が高い • ターミナルで実行でき、Cline や Roo Code と共存することもできる • Cline を介して Amazon Q Developer CLI を制御できるのではないか (要検証) • 但し、リリース直後のサービスであり、Claude 3.7 Sonnetのような最新モデルでも使用方法を学習していないと考えられ .clinerules や MCP などとの合わせ技で使う必要があると思われる -> MCPも重要出典: https://x.com/whitebird_sp/status/19019296 75875836397

Slide 65

Slide 65 text

65 まとめ

Slide 66

Slide 66 text

66 プログラマが職を失うのではなく、やり方が変わる出典: https://www.oreilly.com/radar/the-end-of-programming-as-we-know-it/ <引用> AI はプログラマに取って代わることはありませんが、プログラマの仕事は変わります。最終的には、プログラマが現在行っていることの多くは、オシロスコープでデバッグするという古いスキルと同じくらい時代遅れになるかもしれません (組み込みシステムプログラマ以外のすべての人にとって)。熟練プログラマーであり、先見の明のある技術観察者である Steve Yegge 氏は、置き換えられるのはジュニアおよび中級レベルのプログラマではなく、新しいプログラミングツールやパラダイムを受け入れず過去に固執するプログラマであると指摘しています。新しいスキルを習得または発明する人への需要が高まります。AI のツールを習得したジュニア開発者は、習得していないシニアプログラマよりも優れたパフォーマンスを発揮できます。Yegge 氏はこれを「頑固な開発者の終焉」と呼んでいます。

Slide 67

Slide 67 text

67 市場における期待も大きくなる出典: https://www.oreilly.com/radar/the-end-of-programming-as-we-know-it/ <引用> ユーザーの期待も高まるでしょう。生産性の向上を単にコスト削減に利用する企業は、新しい機能を活用してより良いサービスを構築することに投資する企業に負けるでしょう。

Slide 68

Slide 68 text

68 <再掲> 何が変わるのか作業のやり方の変化 • 自然言語プロンプトで指示し、AIが即時にコードを提案 • デバッグ、リファクタリング、ドキュメント作成も自動化エンジニアの役割の変化 • 「コードを書く」作業から「AIに意図を正確に伝える」作業へ • その上で、AIが出力したコードの検証や最適化(手直し)が重要に • ネットで言われる「ドライバーの交代」はこれらをわかりやすく説明したもの • プロンプトの設計力と言語化力の向上がより重要に • 要件定義やアーキテクチャ設計の重要性がより高まる

Slide 69

Slide 69 text

69 皆様が気づいてしまったであろうこと • 「あれもこれもClineで出来そう」と、まず考えて手を動かして試してみると、意外な発見がある • 知ってると知らないのとでは、天と地ほど生産性が変わる • 知らないし使えないでは済まされない • 知っている人との能力差が歴然たるものとなってしまうため、絶対に無視することはできない • 要件定義やドキュメンティングが得意なSIerにとっては、見方によっては、追い風とも言えるので、早くキャッチアップした方が良い – しかし、それも使い方を知らなければ、永遠に気づくことはない – もし今日の勉強会がなければ、この会社で一体誰が教えてくれたんだろう、いつ知っていたんだろうと想像すると、背筋がぞっとするほど恐ろしいのではないか – 最新情報は自分の目と耳でキャッチアップして語れるようにしてかなければならない

Slide 70

Slide 70 text

AIコーディングエージェント勉強会資料 2025/3/25 @nasuvit_z END