0. この記事について
私のような非プログラマだが、最近話題のバイブコーディングで何かを効率よくやりたい方のご参考になればと思います。
逆にプログラマな方は特に読む必要すらない内容だと思います。
1. ChatGPT + 手動ファイル作成が限界だった・・・
私はChatGPT Plusを契約していたので、日頃からAIは全てChatGPTを利用していました。
当然、「コードを生成したい」、または「とあるコードを修正したい」となるとそれらも自然とChatGPTを利用していました。
コードの生成や修正が一発でできれば苦労しないのですが、当然そんなことはなく、以下のようなやり取りが多発します。
私 : 「このファイルのコードの〇〇なところを修正して。修正はパッチではなく、完全な1ファイルとして出力して」
⬇️
ChatGPTの回答: 「こちらのコードになります」
⬇️
私(作業): コードをコピー → エディタに貼り付け → 実行して動作確認 → エラーまたは挙動が違う
⬇️
私: 「▲▲なエラーになりました。修正して完全な1ファイルとして出力して」
⬇️
ChatGPTの回答: 「こちらのコードになります」
⬇️
私(作業): コードをコピー → エディタに貼り付け → 実行して動作確認 → エラーまたは挙動が違う
繰り返し・・・
この一連のやり取りが数回ならまだしも、数十回になるととてもしんどいです。
私のようなコードを書けない人間からすると、AIを活用することで最終的には出来上がるものの、これが苦痛であまりバイブコーディングに気が進まなかったというのが正直なところです。
2. VS Code + Cline + OCI Generative AI という選択
バイブコーディングは仕事関連で一番使うので、お金をいかに使わずに実現するかがポイントでした。
ということから以下の構成としました。
| 利用する製品・サービス | |
|---|---|
| IDE | vscode |
| コーディングエージェント | cline |
| LLM | OCI GenAIサービス |
3. 後押しになったOCI GenAIのアップデート
直近、xai.grok-code-fast-1というコーディング向けのモデルがリリースされました。また、これらのモデルをOpenAI互換APIで利用できるようにもなりました。
それまでは「LiteLLMで使わないとなー」っと思っていたので、このアップデートでより良い環境が準備できるようになりました。
5. セットアップ手順
5-1. VS Codeのインストール
以下のURLより利用しているOSに合わせてダウンロードしてインストールします。
5-2. Cline導入
以下の要領でインストールを行います。
インストールが完了すると、左にClineアイコンが表示されます。
初期セットアップとして、Bring my own API keyを選択してContinueします。
以下の画面になるので、これはそのままにして次のステップに進みます。
5-3. OCI GenAIサービスをOpenAI互換APIで利用するための手順
この手順は以下の@yuji-arakawaさんの手順を参考にします！
5-4. ClineへAPI設定を追加
あとは先ほどのClineの画面に戻り、取得したAPIキーの設定を行います。以下の赤枠の部分を設定します。
| 項目名 | 設定値 |
|---|---|
| API Provider | OpenAI Compatible |
| BaseURL | https://inference.generativeai.ap-osaka-1.oci.oraclecloud.com/20231130/actions/v1/ |
| API Key | 5-3で取得したキー |
| Model ID | xai.grok-code-fast-1 |
以上で設定は完了です！
6. ゼロから何か作ってみよう
⬇️まずはフォルダーを開くをクリックして、コードを保存するディレクトリを適当に選択します。
⬇️左のClineアイコンを選択します。
⬇️この時以下のガイドが出るので、はい、作成者を信頼しますをクリックします。
⬇️では指示を出してみましょう。定番ですが、テトリスを作ってみたいと思います。PythonでGUIでテトリスを作成してと記入して、送信ボタンを押します。
⬇️すると真ん中のウィンドウでコードが生成されます。コードが書き終わるとSaveボタンが現れるので、押してファイルとして保存させます。
⬇️次に、真ん中のウィンドウの下にターミナルが開き、生成したコードの実行が行われます。が、ここでエラーになってしまいました。この状況も自動的に認識され、pythonのversionを確認しています。
⬇️結果、パッケージが足らなかったようで、インストールが必要なようです。Run Commandを押してパッケージのインストールをさせます。インストールが完了したらまたコードが実行されました。
⬇️気づいたときにはテトリスが起動し、ブロック落下中でした。動作確認としてちょっと遊んでみます。ブロックを回転させたり1行揃えたら消えるか、ブロックを積み重ねてゲームオーバーになるかなどなど。
⬇️で、ウィンドウを閉じるとclineではTask Complatedと出力されました。もし操作性で問題があればさらに指示を入力して修正することもできます。
8. 最後に
初めてのCline(コーディングエージェント)によるバイブコーディングが行え、コピペ地獄から解放された瞬間でした。
こちらが指示をすればあとは解決に向けてひたすらエージェントとLLMが頑張ってくれる世界。私はポチポチ許可をするだけ。
非プログラマの私としては一つ大きな武器が増えた瞬間でした。