久しぶりのブログ。
今回はAIを活用したコーディングを試してみます。今となっては “あたりまえ” になってきた技術ではありますが、一度きちんと試しておきたいな、ということでその過程をブログに記録していきます。
それと今回は試験的に元ネタを食わせたAIに文章生成してもらっています。おかしいところはチェック・修正しているつもりですが、見落としがあるかもですのでご了承ください。
AIツールの選定
昔に比べてAIコーディングを利用できるツールの種類は増え、ローカル環境で動くもの、クラウド上で完結するもの、ソースコードすら書かないノーコード型など、選択肢の幅が広がっています。
実際の開発では、「どのエディタ（開発環境）」で「どのAIエージェント（実行役）」を動かすかというセット（組み合わせ）で環境を選ぶのが一般的です。ローカルで柔軟に構築するスタイルもあれば、クラウド上で最初から一体化しているサービスもあります。
今回は最終的にシンプルなChrome拡張機能を作ってみたいので、まずは主要な「開発環境 ＋ AIエージェント」の選択肢から整理していこうと思います。
AIエージェント
指示を出すだけで、自律的にソースコードの作成からデバッグまでを実行するツール（およびそれが動作する開発環境）です。エディタに拡張機能を組み合わせる形や、最初からAI機能が統合されたエディタなど、主にローカル環境で動かすものと、クラウド上で完結するものがあります。
ローカル型
| ツール | 特徴 | 料金 |
|---|---|---|
| Visual Studio Code（＋ Copilot / Cline 等） | Microsoftが開発する標準エディタ。公式の「GitHub Copilot」を使うか、「Cline」等の自律型AIエージェント拡張を追加するか、用途に合わせて選べる | エディタ自体は完全無料（商用利用も可） |
| Cursor | VS Codeベースで作られたAIネイティブなエディタ。エディタとAIが最初から一体化しており、直感的なコード生成や複数ファイルの同時修正が特徴 | 永続無料だが、AI機能に毎月の厳しい回数制限あり |
| JetBrains IDE | IntelliJ IDEA、WebStorm など、特定の言語に特化した高機能IDE。高度な補完やデバッグ機能が最初から組み込まれている | 一部言語用は無料（Community版） |
他、Xcode / Android Studio / Visual Studio など
クラウド型
| ツール | タイプ | 特徴 | 無料枠 | 有料プラン |
|---|---|---|---|---|
| GitHub Codespaces | クラウド開発環境 | ブラウザ上で起動できる開発環境。リポジトリに紐づいたVS Code環境が動く | 毎月120時間のコンピュート時間・15GB/月のストレージ（個人のFreeプラン。大きいマシンほど早く減る） | 超過分は従量課金（GitHub Proなら月180時間・20GB/月） |
| Google AI Studio | AIモデルの試用・APIキー発行 | Geminiなどのモデルをブラウザ上で試せる開発者向けプラットフォーム。APIキーの発行もここで行える | 一部のモデルのみ・利用制限あり・入力データが学習に使われる | 前払い／従量課金（最上位モデルも利用可・学習利用なし） |
| Bolt.new | チャットでアプリ開発 | 指示するだけで、フロントからバックエンド、デプロイまでAIが構築 | 月100万トークン（1日あたりの上限あり） | Pro 月$25（年払いなら月$18）・月1,000万トークン（繰り越し可） |
| Replit Agent | チャットでアプリ開発 | アイデアを伝えるだけで、AIがコードを書き、バグを直し、公開まで行う | Starterプラン：1日あたりのAgent利用枠・公開できるアプリは1つ | Core 月$20（年払いなら月$18）：上位モデル用に$20分のクレジット＋Free Modeで最大30時間のチャット |
| Lovable | チャットでアプリ開発 | デザイン性の高いUIとデータベースが連携したWebアプリを指示だけで作成 | 1日5クレジット（月30まで）＋月20クラウドクレジット | Pro 月$25（年払いは2か月分無料）：月100クレジット（繰り越し可） |
| v0 | チャットで画面（UI）作成 | Vercel製。日本語の指示からReact / Tailwind CSSの画面を高速生成・プレビュー | 新規ユーザーに1回限り$5分のクレジット・1日7メッセージ | Plus ユーザーあたり月$30：毎月$30分＋ログインごとに1日$2分のクレジット |
※「チャットでアプリ開発」タイプは、自分でコードを書かなくても指示だけでアプリができるサービスです。AIが生成したコードは見たり編集したりもできます。AIの利用料はプランのトークン／クレジットに含まれ、使い切ったら追加購入か上位プランへの変更になります。
※料金・無料枠は2026年10月時点で各公式サイトを確認したものです。変更されていることがあるので、利用前に各公式サイトを確認してください。
選定結果
今回の開発環境には 「Visual Studio Code ＋ Cline」 の組み合わせを採用することにしました。選定の主な理由は以下の3点です。
- Chrome拡張機能の開発に適している Chrome拡張機能の開発では、ローカルでソースコード（HTML/CSS/JS）を管理し、ブラウザのデベロッパーモードから直接読み込ませてテストを行うスタイルが一般的であるため
- ローカルでの実機テスト・デバッグがしやすい エディタ上で修正したコードが即座にローカルファイルへ反映されるため、Chromeブラウザでの動作確認やエラーログの解消といったイテレーション（修正サイクル）を高速に回せるため
- 複数のAIモデル（API）を切り替えて検証できる 特定のAIサービスに固定されず、Anthropic（Claude）やOpenAI（GPT）、Google（Gemini）などのAPIキーを差し替えるだけで、モデルごとの生成精度や速度の違いを比較・検証できるため
AIプロバイダおよびモデル（API）の選定
VSCodeとClineの組み合わせが決まったため、次はエージェントの「脳」となるAIプロバイダとモデルの選定を行います。今回は代表的な3大プロバイダ（Anthropic、OpenAI、Google）の主力モデルを比較検討しました。
プロバイダの特徴
| プロバイダ | 特徴 | API無料枠 |
|---|---|---|
| Anthropic（Claude） | AIコーディングや自律型エージェントとの連携で、最も評価と実績が高い | なし |
| OpenAI（GPT） | 高い汎用性と高速な処理速度。実績豊富 | なし |
| Google（Gemini） | 巨大なコンテキストウィンドウ（一度に読み込める情報量）と圧倒的なコストパフォーマンス | あり（一部のモデルのみ・入力データが学習に使われる） |
主なモデル
| プロバイダ | モデル | 位置づけ | API料金（入力 / 出力） | 特徴 |
|---|---|---|---|---|
| Anthropic | Claude Fable 5.1 | 最上位 | $10 / $50 | 高度な推論や、長時間かかるエージェント作業向け |
| Claude Opus 5.5 | ハイエンド | $4 / $20 | 長時間のエージェント型コーディング向け。公式は「迷ったらまずこれ」と案内 | |
| Claude Sonnet 5.5 | 標準 | $2 / $10 | 速度と賢さのバランスが良い | |
| Claude Haiku 5.5 | 軽量 | $0.10〜 / $0.50〜 | 最速。分類・抽出など大量で応答速度が重要な処理向け | |
| OpenAI | GPT-6 Astra | 最上位 | $10 / $50 | 最も高性能。複雑な推論やコーディング向け |
| GPT-6.1 Sol | 標準 | $2 / $10 | Astraに近い性能を低コストで。性能とコストのバランス型 | |
| GPT-6 Luna | 軽量 | $0.10 / $0.50 | 最も効率的。コスト重視の大量処理向け | |
| Gemini 4 Argon | 最上位 | $2 / $10 ※1 | フラッグシップの推論モデル。コンテキスト・出力とも最大100万トークン。無料枠なし | |
| Gemini 3.8 Flash | 標準 | $0.75 / $3.75 ※2 | Flash系で最も賢い。長時間のコーディングや自律エージェント向け。無料枠あり | |
| Gemini 3.5 Flash-Lite | 軽量 | $0.30 / $2.50 | 最速・最安。無料枠あり |
※1 2026年12月1日から $4 / $20 に値上げ予定 ※2 2027年1月1日から $1.50 / $7.50 に値上げ予定
コンテキストウィンドウ（一度に読み込める情報量）は、表のモデルはどれも約100万トークンです。
選定結果
正直カタログスペックだけでは選びようがないので、3つのプロバイダを実際に触ってみようと思います。
さいごに
今回は「VSCode ＋ Cline」を中心とした開発環境の設計と、そこで活用するAIプロバイダ（API）の選定・比較を行いました。
| 項目 | 結論 |
| 開発環境 | VSCode ＋ Cline（Chrome拡張機能の開発・ローカルテストと相性が良く、API連携の自由度が高い） |
| AIプロバイダ（API） | 3社とも実際に触ってみる |
次回は、実際にVSCodeへCline拡張機能を導入し、各プロバイダのAPIキーを発行・設定して、まずは手元で動くところまでセットアップを進めていこうと思います。
📣 ここから広告です（Amazonアソシエイト）
AIコーディングはツールの移り変わりが早いので、細かい操作より「AIエージェントとはどういうものか」「どう任せるか」という考え方を押さえておくと、ツールが変わっても応用がききます。…という建前のもと、売れている本を紹介させてください。
📚 Agentic Coding 生成AI時代のシステム開発入門 タイトルどおり、AIエージェントに開発を任せる「エージェンティックコーディング」の入門書。2026年発行で、Amazonでの評価も高めです。
📚 実践Claude Code入門―現場で活用するためのAIコーディングの思考法 Claude Code 関連の本の中でも、Amazonのレビュー数が多い定番。サブタイトルどおり「思考法」まで扱っています。
📚 60分でわかる！ AIエージェント 超入門 「そもそもAIエージェントって何？」という段階なら、まずはこのくらいの薄さから。
ここのリンクから購入していただくと、筆者にちょっぴり紹介料が入ります（お値段は変わりません）。いただいた分は、次回以降の検証の API 代にありがたく使わせていただきます。興味があれば、ぜひ！
※Amazonのアソシエイトとして、うしブロは適格販売により収入を得ています。
AIコーディングシリーズ
- [Vol.1] – AIコーディングツール比較｜Cursor・Cline・Replit・v0の特徴と無料枠
- [Vol.2] – Cline（VSCode）の設定方法｜Claude・OpenAI・GeminiのAPIキー取得手順
- [Vol.3] – Cline×AIでChrome拡張機能を作ってみた｜Claude・OpenAI・Gemini比較
コメント