はじめに
こんにちは､GMO Internet の Y.Lです。
GitHub は 2 月 7 日に新しい「GitHub Copilot Agent Mode」を発表しました。この機能は、単にコードを生成するだけでなく、プロジェクトの計画立案や作業の自動進行を支援する能力を持っています。この記事では、Agent Mode を活用して、使いやすいポモドーロタイマーアプリを一から開発した体験をご紹介します。
ポモドーロタイマーアプリの目標
Agent Mode の能力をより深く理解するために、さまざまな方法を試した結果、シンプルでありながら機能が充実したポモドーロタイマーを開発することにしました。
主な機能は以下の通りです:
- タイマー機能：作業時間（通常 25 分）と休憩時間（通常 5 分）をカウントします。
- 状態表示：現在の作業状況を見やすく表示。
- 通知機能：タイマー終了時に音や画面表示で知らせます。
- 操作ボタン：直感的に操作できるスタート、一時停止、リセットのボタンを配置。
これにより、画面表示、サーバー処理、データの保存といったアプリケーション開発の全側面を検証することができます。
技術スタック
このプロジェクトでは、以下の技術を採用しました：
- AIアシスタント：GitHub Copilot と Claude 3.5 Sonnet。
- フロントエンド：React を使用して、見やすく使いやすい画面を作成。
- バックエンド：Next.js を使用して、タイマーの動作や API を担当。
- データベース：SQLite を使用して、タイマーの記録（例：完了したセッション数）を保存。
💡
How to use GitHub Copilot agent mode?
Agent Mode はプレビュー版のため、まず VSCode Insiders をインストールする必要があります。
- VSCode Insiders のダウンロード
brew install --cask visual-studio-code@insiders- Agent Mode起動
プロジェクトを開いた後、ショートカットまたはサイドバーから Copilot Edits ビューにアクセスし、モードドロップダウンから「Agent」を選択します。これにより、エージェントモードがファイルを認識し、コマンドに基づいてタスクを実行できるようになります。
これで GitHub Copilot Agent Mode の使用準備は完了です！
実装の流れ
Agent Mode の可能性を検証するため、「単一コマンド方式」と「段階的コマンド方式」の 2 つのアプローチでアプリ開発を行いました。それぞれの詳細をご紹介します。
方法 1：単一コマンド
この方式では、Agent Mode に包括的なコマンドを一度に送信し、アプリ全体を一気に構築することを目指しました。
Build a complete Pomodoro timer application using React 19, Next.js 15, and SQLite with the following requirements:
- **User Interface:** Display a centrally positioned tomato image with an animated countdown timer (e.g., 25 minutes default). Ensure a responsive design compatible with mobile and desktop screens.
- **Task Management:** Implement a task list with full CRUD (Create, Read, Update, Delete) functionality. Each task should include a title, description, start time, and status (e.g., "pending" or "completed"), with support for sorting by start time and filtering by status.
- **Backend Integration:** Develop RESTful API endpoints (GET, POST, PUT, DELETE) for all CRUD operations, using SQLite for persistent storage. Include proper database connection handling and migration scripts.
- **Testing:** Achieve 100% test coverage using Vitest and React Testing Library. Write unit tests for UI components and API endpoints, and integration tests for database interactions.
- **Additional Requirements:** Implement robust error handling (e.g., try-catch blocks) and logging (e.g., console or file-based logs). Provide detailed documentation and inline comments for maintainability and scalability.プロセス
- Agent Mode は要求内容を解析し、コード生成を開始しました。
- まず、基本的な Next.js アプリケーションを作成し、タイマーコンポーネントと各種ボタンを組み込みました。
- 同時に、サーバーコードも生成し、API エンドポイントの設定を行いました。
- さらに、SQLite への接続を試み、シンプルなデータモデルを定義。
- 最後に、テストコードも自動生成されました。
生成結果
単一コマンドの生成結果
単一コマンドのテストコード実行結果
短時間で、Agent Mode はフロントエンド、バックエンド、データベースの全コードを生成しました。さらに、自らタスクの計画を立て、エラーが発生すると自動修正を試みる機能も備えていました。非常に驚きです！ しかし、生成されたコードにはいくつかの問題もありました。例えば、フロントエンドのタイマーロジックが不十分で動的な更新がうまく機能せず、テストコードではエラーが発生しました。自己修正を試みた結果、無限ループに陥ってしまい、最終的には手動で停止して開発者が介入する必要がありました。
方法 2：段階的コマンド
この方式では、プロジェクトを 6 つのフェーズに分割し、各フェーズごとに着実に完成させていきました。
フェーズ 1: プロジェクトの初期化 & アーキテクチャの設定
Initialize a new Next.js 15 project with React 19 for a Pomodoro timer application, which will include a timer UI, task management, and SQLite backend. Integrate SQLite for data persistence, set up a basic database connection, and create migration scripts. Document the overall architecture and project goals (a productivity tool based on the Pomodoro technique).
Next.js と React を使用して新しいプロジェクトを作成し、タイマーやタスク管理の基本構造を設定しました。SQLite を使ってデータベース接続も実装しました。
フェーズ 2:ユーザーインターフェース & アニメーション
Develop the main UI page for the Pomodoro timer application. Display a centrally positioned tomato image with an animated countdown timer (default 25 minutes). Ensure the design is responsive for mobile and desktop screens.
画面中央にトマトの画像とアニメーション付きカウントダウンタイマーを配置し、スマートフォンとパソコンの両方に対応するレスポンシブデザインを実装しました。
フェーズ 3: タスク管理モジュール
Add a task management interface to the Pomodoro timer application. Support full CRUD operations for tasks, where each task includes a title, description, start time, and status (e.g., “pending” or “completed”). Include sorting by start time and filtering by status.
タスク一覧を作成し、タスクの追加、編集、削除機能を実装しました。各タスクには、タイトル、説明、開始時間、状態の情報が含まれます。
フェーズ 4: REST API & バックエンド統合
Create RESTful API endpoints (GET, POST, PUT, DELETE) for task CRUD operations in the Pomodoro timer application. Integrate these endpoints with SQLite, ensuring robust data persistence, error handling, and efficient connection management.
REST API を実装し、タスク管理機能を完成させました。SQLite によるデータ永続化やエラー処理も適切に行いました。
フェーズ 5: テスト & 品質保証
Use Vitest and React Testing Library to write comprehensive unit and integration tests for the Pomodoro timer application. Test UI components, API endpoints, and database interactions to achieve 100% test coverage.
Vitest と React Testing Library を使用して、アプリケーション全体の動作を検証するテストを実装しました。
フェーズ 6: エラーハンドリング、ログ記録 & ドキュメント作成
Enhance the Pomodoro timer application with robust error handling (e.g., try-catch blocks) and logging (e.g., console or file-based logs). Provide detailed technical documentation and inline comments for future maintenance and scalability.
エラー処理やログ機能を追加し、将来のメンテナンスに役立つ詳細なドキュメントも作成しました。
生成結果
段階的コマンドの生成結果
段階的コマンドのテストコード実行結果
Agent Mode は各フェーズごとにタスクを着実にこなし、フロントエンド、バックエンド、データベースの全体をカバーしました。時間はかかったものの、最終的な完成度はかなり高かったです。ただし、こちらでもテストコードのエラーにより無限ループに陥るなど、開発者が介入して修正する必要がある場面もありました。
単一コマンド vs 段階的コマンド
より直感的な指標で比較を明確に示すため、時間と人的介入については、以下の計算式で数値化しています。
時間短縮率
( 60 分（仮最大時間）− 総実行時間) / 60 分（仮最大時間） × 100%自動化率
( 10 回（仮最大介入回数）− 介入回数) / 10 回（仮最大介入回数） × 100%おわりに
今回の実作で、GitHub Copilot の Agent Mode はAIを活用した開発の可能性を大いに広げてくれることが実感できました。ただし、やはり開発者が適切に指示・介入することは欠かせません。
- 単一コマンド：素早くプロトタイプを作成するのに適しています。
- 段階的コマンド：より高品質なプロジェクトの開発に向いています。
- 利点：Agent Mode はフレームワークを迅速に生成し、アイデアの着想を与えてくれます。
- 注意点：複雑なロジックには手動での調整が必要で、段階的な指導を行う方が効果的です。
まだ理想の状態には達していないものの、すでに日々の開発業務において強力なパートナーとして活躍していると感じています。これからの AI 技術の進化がますます楽しみです！
本記事が、AI を活用した開発に興味のある皆さんの参考になれば幸いです。
