Cline や Cursor、 Devin 等を使った、コードを直接書かずに AI に指示させてプログラムの作成 (いわゆるバイブコーディング) するのが流行っていますね！
とはいえ、「どうやればよいのかわからん」とか、「たくさん課金されちゃうかも…？」とか、「いろいろ指示しないといけないんじゃ…？」と思う人も多いと思います。
この記事では、
にする、バイブコーディングの始め方を書きます。
社内向けに作成した入門記事を外部公開したものです。
2024/3 に作成したもののため、若干古い内容を含むかもしれません
今回はこれをセットアップして、「Cline にお願いするだけで、プログラムを書いてくれる」(いわゆる vibe coding) という状態にします。
エージェントを動かすエディタです。
https://code.visualstudio.com/ からダウンロードします。
ダウンロードしたら指示に従ってセットアップを行います (※ 今回はあんま関係ないので無視しても OK です)
日本語にする方法は、
Search とか書いてある) に Japanese と入力Japanese Language Pack for Visual Studio Code と表示されるので、これの Install をクリック
表示が変わらなければ、
Command Palette を選択Configure Display Language と入力し、 Enterで、いけます。
VSCode を自動操縦して、プログラミングしてくれる君です。
Search とか書いてある) に cline と入力Cline が表示されるので Install をクリック
すると、画面左側にロボットのアイコンが追加されます。これが Cline です。
ここから先は Anthoropic の API Key が必要となります。
一旦この画面のまま、Anthropic の設定を始めます。
生成 AI (OpenAI みたいなやつです) として Anthropic というサービスのものを使います。プログラミング用としては 2024/3 時点で一番いいやつです。
登録方法を説明する記事は ↓ にあるのでこちらを参照してください。
(※ Anthropic の利用にはプリペイドとして、クレジットカードと $5 が必要です)
細かい部分だけ説明します。
ここで、仕事用の Google アカウントを使わないようにしてください (個人 PC なら問題ないです)
(※ チャットアプリ (https://claude.ai/) とは同じ会社の別のアプリなので、チャットアプリの方は今回は使いません。こっち側の課金も不要です。)
の手順で API Key を作成する場合、クレジットカードの登録と $5 を支払うように促されます。
Anthropic では、先払い方式を採用しています。利用する前に、先に支払う必要があります。
逆に、先に支払った以上に費用は請求されないので、青天井になる心配はありません。 (※ オートチャージを設定すると、自動で購入するのでそこだけ注意です。)
手順を進めると、↓ のような画面が表示されると思います。ここで表示される API Key (パスワードみたいな文字列) はこの後使うので、これは控えておいてください。
では、 Cline の画面に戻って、使い始める準備をします。
API Provider は Anthropic を選択Anthropic API Key は先ほど入手した API Key を貼り付けUse custom base URL は選択しないLet's go! を選択
この画面 (Settings ) が表示されたら、最低限の設定は完了です。ただ、使いやすいようにもう少し設定します。
※ この画面は Cline の画面中の歯車マーク (↓ の画面の Done ボタンのすぐ上) をクリックすると移動できます。
ここまでの設定で使い始められるのですが、出来ればこの辺も設定したほうが良いです。体験がかなり良くなります。
何も設定してない Cline だと、短期記憶しか持ってないので、何かをやってもらうために毎回1から詳細に指示が必要です。
流石に面倒すぎるので、長期記憶 (メモリバンク) の設定をします。
Custom Instructions [COPY THIS] が表示されるので、その下のブロックを全部コピー
Copy と右上に出るのでそこをクリックすると楽
Cline の設定画面に行って、これを貼り付けます。
Custom Instructions に貼り付けます。
初期は英語で応答するので、日本語で話してもらいましょう。 (※ Cline の UI は日本語化出来ません)
Advanced Settings というボタンがあるので、クリックしますCline: Preferred Language を探し、ここの選択項目を Japanese - 日本語 に変更
ここからは、やりたい人がやればよいです。
生成 AI が何考えているのかを出力してもらいます。考える精度が上がります。(人間と一緒ですね)
Enable extend thinking を選択
.clinerules ファイルを用意するプロジェクトごとに、 .clinerules というファイルを置くと、 Cline が自動でそれを呼んで従ってくれます。
プログラミングのスタイルとか、その辺指示するのはこのファイルです。
https://docs.cline.bot/improving-your-prompting-skills/prompting#clinerules-file
何書くかについては、 mizchi さんのやつとかが参考になると思います。
https://github.com/mizchi/ailab/blob/main/.clinerules
が、最初は一旦無しで、慣れてきたら書くでも良いと思います。
また、メモリバンクを設定すれば、Cline が作業で覚えたことをどんどんメモリバンクに保存してくれます。最初はとりあえず無しでやってみて、メモリバンクとかから良さそうな物を .clinerules に移すで良いと思います。
ということで、 Cline を使う準備が出来ました。ここからは使ってみます。
まず、Cline が作業するフォルダーを作ります。 Visual Studio Code のメニューから、 ファイル → フォルダーを開く を選択して、 Cline が作業するフォルダーを (作成して) 開きます。
その後 Cline を使います。
+ アイコンを押して、チャット画面に移動Type your task here にやらせたいことを入力して Enter
あとは、こんな感じで Cline が考えながら作業を進めてよいかを聞いてくるので、 Approve or Reject を押したり、返答を直接したりします。
あとは Cline とやり取りしたり、作業の許可を求めてくるのを承認したりしながら作業を進めてくれます。
「AI 触ってみたいが何作らせれば良い？」というのはまあまあある悩みだと思います。
一旦方針としては、
みたいな感じが良いと思います。
やりとりしていると感覚が掴めてくると思うので、とりあえずお試しで簡単なことをやらせてみるのがおすすめです。
少し複雑なことをやらせたくなったタイミングで、 Plan mode を使うと良いです。
画面下側にある Plan / Act の切り替えで、Plan mode に切り替えることができます。
曖昧な指示だと、 Act mode は勝手に仕様を決めてコーディングしてしまうのですが、 Plan mode だと対話的に詳細を聞いてくれます。 Plan mode でやりたいことを明確にして、 Act mode に切り替えて作業を進めるのが Cline の基本的なプラクティスです。
あと、「Cline がハマっていそうだったら、Act mode から Plan mode に戻して計画や修正方針を立て直す」というのが個人的によくやります。
Cline はあまりデバッグが上手くないシーンや、ハルシネーションを見てしまうケースもぼちぼちあるので、こういったケースで Plan mode に戻して一旦作業を止めて、方針を壁打ちしてあげるのが重要だったりします。
とりあえず設定してもらった メモリバンク ですが、これによって、プロジェクトの進捗、プロジェクトの設計や技術構成などを記録してくれます。
これを使っていると、「毎回詳細な指示を渡さなくても、メモリバンクを参照して情報を補ってくれる」というところがあります。
究極、「続きやって」だけで次やることを Plan してくれるようになります。
あらかじめ渡しているプロンプトで、メモリバンクに書くようにはなっているのですが、意図して記録してほしいものは、作業が終わったタイミングで「メモリバンクに残して」とか明示的に指示するのもありです。
(例えば自動テストを書いてもらったら、以後こういう感じで自動テスト書いてくれ、みたいな感じのことを覚えてもらう)
MCP (Model Context Protocol) とは、LLM から、外部サービスやツールを連携するためのプロトコルです。 (すごく大雑把に表現すると、LLM 版ブラウザ拡張、LLM版 Language Server をやるための仕組みです。)
Cline は MCP サーバーの管理機能を持っていて、以下の画面から MCP サーバーを探せたりインストールできたりします。
ちなみにインストールは、 LLM に指示させて、設定ファイルを変更するというやり方でやってます。おもしろい。
注意として、そのサービスとは別の作者が書いている MCP サーバーが多かったり、外部サービスの token を要求したり、 token が設定ファイルにベタ書きで保存されたり、などのセキュリティ的な懸念事項が結構あります。(ブラウザ拡張などで一般的に注意するのと同じように) 注意したほうが良いでしょう。
黎明期の技術というのもあり、配布されている MCP サーバーを使うのに懸念があれば、いっそのこと自分で使ってみるのもありだと思います。
MCP サーバーを作成する手間は、既存のライブラリを活用すると案外低いです。 (手前味噌ですが、 Ruby を使って実装する例として、以下の記事が参考になると思います。)
Cline は URL を渡すと、実際にブラウザを開いて読んでくれます。
比較的新しいライブラリ (例: React Router v7) などを扱う際には、LLM 内の知識として入っていないことがあるので、URL を渡して読んでもらうとよいです。
ただ、Claude などだと、 computer use という機能を使ってドキュメントを読むのですが、ブラウザを開く → 画像をテキストに変換して解釈、という工程を取るためそこそこ料金がかかります。
なので、
などするのが料金節約的におすすめです。
Be the first to comment
