概要
コーディングエージェントなどの情報が飛び交っているのを見て、自分でもAIを使った開発を試してみたくなったので、興味本位でやってみたところ、想像以上の出来に驚いたので記事にしてみました。
今回作成したサンプルコードは以下から見られます。stackblitzの環境に合わせる以外、私はコードに手を加えていません。
環境
- Windwos11
- VSCode 1.99
- RooCode 3.12.0
- APIモデル：gemini-2.5-pro-exp-03-25 （RooCodeから利用）
- ChatGPT o3 （RooCodeに渡すプロンプトを書くのに利用）
- Simple Web Server
実際にやってみたこと
本当に安直な考えだが、以下の手順で進めた。
- ChatGPTにコーディングエージェント（今回の場合はRooCode）に実装してもらうためのプロンプトを作成してもらう
- プロンプトを読み込んでもらい、「これやって」ってお願いをする
- 動作確認
今回は、ブラウザ上で署名を手書きできる機能の実装がちょっと必要になったので、それを実装してもらってみた。
1. ChatGPTでプロンプト作成
とりあえず、シンプルにやりたいことをお願いしてみる。
staticディレクトリにhtmlとjsで手書き署名を書いて、画像としてダウンロードできるweb画面を作りたい。
これをコーディングエージェントにやってもらうためのプロンプトを書いて
そしたら、英語で出てきちゃった...
まぁ確かに、コーディングエージェントに渡すだけならこれでいいのか。
だけど、一応内容は確認しておきたかったので、日本語に直してもらい、マークダウン形式のファイルに出力してもらった。
プロンプトの内容が気になる方はこちらからどうぞ
完成したプロンプト
(上に空行が必要)
<!-- prompt.md -->
# 📋 提出用プロンプト（日本語版）
> **あなたはコーディングエージェントです。
> 以下で指定する Web ページの完全なコードを生成してください。各ファイルを個別のコードブロックで出力し、説明は一切付けず、ブロックの先頭に相対パスをコメントで明記してください。**
>
> ### 🎯 目的
> `/static` フォルダー内だけで動く、小さな依存レスの Web UI を作成します。ユーザーが手書きで署名を描き、PNG 画像としてダウンロードできることが目標です。
>
> ### 🗂️ ファイル構成
> ```
> /static/
> ├─ signature.html # メインページ
> ├─ signature.js # 描画・ダウンロード処理
> └─ style.css # 最小限のスタイル（インラインでも可）
> ```
>
> ### 📝 要件
> 1. **キャンバス**
> * `<canvas id="signature-pad">` はコンテナ幅いっぱいにレスポンシブで表示すること。
> * マウスとタッチの両方に対応（Pointer Events API 推奨）。
> * 高 DPI（Retina）対応: 描画バッファをスケールすること。
> 2. **操作ボタン**
> * **Clear** ボタン — キャンバスを消去。
> * **Download** ボタン — `canvas.toDataURL("image/png")` で `signature.png` をダウンロード。
> 3. **ユーザー体験**
> * タッチ描画中はページスクロールを無効化。
> * ウィンドウリサイズ時に既存ストロークを保持（または初回ロード時にキャンバスサイズを固定しても可）。
> 4. **技術制約**
> * **純粋な HTML5 + ES2020** のみ。外部ライブラリやビルドツールは使用不可。
> * 可読性の高いコメント付きコード。機能ごとに関数を整理。
>
> ### 🚚 出力フォーマット例
> ```html
> <!-- /static/signature.html -->
> <!DOCTYPE html>
> ...
> ```
> ```js
> // /static/signature.js
> ...
> ```
> ```css
> /* /static/style.css */
> ...
> ```
> 上記形式でコードだけを出力してください。追加のセットアップは不要で、そのまま指定パスに配置すれば動作するようにしてください。
2. RooCodeでプロンプトを実行
無事、プロンプトを出力することができたので、RooCodeにやってもらう。
VSCodeで開いているプロジェクトにさっきのプロンプトを「prompt.md」っていう名前で置いて、以下のお願いをする。
こんな冷酷な指示でも素直に「はい、承知いたしました。」と聞いてくれるRoo君は寛大だよ。
このご時世、職場でこんな指示出したら、即パワハラ案件だわ。。。
そんな支持を出して待っていると、こんな感じでファイルを作成したりして、ソースコードをゴリゴリと書き進めてくれ、、、
終わり！！！実際に動かしてみるとどうなるか、、、
3. 動作確認
動かしてみるとこんな感じ。
しっかり手書きでの書き込みができ、画像でのダウンロードもしっかりできました。
ご丁寧にClear機能までつけてくれて。優秀すぎる！
まとめ
想像以上に何もやらずに一機能がサクッとできてしまって驚愕している。
小粒な実装なら、もう人間が書くよりも早くてこうクオリティのものができてしまうんだろうなと実感した。
これ、MCPでつないだりしたら、作ったプロンプトをそのままコーディングエージェントに流し込むこともできそう。（Claudeからならこれはもうできるのかな？）
さらには、音声入力したらコードが書き終わってるってこともできるのかも。
というか、既にやってる人いるのかな...