🔥

Vibe Coding で遊ぼう

2025/04/26に公開

Model Context Protocol

Vibe Coding とはなんでしょうか？

はじめに提唱した Andrej Karpathy 氏はこう言っています。

https://x.com/karpathy/status/1886192184808149383

参考程度に意訳をば。

私が Vibe Coding と呼んでいる新しいコーディングスタイルがあります。それは完全にバイブに身を任せ、指数関数的な変化を受け入れ、コードが存在することさえ忘れてしまうものです。これが可能なのは、LLM（例えば Sonnet を使った Cursor Composer）があまりにも優秀になっているからです。また、私は SuperWhisper を使って Composer と会話するだけなので、キーボードにほとんど触れません。「サイドバーのパディングを半分に減らして」のような、面倒くさくて自分で調べることが億劫な些細な修正をお願いします。常に Accept All を選び、差分は読みません。エラーが出たら、単にエラーのみをコピペするだけで、たいていは解決します。コードは私の通常の理解を超えて成長し、しっかり読み込むには時間がかかるでしょう。時々 LLM がバグを修正できないので、回避策を考えるか、ランダムな変更を依頼してバグが消えるまで試します。週末の使い捨てプロジェクトにはそれほど悪くありませんが、それでもかなり面白いです。プロジェクトやウェブアプリを構築していますが、それは本当のコーディングではありません。ただ物事を見て、言って、実行して、コピペするだけで、ほとんどうまくいきます。

日本時間で 2025 年 2 月 3 日に公開されたこのポストは世界的に注目を浴びました。ちょうど Cursor や Cline のユーザ数が飛躍的に伸びていたタイミングで波に乗ったこともあり、AI 界隈では大きなブームを巻き起こしました。

また、Python のウェブフレームワーク Django の開発などで有名な Simon Willison 氏も Vibe Coding についてどう向き合うべきかなどの記事を書かれています。

https://simonwillison.net/2025/Mar/19/vibe-coding/

Vibe Coding は LLM の助けを借りてコードを書くことではない

私が Vibe Coding と言うとき、それは LLM が書いたコードをレビューせずにソフトウェアを構築することを意味します。

LLM があなたのためにコードを書き、あなたがそれをレビューし、徹底的にテストし、それがどのように機能するかを他の人に説明できることを確認したなら、それは Vibe Coding ではなく、ソフトウェア開発です。

ソフトウェア開発者への最大の障壁のひとつは、非常に急な初期の学習曲線です。Vibe Coding はその初期の障壁をほぼ平らにまで削ります。

UCSD の准教授 Philip J. Guo 氏の記事では下記のような記述が見られます。

Vibe Coding - 何がほしいかを伝え、AI がコードを生成し、各行を精査せず実行、生成されたコードの全体的な Vibe（雰囲気）を信頼する

Vibe Coding の魅力のひとつは、異なるアプローチを比較するリサーチフェーズをスキップすることにあります。

「バイブする」ことの大きな喜びの一つは、創造的な個人規模のプロトタイプや趣味的なプロジェクトを始めるための活性化エネルギーを大幅に下げることです。

https://www.oreilly.com/radar/vibe-coding-vibe-checking-and-vibe-blogging/

さらに、この夏オライリーから Vibe Coding に関する本が出版されます。著者は Google Chrome の開発者、Addy Osmani 氏。Andrej Karpathy 氏の発言から二ヶ月強で出版の発表というタイムスケジュールで、注目度の高さが伺えます。

https://www.oreilly.com/library/view/vibe-coding-the/9798341634749/

また、Addy Osmani 氏は Vibe Coding の日常化によるコーディングスキルの低下についても警笛を鳴らしています。

https://x.com/schroneko/status/1915690568652661089

今回の記事は「Vibe Coding で遊ぼう」ですので、Vibe Coding についての解説は先日の私の登壇資料をご覧ください。どういうモデルを使えば良いのか？どういった時に Vibe Coding は使えるかについてもまとめています。

https://speakerdeck.com/schroneko/vibe-coding-nohua-wosiyou

