Webアプリ開発で生成AIを使い分け！VSCode + Copilot Chat + Roo Code + Google AI Studio 活用術

Webアプリの個人開発にて複数の生成AIツールを効果的に使い分けることで、開発効率と品質を向上させることができました。本記事では、具体的にどのようなツールを、どのような目的で使い分けたのか、その活用術をご紹介します。

開発したWebアプリは「AWS・Azure・GitHub 認定試験対策」です。

https://ipdojo.com

## 使用したツールとそれぞれの役割

今回のプロジェクトでは、主に以下のツールと生成AIの組み合わせを使用しました。

-   **VSCode + GitHub Copilot Chat (Claude 3.5 Sonnet)**:
    *   日常的なコーディング支援（コード補完、スニペット生成、簡単なコード修正）
    *   開いているファイルやエディタのコンテキストに基づいた質問応答
    *   テーマごとに「新しいチャット」で履歴をクリアし、コンテキスト長を管理

-   **VSCode + Roo Code (Gemini 2.5 Flash)**:
    *   大規模なコードベースの分析やリファクタリングの相談
    *   長いドキュメントや複数のファイルを跨いだ質問応答
    *   複雑な問題に対する多角的な視点からのアドバイス

-   **Google AI Studio (Gemini 2.5 Pro)**:
    *   高品質な演習問題の作成
    *   長文の要約や構造化
    *   特定のタスクに特化したプロンプトエンジニアリング

## Roo Code で Gemini 2.5 Flash を使う理由：圧倒的なコンテキスト長

Roo Code を通じて Gemini 2.5 Flash を利用した最大の理由は、その**圧倒的なコンテキスト長の長さ**です。他の生成AIと比較して、より多くの情報を一度に処理できるため、プロジェクト全体の構造を理解したり、複数のファイルにまたがる変更を行う際に非常に強力でした。

以下に、主要な生成AIモデルのコンテキスト長（執筆時点の一般的な情報に基づく）を比較した表を示します。

| モデル名                     | コンテキスト長（Tokens） | 特徴                                   |
| :--------------------------- | :----------------------- | :------------------------------------- |
| Gemini 2.5 Flash             | 100万                    | 高速、コスト効率が良い、**圧倒的なコンテキスト長** |
| Gemini 2.5 Pro               | 100万                    | 高性能、複雑なタスク向き、**圧倒的なコンテキスト長** |
| Claude 3.5 Sonnet            | 20万                     | 高速、コスト効率が良い、バランス型         |
| GPT-4o                       | 12.8万                   | 高性能、マルチモーダル                 |
| GPT-4 Turbo                  | 12.8万                   | 高性能、大規模なタスク向き             |

Gemini 2.5 Flash および Pro の100万トークンというコンテキスト長は、他のモデルと比較して群を抜いており、特に大規模なプロジェクトや長大なドキュメントを扱う際にその威力を発揮します。Roo Code を使うことで、VSCode上からこの強力なモデルを手軽に利用できるのが魅力です。

Gemini 2.5 Flash は以下の条件で無料で利用できます（2025/5/12時点の情報）。

*   最大出力: 65,535 tokens
*   入力価格: $0.15 / 1M tokens
*   出力価格: $0.60 / 1M tokens
*   1分間あたり15リクエストまで無料。それ以降は、プロンプトサイズに応じて課金されます。

## Google AI Studio で Gemini 2.5 Pro を使う理由：精度の高い作問

一方、Google AI Studio で Gemini 2.5 Pro を使用したのは、主に**精度の高い演習問題を作成するため**です。Gemini 2.5 Pro は Flash と比較して、より複雑な推論や高度な理解が必要なタスクにおいて優れた性能を発揮します。

具体的に、Gemini 2.5 Pro が Gemini 2.5 Flash と比べて優れていると感じた点は以下の通りです。

*   **複雑な指示への対応力**: 複数の条件や制約を含む指示に対しても、意図を正確に汲み取り、期待される形式で出力する能力が高い。
*   **知識の深さと正確性**: 特定の専門分野（今回の場合はIT資格試験の範囲）に関する知識が豊富で、より正確な情報に基づいた問題や解説を生成できる。
*   **創造性と多様性**: 問題のバリエーションや解説の表現において、より創造的で多様なアウトプットが得られる。

これらの特性から、公式の学習ガイドやサンプル問題をインプットとして与え、それらを深く理解した上で、本番に近い形式で質の高い演習問題を作成するタスクには、Gemini 2.5 Pro が最適だと判断しました。

## 演習問題作成の具体的なワークフロー

Google AI Studio を用いた演習問題作成のワークフローは以下の通りです。

1.  **インプットの準備**:
    *   対象となる試験の公式学習ガイドやドキュメント、サンプル問題を用意します。
    *   学習ガイドがPDF形式の場合はそのまま利用します。
    *   学習ガイドがHTML形式しかない場合は、Chrome拡張機能「Copy as Markdown」などを使用してMarkdown形式でクリップボードにコピーし、テキストデータとして利用します。
2.  **Google AI Studio でプロンプト設計**:
    *   準備したインプット（学習ガイド、サンプル問題など）をコンテキストとして与えます。
    *   どのような形式（例: JSON）で、どのような内容（例: 問題文、選択肢、正解、解説）の問題を生成してほしいか、具体的な指示をプロンプトとして記述します。
    *   Gemini 2.5 Pro をモデルとして選択します。
3.  **問題生成とレビュー**:
    *   プロンプトを実行し、生成された問題を確認します。
    *   必要に応じて、問題の表現や解説の正確性を手動でレビュー・修正します。
    *   生成された問題は、プロジェクトの `public/questions/` ディレクトリにJSONファイルとして保存し、Webアプリで利用できるようにします。

このワークフローにより、効率的かつ高品質な演習問題の作成が可能となりました。

## まとめ

本プロジェクトでは、Astroでのアプリケーション開発と演習問題作成という異なるタスクに対し、それぞれの特性に合わせてGitHub Copilot Chat (Claude 3.5 Sonnet)、Roo Code (Gemini 2.5 Flash)、Google AI Studio (Gemini 2.5 Pro) という複数の生成AIツールを使い分けました。

*   日常的なコーディングやファイル単位の質問には **GitHub Copilot Chat**。
*   大規模なコンテキスト理解や複数ファイルにまたがる相談には、圧倒的なコンテキスト長を持つ **Roo Code (Gemini 2.5 Flash)**。
*   高品質なコンテンツ生成や複雑なタスクには、高い精度を持つ **Google AI Studio (Gemini 2.5 Pro)**。

このように、生成AIの得意なことや特性を理解し、適切に使い分けることで、開発プロセス全体の効率とアウトプットの質を最大化できることを実感しました。

今後も、新しい生成AIツールやモデルが登場するたびに、その特性を見極め、最適な使い分けを模索していきたいと思います。

## 追伸：Gamma AI でプレゼンテーションを作成しました。

https://astro-0ddkhtz.gamma.site/