🚀 VS Code × Roo Code × OpenRouter で気軽に始める無料AIコーディング
💡 はじめに
AIによる自動コーディングが話題になっているけど、
「ちょっと試してみたいけど、何から始めればいいの？」
「Copilot や ChatGPT の有料プランじゃなくて、無料で使える方法ないの？」
そんなあなたにピッタリなのが、 Roo Code × OpenRouter の組み合わせ！
🌟 無料 で使えて、VS Code 上で AIがコードを提案＆補完 してくれる最強ツールです！
本記事では、Roo CodeとOpenRouterを使ったAIコーディング環境の構築手順 を紹介します 💪
🛠 必要なもの
AIコーディングを試すために、以下のツールを用意しましょう！
- VS Code（エディタ）
- Roo Code（AIコーディング拡張機能）
- OpenRouter（AI API プロバイダー）
- 無料で使えるAIモデル（Google Gemini など）
すべて無料でOK！ では、さっそく始めていきましょう 🚀
🏗 Roo Code をインストールしよう
まずは VS Code に Roo Code をインストールします。
- VS Code を開く（未インストールなら こちら からダウンロード）
-
拡張機能の検索バー に
roocodeと入力 -
Roo Code (prev. Roo Cline)をインストール
これで Roo Code の準備完了！
🌍 OpenRouter を設定しよう
Roo Code を使うには、AIのAPIプロバイダー が必要です。
今回は、無料で使える OpenRouter を設定します。
- OpenRouter の公式サイト にアクセス
- Google または GitHub でログイン（無料）
- APIキー設定ページ に移動
- APIキーを作成 & メモしておく（あとで使うよ！）
これで OpenRouter の準備もOK！
⚙️ Roo Code の初期設定
次に、VS Code 上で Roo Code のセットアップ を行います。
- VS Code 左側の 🚀 ロケットアイコン をクリック（Roo Code を開く）
- API Provider に
OpenRouterを選択 - さっき取得した API Key を入力
-
モデルを選択（検索バーに
freeと入力すると無料モデルが出るよ！） -
Google Gemini 2.0 Pro Experimentalなどの無料モデルを選択 -
Let's go!ボタンをクリック
これで AI コーディング環境が整いました！🎉
🚀 AIと一緒にコーディングしてみよう！
では、さっそく AI にコードを書かせてみましょう！
✅ プロジェクトの作成
Roo Code の チャット画面 にタスクを入力するだけでOK！
vite+react+tsでshadcn uiを使ってTODOアプリを作りたいです。
すると、AI がプロジェクトを作成し、コードを自動生成！
✅ コードの確認 & 承認
AI がコードを提案
内容を確認して、問題なければ 「Approve」ボタンを押す
自動でコードがプロジェクトに反映！
これだけで、AIがコーディングをサポートしてくれる！✨
🎯 まとめ
Roo Code × OpenRouter を使えば、無料で手軽にAIコーディング が始められます！
✔️ Copilot や ChatGPT 有料プラン不要
✔️ VS Code だけで完結
✔️ 無料のAIモデルでコード補完＆提案初心者でも簡単に試せるので、ぜひ導入してみてください！
これからの時代、AI を活用して賢くコーディング しましょう 💡📢
Discussion