Vibe Coding 向きのツールは何か？

思いつくものとしては下記の候補が挙げられます。エディタであったり、拡張機能であったり、サービスであったりしますが、細かいことは置いておいて。

宗派はいろいろとありますが、Vibe Coding 用途として個人的なおすすめは Anthropic の Claude Code と OpenAI の Codex CLI です。これらのセットアップとどう使うかについて解説をしていきます。

Claude Code のセットアップをしよう

https://docs.anthropic.com/ja/docs/agents-and-tools/claude-code/overview

Claude Code についてのドキュメントは 2025 年 4 月 26 日現在、たったの三ページしかありません。うちひとつはトラブルシューティングなので、使う前にひと通り読んでおくと良いでしょう。

インストールは簡単です。Node 18 以上の環境で下記を実行するだけです。

npminstall-g @anthropic-ai/claude-code

インストールが完了したら、claude コマンドを実行できるか確認してください。

claude--version

では作業ディレクトリに移っていただいて、claude コマンドを実行してみましょう。

mkdir workspacecd workspaceclaude

ポチポチと進めていけば OK です。途中で Anthropic のアカウントにログインする必要がありますので、その時はブラウザで操作をしてください。

完了するとプロンプト入力画面が表示されますので「こんにちは」とでも入力してみましょう。

Happy Vibe Coding!

Codex CLI のセットアップをしよう

https://github.com/openai/codex

OpenAI の Codex CLI も同様にインストールしましょう。

npm i-g @openai/codex

インストールが完了したら、codex コマンドを実行できるか確認してください。

codex--version

API Key を指定しましょう。ただし、コマンドが履歴に残ってしまったり、これはあまり良くないやり方ですので、将来の OpenAI の対応を待ちましょう。.env で渡すことも可能です。

exportOPENAI_API_KEY="your-api-key-here"

作業ディレクトリに移っていただいて、codex コマンドを実行してみましょう。

cd workspacecodex

こちらもプロンプト入力画面が表示されますので「こんにちは」とでも入力しておきましょう。

ここまでで、Claude Code と Codex CLI のセットアップが完了しました。

ここからは発展的な内容（と言いつつ大事だったり）

どちらも隔離されていない環境での実行は正直お勧めできません。コンテナを使いましょう。そんな話や、MCP をどうやって使うかについて解説をします。

Claude Code をコンテナの中で使えるようにしよう

https://github.com/anthropics/claude-code

Claude Code のリポジトリの中に devcontainer が用意されていますので、こちらを用いて Claude Code を動かしていきましょう。

まずは Docker を立ち上げます。

open-a Docker

devcontainer cli をインストールしましょう。

npminstall-g @devcontainers/cli

リポジトリをクローンします。

git clone https://github.com/anthropics/claude-code.gitcd claude-code

devcontainer を立ち上げます。

devcontainer up --workspace-folder.

コンテナの中に入ります。

devcontainerexec --workspace-folder. --zsh

Claude コマンドが使えることを確認します。

claude--version

私の環境では下記のエラーが出ましたが、.devcontainer の中を変えると厄介なので迂回経路で解決します。

node:internal/modules/esm/resolve:873  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);        ^Error[ERR_MODULE_NOT_FOUND]: Cannotfind package'better-sqlite3' imported from /usr/local/share/npm-global/lib/node_modules/@anthropic-ai/claude-code/cli.js    at packageResolve(node:internal/modules/esm/resolve:873:9)    at moduleResolve(node:internal/modules/esm/resolve:946:18)    at defaultResolve(node:internal/modules/esm/resolve:1188:11)    at ModuleLoader.defaultResolve(node:internal/modules/esm/loader:642:12)    at#cachedDefaultResolve (node:internal/modules/esm/loader:591:25)    at ModuleLoader.resolve(node:internal/modules/esm/loader:574:38)    at ModuleLoader.getModuleJobForImport(node:internal/modules/esm/loader:236:38)    at ModuleJob._link(node:internal/modules/esm/module_job:130:49){  code:'ERR_MODULE_NOT_FOUND'}

