0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Claude]エージェントの雛形をVSCodeの拡張機能で作ってみた

0
Posted at

色々とヤッてみたかった。。。

人間、生きて活動できる時間は限られておりますが、会社に勤めたり、家族を持ったり、ペットを飼ったりすると、自分の時間・ヤりたい事なんか微塵も出来なかったりします。

さて仕事においても、
プロジェクトであの言語・環境を用いてシステムを作れたら個人的・会社的に実績になるのに。。。みたいなことも多々あるでしょう。
まだこの言語でこのフレームワーク使ってんのかよ、技術的にヤバいこと進言するヤツいないのかよ。。。みたいなことも多々あるでしょう。

そんな今回は気にはなっていたけどまだ使ったことない技術を、AIと一緒に勉強も兼ねて一気に使って作ってみようということで

Docker環境で開発・ビルドする、TypeScriptとRustを使って、Claude AI向けのマルチエージェント構成向けのエージェントファイル作っちゃうVSCode向け拡張機能を作っちゃおう!!

をやってみた(情報過多

ちなみに資源はこちら

会社用のGitHubアカウントのリポジトリでコードを公開してます。
まだまだ機能が乏しいヒヨッコツールで、今後拡張するかどうかも怪しいところですが、
「AIを使ってみた」レベルの導入としては「こんなのを作ればいいのか」のサンプルお手本みたいになるのではと思いますので、よかったら使ってみてやって下さい。

あとコレ、お決まりのアレです↓

個人開発・検証目的のVSCode拡張機能です。
お試し用途を想定しており、検証は行っていますが、環境によっては予期しない動作をする可能性があります。

利用によって発生した問題については責任を負いかねますので、自己責任でご利用ください。
特に重要なファイルを扱う場合は、事前のバックアップやGit管理を推奨します。

ザックリガッツリ経緯

会社でClaudeが使えるようになったけど、
毎回エージェントをプロジェクト用に用意する の面倒くさいよなぁ。。。
雛形的なのを作ったところでバインドする仕組みも作らないとダメだよなぁ。。。

どうせ作るんであれば、技術者じゃないPMとかでも、
GUIで「こんなエージェントが欲しい」→「はい、出来ました」
みたいなことが出来たらいいよなぁ。

とりあえず自分が普段よく使ってるツールはVSCodeだし、
コレで使える拡張機能として作ったら面白いんじゃね?
自分ですら思いつくんだから、出来たとしても「何番煎じだよw」みたいな感じはするけど、とりあえず「自分としては一番煎じ」だし、今後VSCodeのプラグイン作る勉強とかにもなりそうだしやってみるか。
出来たら社内の人にも人柱で使わせてテストさせればいいか(作りたいだけ

拡張機能自体はTypeScriptで作るっぽいなぁ。
そういえばWebAssembly(略称:Wasm) がだいぶ前から話に上がってたけどまだ使ったことなかったし、試しに何か重そうな処理があったらそれで作ってみるか。

WebAssembly(略称:Wasm)ってCやPythonなど色々な言語で作れるのかぁ。。。
どうせならまだガッツリ使ったことない言語で、なんか既に色々と話題になってそうなRust 使ってみるか。

Rust使うためにローカルPCに何かインストールしないといけないの!?
ローカル環境汚したくないからDocker上で動くようにするか。。。
ついでにNodeもDockerに盛り込んで、DockerDesktopさえあれば開発環境構築終わりみたいな状態で公開すれば不要な手間を減らせるんでね?

なるほど、最近はClaudeでマルチエージェントって言うのでエージェントを複数起動させてタスク分散してより効率化するのかぁ。
そしたら、この拡張機能で生成するエージェントについてもそれが出来るような仕組みを入れてみるかぁ。

どうせならこの拡張機能を作るのもClaudeCodeにやらせるとして、マルチエージェント構成で作れるような形にして試してみるか。。。

よし、プロンプト考えてみっか。

ClaudeCode上での作業

普段は 命令(指示)の2分の3位できてれば上出来な感じではあったのですが、
今回流した命令では、ほぼ完璧なコードを出力してくれました。

まぁボタンが全部死んでたのには焦ったけど。。。
Dockerfileに記載されていたRustのバージョンが存在していなかったのと、ビルド・パッケージングする際のコマンド(Makefileやmake.ps1)ファイルの書き方が間違っていたね。

こんなんを喰わせた

チャット欄に入れた内容
以下の機能を盛り込んだVSCode拡張機能を作成し、プロジェクト構築から実装・テストまでを行って欲しい。

# 概要
プロジェクト開始時に、ワークスペース内に要件・利用言語などに沿ったClaude Code向けAIエージェントの設定ファイルの生成を行なう。
なお生成された設定ファイルはチームなどで共有することでレベル差異をなくせるようなものとする。

# 要件
- UIはVueJSで作成を行う
- VSCodeのデザインモードに問わず、ダーク・濃紺系背景にネオンっぽい枠のカードやテキストエリアなどを配置するようなデザインとする。
- 重い処理(MD出力など)についてはRustを用いる(WebアセンブリとしてVueから呼び出す)
- 作成するエージェントについて、1エージェントがプロジェクトの作業を全てこなすわけではなく、PM・PL/設計担当/DBA/frontendエンジニア/backendエンジニア/batchエンジニア/レビュアー/テストエンジニアなどの単位でエージェントを作成し、それらが1つのチームとしてマルチプロセスで動かせるようなものとする  
→統括エージェントが作業振りをする or 各エージェント間で相互にやり取りが出来るようなものとする
- Github上にはアップしない個人設定向けで、エージェントのキャラクター(人柄・喋り方などレベルに関係ない部分)を設定できる機能を付ける
- プロジェクト概要を入力・どんな言語で何(WebAPI/画面/バッチなど)を作るかをユーザに入力・選択させ、それに沿ったMDファイルの出力を行う。
- MDファイルへの出力についてはAIを使わず、どんな組合せでも高精度なエージェントが作成できるテンプレートを用意して、設定値をバインドさせるような作りとする。
- 設定したデータについてはjsonやyaml形式で、.vscodeフォルダ内にプラグインの設定ファイルとして保存する

# 実装環境
このプロジェクト作成時のPC上にはNode自体はインストールしているが、
Rustはインストールしておらず今後もインストールをする予定はないため、
今後のメンテナンスを考えNodeもRustもDocker上で実行するような開発環境とする。

# 生成するエージェントに最低限求めること
- 推論で作業を進めないこと(曖昧な仕様・質問が与えられた場合は確認をするようにすること
- 指定された言語について古い技術から新しい技術まで完全に網羅しているベテランのエンジニアとする
- 独自判断で作業を進めず、各エージェント間で整合性が取れたものを生成できるようにする
- コードコメントなどをしっかりと残す
- 資料作成・コーディング時に、設計理由や背景・理由などが有る場合はキチンと記録が残るよう、資料を作成する

上記以外でもしオススメな設定などが有る場合は、回答を選択できるような形で提示して下さい。

# 備考
本プロジェクトについても、Claude Codeのマルチエージェントでの作成を行いたいため、
作業開始前に指定しているフォルダ内にClaude Codeのマルチエージェント構成ファイルを用意し、それに沿って作業を勧めるようにすること。

要は以下のことをちょっと細かく書いたもの

  • こんな感じのツール作りたいから、開発環境から作って
  • 画面はVueで作って、重い処理はRustでやって
  • マルチで動くエージェントにして
  • エージェントは最低でもコレが出来るような感じにして
  • このツール作る時もイイ感じのマルチエージェント構成を構築してから作業やって

注意したこと

エージェント単体・エージェント同士が暴走しないように推論で行動しないでと釘を指しました。
CopilotやAntigravityなど他のAIツール使った時もそうですが、
仕様や要件・指示に曖昧な部分が合ったりすると、
良くも悪くもAIが勝手に考えて・補完したりすることでとんでもないものを作ることがあったため、そういった指示の場合は千鳥ノブばりのちょっと待てい!! を入れるようにしています。

作り終わってから思ったこと

このちょっと待てい!! でAI側から質問をしてくる場合、3つの選択肢と自由入力が出来るような物がいいなと感じました。
というのも、AIからの質問が高度な場合、回答する側についてもどういう案があるのかが選べる方が作業的にはスムーズに行くのかなという。
選択肢になければ自由入力でみたいな感じね。
※難易度や影響度などを考慮して松竹梅みたいな感じで選べるのも面白そうだよね。
→よく見積もりとかでヤるアレ

正直なところ。。。

コレだけ、色々と作ってみたけども、
拡張機能なんて言う煩わしいもので作らずに、初めからAIに 

「今回こんなプロジェクトだから、イイ感じに働く有能エージェント何人か用意しといて」

で済む話やん。。。

と、システム作り終わった時に訪れる虚無を感じながら今回はコレで終わり!

ってか、AIのお陰で、ご立派な経験がズラッと並んだ職務経歴を持った、技術力が有るのかどうかよくわからない、単価お高いクセに当たり外れの有るベテランBPを探す必要もなくね?って今後はなるだろうから自分を含めたSESな中高年エンジニアはもうビクビクなんだろうなぁと。
ってか、プロジェクトを開始する際に人を集めやすいようにって、言語の選定でJavaやC#などメジャーw言語にしなくても良くなったのは非常に大きいよなぁ。。。

スクショ

ネオンぽいデザイン(おじさんはネオンに近未来を感じるのです)で作ったので、普段から業務用のシステム作ってる方々には見づらさ満点な気もしますが、遊び心があってコレはコレでいいかなと思っている。
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?