はじめに
Roo CodeはVisual Studio Codeの拡張機能であり、AIを活用した超絶強力な開発支援ツールです。これまではロジックの修正やパフォーマンス向上、コード補完としてGithub Copilotを使っていましたが、Roo Codeにしてからは作業効率が大幅に向上し、同じ時間単位でもできることが格段に増えたように感じます。本記事ではそんなRoo Codeを使ってTodo管理ができるブラウザの拡張機能を開発しました。AIによる開発体験も獲得しつつ、地味に便利なTodo管理拡張機能を実装することが出来ました。
Roo Codeとは
Roo Codeは、自然言語での対話を通じてプログラミングをサポートする自律型コーディングエージェントです。特徴として以下が挙げられます。
- 自然言語でのコード生成・修正
- プロジェクトのコンテキストを理解した提案
- インテリジェントなデバッグサポート
- 多言語対応（TypeScript, React, Python 等）
個人的には「自然言語でのコード生成・修正」が一番の魅力だと感じます。対面で会話をするのと非常に近い感覚で、指示しながら作業に取り組めます。ペアプロでいうところのドライバーをRoo Codeが完璧に担ってくれます。
またRoo Codeにはいくつかのモードがあり、やりたいことによってモードを切り替えるとより正確な回答を得ることができます。
複数のモード
Roo Codeは専門化されたモードであなたのニーズに適応します：
- コードモード： 汎用的なコーディングタスク向け
- アーキテクトモード： 計画と技術的リーダーシップ向け
- 質問モード： 質問への回答と情報提供向け
- デバッグモード： 体系的な問題診断向け
- カスタムモード： セキュリティ監査、パフォーマンス最適化、ドキュメント作成、またはその他のタスクのための無制限の専門ペルソナを作成
私が使う時は、設計段階はアーキテクトモード、コーディングはコードモードに切り替えることがほとんどです。設計段階で抜け漏れがあればその段階で指示することで、適切に修正してくれます。
実際に作ってみる
1. 要件整理
アーキテクトモードのRoo Codeに以下のタスクを与えました。
以下の仕様を満たす、 Microsoft Edge 上で Todo 管理ができる拡張機能を作ってください。
・「＋」ボタンを押下後にテキスト入力し、保存ボタンを押すと一覧に表示される
・データはローカルストレージ上で保存される
・削除ボタンを押下すると、一覧とローカルストレージから削除される。
・チェックボックスがある
・チェックボックスにチェックを入れると、グレーアウトされる
・並び替えができる
・UI デザインは Microsoft Teams を踏襲している
UI デザインをTeamsに寄せて欲しかったのは、単純に私がTeamsヘビーユーザーだからです。
与えるタスクに不足があると逆質問が来ますが、今回は一回で全てを理解してくれた模様です。
2. 設計
上記の質問をした後、以下の回答が来ました。
このプロジェクトの実装において、以下のどのアプローチが望ましいとお考えですか？
> Vanilla JSでシンプルに実装する(依存関係を最小限に)
> React+TypeScriptで実装する(型安全性と保守性を重視)
> Vue.jsで実装する(軽量でシンプルなコンポーネント構造)
言われてみれば、言語選定を何もしていなかった...Rooは賢い...
「型安全性と」と言われればそれに越したことはなく、特に言語のこだわりもなかったので、
今回はReact+TypeScriptでお願いすることに。
すると、今度はプロジェクト構造とコンポーネント設計をmermaidで出してくれました。
賢い！！賢すぎる！！！
その他、技術スタックやインタフェースやコンポーネントの仕様などの諸々もまとめてくれますが、今回は割愛します。
3. 実装
実装フェーズです。
環境構築を全くやっていませんが、一体どうなるのか...
実装フェーズ1を開始します。
まず、React + TypeScriptのプロジェクトをセットアップし、必要なパッケージをインストールします。
プロジェクトの初期化には、Create React Appを使用し、その後必要なパッケージをインストールします。
npx create-react-app . --template typescript
んん～～～賢い！！！！
こんな感じで、必要なパッケージのインストールやら、ディレクトリの作成やらを全てやってくれます。
実装も事前に出してもらった実装計画通りにすらすらと進み、体感 5 分ぐらいで終わりました。
4. 動作確認
実装が終了したので、実際に拡張機能として使ってみます。
並び替え時の表示が若干カクつく部分もありますが、基本的には事前に提示した要件通りに作ってくれています。デザインもどことなくTeams風な感じです。素晴らしい！！
まとめ
本記事では AI を活用した開発支援ツールRoo Codeを使ってTodo管理ができるブラウザの拡張機能を開発しました。個人的なポイントはアーキテクトモードとコードモードを使い分けたことがミソだったと感じます。特に要件・設計段階ではRoo Codeからの逆質問や技術スタックの提案により、まるで人間の開発者とペアプロをしているかのような自然な対話が実現できました。その結果、コミュニケーションの齟齬なく、仕様の抜け漏れを防ぎながら開発を進めることができたと思います。要件・設計と実装を分けると脳のコンテキストも切り替わるので、人間の作業的にもおすすめです。一方で、パフォーマンス性能やセキュリティ面でのチェックはまだ人の手が必要ですがRoo Codeが大部分の作業を担ってくれるのでその他の作業に人間は注力でき、AIと人間が適材適所で作業をすることが大事だと感じます。Roo Codeに限らず、今後もAIを上手く開発業務に取り入れることで、効率的にかつ快適に開発ができればと思います。
Discussion