USB Type C ケーブル 【3本セット 1m/1m/2m】3A 急速充電 cタイプ QuickCharge3.0対応 高速データ転送 高耐久ナイロン素材 Samsung Galaxy S10 / Note / Huawei P30 / P20 lite / Sony Xperia XZ2 / XZ3 / Nintendo Switch / GoPro Hero 5/6 その他Android USB-C機器対応
￥615 (2025年4月27日 13:11 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
Vibe Coding とはなんでしょうか？
はじめに提唱した Andrej Karpathy 氏はこう言っています。
参考程度に意訳をば。
私が Vibe Coding と呼んでいる新しいコーディングスタイルがあります。それは完全にバイブに身を任せ、指数関数的な変化を受け入れ、コードが存在することさえ忘れてしまうものです。これが可能なのは、LLM（例えば Sonnet を使った Cursor Composer）があまりにも優秀になっているからです。また、私は SuperWhisper を使って Composer と会話するだけなので、キーボードにほとんど触れません。「サイドバーのパディングを半分に減らして」のような、面倒くさくて自分で調べることが億劫な些細な修正をお願いします。常に Accept All を選び、差分は読みません。エラーが出たら、単にエラーのみをコピペするだけで、たいていは解決します。コードは私の通常の理解を超えて成長し、しっかり読み込むには時間がかかるでしょう。時々 LLM がバグを修正できないので、回避策を考えるか、ランダムな変更を依頼してバグが消えるまで試します。週末の使い捨てプロジェクトにはそれほど悪くありませんが、それでもかなり面白いです。プロジェクトやウェブアプリを構築していますが、それは本当のコーディングではありません。ただ物事を見て、言って、実行して、コピペするだけで、ほとんどうまくいきます。
日本時間で 2025 年 2 月 3 日に公開されたこのポストは世界的に注目を浴びました。ちょうど Cursor や Cline のユーザ数が飛躍的に伸びていたタイミングで波に乗ったこともあり、AI 界隈では大きなブームを巻き起こしました。
また、Python のウェブフレームワーク Django の開発などで有名な Simon Willison 氏も Vibe Coding についてどう向き合うべきかなどの記事を書かれています。
Vibe Coding は LLM の助けを借りてコードを書くことではない
私が Vibe Coding と言うとき、それは LLM が書いたコードをレビューせずにソフトウェアを構築することを意味します。
LLM があなたのためにコードを書き、あなたがそれをレビューし、徹底的にテストし、それがどのように機能するかを他の人に説明できることを確認したなら、それは Vibe Coding ではなく、ソフトウェア開発です。
ソフトウェア開発者への最大の障壁のひとつは、非常に急な初期の学習曲線です。Vibe Coding はその初期の障壁をほぼ平らにまで削ります。
UCSD の准教授 Philip J. Guo 氏の記事では下記のような記述が見られます。
Vibe Coding – 何がほしいかを伝え、AI がコードを生成し、各行を精査せず実行、生成されたコードの全体的な Vibe（雰囲気）を信頼する
Vibe Coding の魅力のひとつは、異なるアプローチを比較するリサーチフェーズをスキップすることにあります。
「バイブする」ことの大きな喜びの一つは、創造的な個人規模のプロトタイプや趣味的なプロジェクトを始めるための活性化エネルギーを大幅に下げることです。
さらに、この夏オライリーから Vibe Coding に関する本が出版されます。著者は Google Chrome の開発者、Addy Osmani 氏。Andrej Karpathy 氏の発言から二ヶ月強で出版の発表というタイムスケジュールで、注目度の高さが伺えます。
また、Addy Osmani 氏は Vibe Coding の日常化によるコーディングスキルの低下についても警笛を鳴らしています。
今回の記事は「Vibe Coding で遊ぼう」ですので、Vibe Coding についての解説は先日の私の登壇資料をご覧ください。どういうモデルを使えば良いのか？どういった時に Vibe Coding は使えるかについてもまとめています。
Vibe Coding 向きのツールは何か？
思いつくものとしては下記の候補が挙げられます。エディタであったり、拡張機能であったり、サービスであったりしますが、細かいことは置いておいて。
宗派はいろいろとありますが、Vibe Coding 用途として個人的なおすすめは Anthropic の Claude Code と OpenAI の Codex CLI です。これらのセットアップとどう使うかについて解説をしていきます。
Claude Code のセットアップをしよう
Claude Code についてのドキュメントは 2025 年 4 月 26 日現在、たったの三ページしかありません。うちひとつはトラブルシューティングなので、使う前にひと通り読んでおくと良いでしょう。
インストールは簡単です。Node 18 以上の環境で下記を実行するだけです。
npm install -g @anthropic-ai/claude-code
インストールが完了したら、claude コマンドを実行できるか確認してください。
では作業ディレクトリに移っていただいて、claude コマンドを実行してみましょう。
mkdir workspace
cd workspace
claude
ポチポチと進めていけば OK です。途中で Anthropic のアカウントにログインする必要がありますので、その時はブラウザで操作をしてください。
完了するとプロンプト入力画面が表示されますので「こんにちは」とでも入力してみましょう。
Happy Vibe Coding!
Codex CLI のセットアップをしよう
OpenAI の Codex CLI も同様にインストールしましょう。
インストールが完了したら、codex コマンドを実行できるか確認してください。
API Key を指定しましょう。ただし、コマンドが履歴に残ってしまったり、これはあまり良くないやり方ですので、将来の OpenAI の対応を待ちましょう。.env で渡すことも可能です。
export OPENAI_API_KEY="your-api-key-here"
作業ディレクトリに移っていただいて、codex コマンドを実行してみましょう。
こちらもプロンプト入力画面が表示されますので「こんにちは」とでも入力しておきましょう。
ここまでで、Claude Code と Codex CLI のセットアップが完了しました。
ここからは発展的な内容（と言いつつ大事だったり）
どちらも隔離されていない環境での実行は正直お勧めできません。コンテナを使いましょう。そんな話や、MCP をどうやって使うかについて解説をします。
Claude Code をコンテナの中で使えるようにしよう
Claude Code のリポジトリの中に devcontainer が用意されていますので、こちらを用いて Claude Code を動かしていきましょう。
まずは Docker を立ち上げます。
devcontainer cli をインストールしましょう。
npm install -g @devcontainers/cli
リポジトリをクローンします。
git clone https://github.com/anthropics/claude-code.git
cd claude-code
devcontainer を立ち上げます。
devcontainer up --workspace-folder .
コンテナの中に入ります。
devcontainer exec --workspace-folder . -- zsh
Claude コマンドが使えることを確認します。
私の環境では下記のエラーが出ましたが、.devcontainer の中を変えると厄介なので迂回経路で解決します。
node:internal/modules/esm/resolve:873
throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find 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
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 をコンテナに入ってからインストールしてください。
npm install -g @anthropic-ai/claude-code
Claude Code のバージョンが表示されていたら OK です。あとは先ほどの手順に従ってセットアップを完了してください。
Codex CLI をコンテナの中で使えるようにしよう
git clone https://github.com/openai/codex.git
cd codex
ビルドに pnpm が必要なので Homebrew 経由でインストールします。Volta などでも構いません。
ビルドを実行します。
./codex-cli/scripts/build_container.sh
コンテナを立ち上げ、その中で Codex CLI を開きます。現状引数にプロンプトを指定することが必須となっているので空文字を渡してあげます。
./codex-cli/scripts/run_in_container.sh --work_dir . ""
Codex CLI のプロンプト入力画面が表示されたら OK です。
Claude Code の使い方
基本的にはこのふたつのページを見ておけば十分です。いくつか使うであろう内容をまとめます。
メモリを保存するディレクトリをどこにするか
公式ドキュメントの表を日本語に翻訳すると下記の通り。
| Memory Type | ディレクトリ | 目的 | ユースケース例 |
|---|---|---|---|
| プロジェクトメモリ | ./CLAUDE.md |
開発チーム間で共有する規約とナレッジ | プロジェクト構造、コーディング規約、共通ワークフロー |
| プロジェクトメモリ（ローカル） | ./CLAUDE.local.md |
個人のプロジェクト固有の設定 | サンドボックスURL、よく使うテストデータ |
| ユーザメモリ | ~/.claude/CLAUDE.md |
グローバルな個人設定 | コードスタイル設定、個人的なツールショートカット |
基本的な流れとしては、まずはユーザメモリを作成し、汎用的な指示を書きます。例えば「応答は自然な日本語で出力しなさい。」など。
mkdir ~/.claude
touch ~/.claude/CLAUDE.md
次にプロジェクトメモリを作成、技術スタックなどに応じた指示を書きます。例えば「Python のパッケージマネージャは uv を使いなさい。」など。
cd ./current_project
touch ./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 --help
Usage: claude mcp [options] [command]
Configure and manage MCP servers
Options:
-h, --help display help for command
Commands:
serve Start the Claude Code MCP server
add [options] [name] [commandOrUrl] [args...] Add a server (run without arguments for 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 project
help [command] display help for command
既に追加された MCP は claude mcp list で確認できます。追加するには claude mcp add コマンドを使います。
Codex CLI の使い方
OpenAI の Codex CLI のプロンプティングガイドが公開されていますので、目を通しておくと良いでしょう。
終わりに
Vibe Coding は使える場面が限られているものの、学習用途や個人開発、小規模開発にはとても使いやすいかと思います。
Happy Vibe Coding!
【Amazon.co.jp限定】USBメモリ 1TB 大容量 USB3.0・Type-C 高速データ転送 メモリー フラッシュメモリ 外付け 容量不足解消 スマホ用可能 Mac Windows PC Pad対応 360度回転 合金製 耐衝撃 防塵仕様 バックアップ タイプC USBメモリー 携帯便利 コンパクト
￥2,999 (2025年4月27日 13:05 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【Fire HD 10 第13世代用】保護フィルム ガラスタイプ 光沢 ブルーライトカット 気泡レス加工 1枚入り
￥2,480 (2025年4月27日 13:11 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
