Cline や Cursor、 Devin 等を使った、コードを直接書かずに AI に指示させてプログラムの作成 (いわゆるバイブコーディング) するのが流行っていますね！
とはいえ、「どうやればよいのかわからん」とか、「たくさん課金されちゃうかも…？」とか、「いろいろ指示しないといけないんじゃ…？」と思う人も多いと思います。

この記事では、

自動で課金せず、$5 だけで試せる
極力最小限の手間で試せる
Memory Bank など、既存の知見を使うことで、各プロンプトを減らせる

にする、バイブコーディングの始め方を書きます。

社内向けに作成した入門記事を外部公開したものです。
2025/3 に作成したもののため、若干古い内容を含むかもしれません

今回セットアップするもの

エディタ: Visual Studio Code (https://code.visualstudio.com/)
プログラミングするエージェント: Cline (https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)
生成 AI: Anthropic の Claude 3.7 Sonnet (https://www.anthropic.com/)
- 他でもまあ出来なくないですが、費用、頭の良さ的にこれが一番おすすめです

今回はこれをセットアップして、「Cline にお願いするだけで、プログラムを書いてくれる」(いわゆる vibe coding) という状態にします。

セットアップ方法

Visual Studio Code のインストール

Visual Studio Code をインストールしていない人はこの折りたたみを見てください

エージェントを動かすエディタです。

https://code.visualstudio.com/ からダウンロードします。

ダウンロードしたら指示に従ってセットアップを行います (※ 今回はあんま関係ないので無視しても OK です)

日本語にする方法は、

画面左側の積み木みたいなアイコンをクリック
Extension というパネルが表示されるので、検索欄 (Search とか書いてある) に Japanese と入力
Japanese Language Pack for Visual Studio Code と表示されるので、これの Install をクリック

表示が変わらなければ、

画面左下の歯車アイコンをクリック → Command Palette を選択
テキストを入力する箇所が出るので、 Configure Display Language と入力し、 Enter
言語一覧が出るので、日本語を探してクリック

で、いけます。

Cline のインストール

VSCode を自動操縦して、プログラミングしてくれる君です。

画面左側の積み木みたいなアイコンをクリック
Extension というパネルが表示されるので、検索欄 (Search とか書いてある) に cline と入力
Cline が表示されるので Install をクリック

すると、画面左側にロボットのアイコンが追加されます。これが Cline です。

画面左側のロボットのアイコンをクリック
↓ の画面が出ることを確認

ここから先は Anthoropic の API Key が必要となります。
一旦この画面のまま、Anthropic の設定を始めます。

Anthropic のアカウント作成 & API Key 登録

生成 AI (OpenAI みたいなやつです) として Anthropic というサービスのものを使います。プログラミング用としては 2024/3 時点で一番いいやつです。

登録方法を説明する記事は ↓ にあるのでこちらを参照してください。

(※ Anthropic の利用にはプリペイドとして、クレジットカードと $5 が必要です)

細かい部分だけ説明します。

アカウント作成

https://console.anthropic.com/login にアクセスします
Continue with Google を選んでアカウント作成
- ここで、仕事用の Google アカウントを使わないようにしてください (個人 PC なら問題ないです)
名前などを入力して、アカウント作成 (Sign up)

(※ チャットアプリ (https://claude.ai/) とは同じ会社の別のアプリなので、チャットアプリの方は今回は使いません。こっち側の課金も不要です。)

クレジットカードの登録、プリペイドの購入

の手順で API Key を作成する場合、クレジットカードの登録と $5 を支払うように促されます。

Anthropic では、先払い方式を採用しています。利用する前に、先に支払う必要があります。

逆に、先に支払った以上に費用は請求されないので、青天井になる心配はありません。 (※ オートチャージを設定すると、自動で購入するのでそこだけ注意です。)

API Key は控えておく

手順を進めると、↓ のような画面が表示されると思います。ここで表示される API Key (パスワードみたいな文字列) はこの後使うので、これは控えておいてください。

Cline の利用開始設定 (API Key の設定)

では、 Cline の画面に戻って、使い始める準備をします。

情報の入力
- API Provider は Anthropic を選択
- Anthropic API Key は先ほど入手した API Key を貼り付け
- Use custom base URL は選択しない
Let's go! を選択

この画面 (Settings ) が表示されたら、最低限の設定は完了です。ただ、使いやすいようにもう少し設定します。

※ この画面は Cline の画面中の歯車マーク (↓ の画面の Done ボタンのすぐ上) をクリックすると移動できます。

Cline の設定 (使いやすくなるように)

ここまでの設定で使い始められるのですが、出来ればこの辺も設定したほうが良いです。体験がかなり良くなります。

長期記憶 (メモリバンク) の設定

何も設定してない Cline だと、短期記憶しか持ってないので、何かをやってもらうために毎回1から詳細に指示が必要です。

流石に面倒すぎるので、長期記憶 (メモリバンク) の設定をします。

https://docs.cline.bot/improving-your-prompting-skills/custom-instructions-library/cline-memory-bank に行く
下にスクロールすると、 Custom Instructions [COPY THIS] が表示されるので、その下のブロックを全部コピー
- マウスカーソルを置くと Copy と右上に出るのでそこをクリックすると楽

Cline の設定画面に行って、これを貼り付けます。

コピーした文字列を、Cline の設定の Custom Instructions に貼り付けます。
Done で設定完了

応答の日本語化

初期は英語で応答するので、日本語で話してもらいましょう。 (※ Cline の UI は日本語化出来ません)

Cline の設定画面に Advanced Settings というボタンがあるので、クリックします
右側に設定画面が出るので Cline: Preferred Language を探し、ここの選択項目を Japanese - 日本語 に変更

(やらなくても OK)

ここからは、やりたい人がやればよいです。

追加の設定

extended thinking の有効化

生成 AI が何考えているのかを出力してもらいます。考える精度が上がります。(人間と一緒ですね)

Cline の設定画面から Enable extend thinking を選択
Budget というスライダーが出るが、そのままで OK

`.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 を使う準備が出来ました。ここからは使ってみます。

作業フォルダーを開く

まず、Cline が作業するフォルダーを作ります。 Visual Studio Code のメニューから、 ファイル → フォルダーを開く を選択して、 Cline が作業するフォルダーを (作成して) 開きます。

Cline を開く

その後 Cline を使います。

Cline の画面の + アイコンを押して、チャット画面に移動
下の Type your task here にやらせたいことを入力して Enter

あとは、こんな感じで Cline が考えながら作業を進めてよいかを聞いてくるので、 Approve or Reject を押したり、返答を直接したりします。

あとは Cline とやり取りしたり、作業の許可を求めてくるのを承認したりしながら作業を進めてくれます。

Tips

とりあえず何をやれば良い？

「AI 触ってみたいが何作らせれば良い？」というのはまあまあある悩みだと思います。

一旦方針としては、

とりあえず最初は1ページで済むような超簡素なアプリを作らせてみれば OK
- Web 上で動く TODO アプリを作りたい
- CSS でアニメーションをする、静的 Web ページなど
  - https://x.com/nemunemu3desu/status/1897589675797135555
大体どういうのが作れるかとか分かってきたタイミングでもう少し複雑なことをさせてみる
- ネタが無ければ「XXX のクローンを作りたい」とかが良いと思います
  - Slack, Devin, Vitest, gh, ...etc

みたいな感じが良いと思います。
やりとりしていると感覚が掴めてくると思うので、とりあえずお試しで簡単なことをやらせてみるのがおすすめです。

Plan mode を使ってみよう

少し複雑なことをやらせたくなったタイミングで、 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 を使う

MCP (Model Context Protocol) とは、LLM から、外部サービスやツールを連携するためのプロトコルです。 (すごく大雑把に表現すると、LLM 版ブラウザ拡張、LLM版 Language Server をやるための仕組みです。)

Cline は MCP サーバーの管理機能を持っていて、以下の画面から MCP サーバーを探せたりインストールできたりします。

ちなみにインストールは、 LLM に指示させて、設定ファイルを変更するというやり方でやってます。おもしろい。

注意として、そのサービスとは別の作者が書いている MCP サーバーが多かったり、外部サービスの token を要求したり、 token が設定ファイルにベタ書きで保存されたり、などのセキュリティ的な懸念事項が結構あります。(ブラウザ拡張などで一般的に注意するのと同じように) 注意したほうが良いでしょう。

黎明期の技術というのもあり、配布されている MCP サーバーを使うのに懸念があれば、いっそのこと自分で使ってみるのもありだと思います。
MCP サーバーを作成する手間は、既存のライブラリを活用すると案外低いです。 (手前味噌ですが、 Ruby を使って実装する例として、以下の記事が参考になると思います。)

ドキュメントの URL を渡す

Cline は URL を渡すと、実際にブラウザを開いて読んでくれます。
比較的新しいライブラリ (例: React Router v7) などを扱う際には、LLM 内の知識として入っていないことがあるので、URL を渡して読んでもらうとよいです。

ただ、Claude などだと、 computer use という機能を使ってドキュメントを読むのですが、ブラウザを開く → 画像をテキストに変換して解釈、という工程を取るためそこそこ料金がかかります。

なので、

markdownify などで markdown 化するか、そういった機能を持った MCP サーバー等を使う
- mastra など、ごく一部のライブラリは、自身のドキュメントを MCP サーバー化してるので、そういうの使うのもあり
一度ドキュメント化して、リポジトリに追加しておく

などするのが料金節約的におすすめです。