Claude Code をコンテナに入ってからインストールしてください。

npminstall-g @anthropic-ai/claude-code

Claude Code のバージョンが表示されていたら OK です。あとは先ほどの手順に従ってセットアップを完了してください。

claude--version

Codex CLI をコンテナの中で使えるようにしよう

git clone https://github.com/openai/codex.gitcd codex

ビルドに pnpm が必要なので Homebrew 経由でインストールします。Volta などでも構いません。

brewinstallpnpm

ビルドを実行します。

./codex-cli/scripts/build_container.sh

コンテナを立ち上げ、その中で Codex CLI を開きます。現状引数にプロンプトを指定することが必須となっているので空文字を渡してあげます。

./codex-cli/scripts/run_in_container.sh--work_dir.""

Codex CLI のプロンプト入力画面が表示されたら OK です。

Claude Code の使い方

https://docs.anthropic.com/ja/docs/agents-and-tools/claude-code/overview

https://www.anthropic.com/engineering/claude-code-best-practices

基本的にはこのふたつのページを見ておけば十分です。いくつか使うであろう内容をまとめます。

メモリを保存するディレクトリをどこにするか

https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview#determine-memory-type
公式ドキュメントの表を日本語に翻訳すると下記の通り。

Memory Type	ディレクトリ	目的	ユースケース例
プロジェクトメモリ	`./CLAUDE.md`	開発チーム間で共有する規約とナレッジ	プロジェクト構造、コーディング規約、共通ワークフロー
プロジェクトメモリ（ローカル）	`./CLAUDE.local.md`	個人のプロジェクト固有の設定	サンドボックスURL、よく使うテストデータ
ユーザメモリ	`~/.claude/CLAUDE.md`	グローバルな個人設定	コードスタイル設定、個人的なツールショートカット

基本的な流れとしては、まずはユーザメモリを作成し、汎用的な指示を書きます。例えば「応答は自然な日本語で出力しなさい。」など。

mkdir ~/.claudetouch ~/.claude/CLAUDE.md

次にプロジェクトメモリを作成、技術スタックなどに応じた指示を書きます。例えば「Python のパッケージマネージャは uv を使いなさい。」など。

cd ./current_projecttouch ./CLAUDE.md

Vibe Coding 用途では主にこのくらいですが、チーム開発でも使いたい場合は個人の書き方の好みは./CLAUDE.md ではなく./CLAUDE.local.md の方に書くと良いでしょう。

Claude Code で MCP を使う

Claude Desktop から Claude Code を使う、つまり MCP サーバとして使えることは多くの方がご存知かと思いますが、Claude Code を MCP クライアントとして使えることはあまり知られていません。

いちばん簡単なものが Claude Desktop からインポートする方法で、他にもclaude コマンドを使う方法があります。

Claude Desktop からインポートする

既に Claude Desktop でいろいろと MCP を使っているよという方。めちゃくちゃ簡単です。下記のコマンドを実行し、必要な MCP をインポートしてください。スペースキーを押すとチェックのつけ外しができますので、必要なものを選択して、エンターキーを押してください。

claude mcp add-from-claude-desktop

`claude` コマンドを使って MCP を使う

ヘルプコマンドを見てみましょう。

❯ claude mcp--helpUsage: claude mcp[options][command]Configure and manage MCP serversOptions:  -h,--help                                     displayhelpforcommandCommands:  serve                                          Start the Claude Code MCP serveradd[options][name][commandOrUrl][args...]  Add a server(run without argumentsfor interactive wizard)  remove[options]<name>                        Remove an MCP server  list                                           List configured MCP servers  get<name>                                     Get details about an MCP server  add-json[options]<name><json>               Add an MCP server(stdio or SSE) with a JSON string  add-from-claude-desktop[options]              Import MCP servers from Claude Desktop(Mac and WSL only)  reset-project-choices                          Reset all approved and rejected project-scoped(.mcp.json) servers within this projecthelp[command]                                 displayhelpforcommand