AIコーディングを試してみる Vol.1

久しぶりのブログ。

今回はAIを活用したコーディングを試してみます。今となっては “あたりまえ” になってきた技術ではありますが、一度きちんと試しておきたいな、ということでその過程をブログに記録していきます。

それと今回は試験的に元ネタを食わせたAIに文章生成してもらっています。おかしいところはチェック・修正しているつもりですが、見落としがあるかもですのでご了承ください。

AIツールの選定
- AIエージェント
- 選定結果
AIプロバイダおよびモデル（API）の選定
さいごに

AIツールの選定

昔に比べてAIコーディングを利用できるツールの種類は増え、ローカル環境で動くもの、クラウド上で完結するもの、ソースコードすら書かないノーコード型など、選択肢の幅が広がっています。

実際の開発では、「どのエディタ（開発環境）」で「どのAIエージェント（実行役）」を動かすかというセット（組み合わせ）で環境を選ぶのが一般的です。ローカルで柔軟に構築するスタイルもあれば、クラウド上で最初から一体化しているサービスもあります。

今回は最終的にシンプルなChrome拡張機能を作ってみたいので、まずは主要な「開発環境＋ AIエージェント」の選択肢から整理していこうと思います。

AIエージェント

指示を出すだけで、自律的にソースコードの作成からデバッグまでを実行するツール（およびそれが動作する開発環境）です。エディタに拡張機能を組み合わせる形や、最初からAI機能が統合されたエディタなど、主にローカル環境で動かすものと、クラウド上で完結するものがあります。

ローカル型
- Visual Studio Code （+ Copilot / Cline 等）
  - 📝Microsoftが開発する標準エディタ「VS Code」。公式の「GitHub Copilot」を標準で使うか、「Cline」等の自律型AIエージェント拡張機能を追加してAPI連携するか、用途に合わせて柔軟に選択可能。 / 👛エディタ自体は完全無料（商用利用も可能）
- Cursor
  - 📝VS Codeをベースに構築されたAIネイティブのコードエディタ。エディタのコア機能とAIが最初から一体化しており、直感的なコード自動生成や複数ファイルの同時修正が特徴。 / 👛無料（永続無料だが、AI機能に毎月の厳しい利用回数制限あり）
- JetBrains IDE
  - 📝JetBrains社が提供する、特定のプログラミング言語に特化した超高機能な「統合開発環境（IDE）」シリーズ（IntelliJ IDEA、WebStormなど）。高度なコード補完やデバッグ機能が最初から組み込まれている。 / 👛JavaやPython（PyCharm）など一部言語用は無料（Community版）
- その他
  - Xcode / Android Studio / Visual Studio など
クラウド型
- GitHub Codespaces
  - 📝GitHub社が提供する、ブラウザ上で一瞬で起動できるクラウド開発環境。リポジトリに紐づいた本格的なVS Code環境がクラウド上で動作する。 / 👛毎月120コア時間のコンピュート時間と15GBのストレージ枠の無料枠あり（個人アカウント向け、超過分は従量課金）
- Google AI Studio
  - 📝Google社が提供する、Geminiなどの最先端AIモデルをWebブラウザ上でテスト・カスタマイズできる開発者向けプラットフォーム。APIキーの発行やプロンプトの調整が素早く行える。 / 👛利用制限および入力データが製品向上（学習）に使用される無料枠あり（データの学習利用のない運用の場合は、有料の従量課金プラン）
- Bolt.new [No-code]
  - 📝StackBlitz社が開発する、AI駆動のフルスタックWebアプリ開発プラットフォーム。チャットに指示を出すだけで、AIがフロントからバックエンドまで自動構築・デプロイまで行う。 / 👛1日30万・月間100万トークン制限の無料プランあり（制限を解除して利用する場合は有料のProプラン［月額$25］から利用可能）
- Replit Agent [No-code]
  - 📝Replit社が提供する、対話型のAIシステム開発エージェント。作りたいアプリのアイデアを自然言語で伝えるだけで、AIが自律的にコードを書き、バグを修正し、そのままアプリを公開（デプロイ）してくれる。 / 👛Free Modeで最大30時間チャットが使える無料枠あり（制限の解除や高度な機能を利用する場合は有料のCoreプラン［月額$20］から利用可能）
- Lovable [No-code]
  - 📝Lovable社が提供する、デザイン性と指示だけでコードを組むことに特化したWebアプリ作成AIツール。チャットで指示を出すだけで、美しいUIとデータベース（Supabase等）が連携した本格Webアプリが完成する。 / 👛無料付与クレジット分の範囲で使える無料プランあり（制限を解除して利用する場合は有料のProプラン［月額$25］から利用可能）
- v0
  - 📝Vercel社が提供する、テキストから高品質なUIデザインやフロントエンドのコードを高速生成するAIツール。日本語の指示からReactやTailwind CSSを用いた実用的な画面を構築・プレビューできる。 / 👛毎月$5分のクレジットと1日7メッセージ制限の無料プランあり（制限を解除して利用する場合は有料のPlusプラン［ユーザーあたり月額$30］から利用可能）

選定結果

今回の開発環境には 「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）の主力モデルを比較検討しました。

Anthropic（Claude シリーズ）

AIコーディングおよび自律型エージェントとの連携において、最も評価と実績が高いプロバイダです。

Sonnet シリーズ（Sonnet 5）
- 特徴：コーディングとエージェント処理に特化した標準主力モデル。指示追従性とコード精度のバランスが最も優れている。
Opus シリーズ（Opus 5）
- 特徴：複雑な自律コーディングや大規模リファクタリング向けの最高峰モデル。推論能力が高い反面、単価が高価。
Haiku シリーズ（Haiku 4.5）
- 特徴：レスポンス速度と低コストを追求した軽量モデル。単純なコード補完や初期解析に向く。

OpenAI（GPT シリーズ）

高い汎用性と高速な処理速度に強みを持つ、実績豊富なプロバイダです。

GPT-5.6 / GPT-6 シリーズ（Astra / Sol / Terra）
- 特徴：複雑なロジック構築や大規模開発向けのハイエンド〜ミドルモデル。コード生成だけでなくアルゴリズム検討にも強い。
Luna / mini シリーズ
- 特徴：低コスト・超高速レスポンスに特化したモデル。ログ解析や一次フィルタリングに最適。

Google（Gemini シリーズ）

巨大なコンテキストウィンドウ（一度に読み込める情報量）と圧倒的なコストパフォーマンスが特徴のプロバイダです。

Gemini Flash シリーズ（Gemini 3.8 Flash）
- 特徴：高速かつ高精度な軽量モデル。長大なエラーログや複数ファイルを一括で読み込ませる作業に極めて強く、無料枠（Free Tier）も用意されている。
Gemini Pro シリーズ
- 特徴：複雑な推論や高度な処理に対応するハイエンドモデル。

選定結果

正直カタログスペックだけでは選びようがないので、3つのプロバイダを実際に触ってみようと思います。

さいごに

今回は「VSCode ＋ Cline」を中心とした開発環境の設計と、そこで活用するAIプロバイダ（API）の選定・比較を行いました。

環境選定の要点を振り返ると、以下の通りです。

開発環境（VSCode ＋ Cline）
- Chrome拡張機能の開発やローカルでの実機テスト・デバッグと相性が良く、API連携の自由度が高い点から採用
AIプロバイダ（API）方針
- それぞれ触ってみる

次回は、実際にVSCodeへCline拡張機能を導入し、各プロバイダのAPIキーを発行・設定して、まずは手元で動くところまでセットアップを進めていこうと思います。