2025-12-29
フルVibe Codingでも仕事が進むようになってきた2025年 ... users
Zenn mirror original article
（フルVibe Codingできたとは言ってない）
ご無沙汰しております。
今年の後半から大学の講師(情報学部)もするようになって、すっかり時間がなくなっていたkazuphです。
基本的にすべての仕事が副業みたいになった昨今、細切れの中でなんとしても進捗を出す必要があり模索してきました。私は15年程度エンジニアをやっていますが、Claudeの性能が上がってからはコードを読むのをほぼやめています（自分が得意で好きな部分だけ見ますが）。
特に今年傾倒したのがPlanモードや仕様駆動開発（SDD）です。
Claude CodeのAgentに対応したSDDは神がかっており、こっちは要件を言うだけでどんどん別のagentがフェーズごとに立ち上がってアウトプットを出してくれます。Agentの文言を改変して、作成した仕様やtasks等を実行する前に自動でCodexにレビューさせたりすると更に威力が高まります。
そんなこんなで、1タスクに対して1,2日ほど「続けておじさん」をやっているとお望みの機能が完成しているという寸法です。そうやって並行してタスクを進めていたところ、小さくタスクでは気になりませんでしたが、特に大きな依頼をしてしまった場合に以下の問題が発生することがわかりました。
- Claude Codeが今現在やっているタスクがいつの間にか完全に依頼内容から逸脱したyak shavingとなっており、タスクの完了が見えなくなっている（のにCodexのレビューでは点数が低くそれをまだ実行すると半日動き続けるが出口がない）
- 2日後に細部を確認するとほぼモックとなり見た目だけ綺麗なハリボテサイトが完成している
- 無駄なテストに溢れかえっており、その後をそのまま引き継ぐとかなり大きな負債となる予感がある
そこで気づきました。あ、これは人類の進化に貢献していないばかりか、地球規模の環境破壊に単に加担している状態であり、フードロスならぬトークンロスを大量に行う下劣な行為であると。
何が問題だったのか？
色々挙げます。
Claudeのモデルの性能問題
モデルが解決できない問題に遭遇すると以下のようなことがおきます。
- （特にOpus 4.5より前の話だと）Claudeでは解決できない実装上の問題が数多く存在しており、こちらからすれば大丈夫だと思うような場面ですらかなり躓くことが多かった
- 躓くと代案で勝手に実装を進めるが、その代案は多くの場合は簡略化・アンセキュア化・モック化・紙芝居化だったりするので、その実装が増え許されることで以後の実装も歪んでいく
- 以上の状況でこちらも"ノールックVibe Coding"をしている場合に「ゴミ」が生み出される
タスクの完了=実装完了だと思っている
大前提、Claudeが特にそうですが「実装は私（Claude）、確認は人間」だと思っていることが多いです。これは、CLAUDE.mdにそうじゃないと書いても同じセッションを使い続けるコーディングを続けるといつでもそうなります。MCPでPlaywrightやChrome Devtoolsを使えるようにしていてもどこかで忘れます。
そうなると「確認するべき人間は放置気味だし、今の（モックな）実装で許されているということだから、次のTODOもその感じで進めるか」となるので、例えば10個Todoがあれば10個ゴミができあがります。
もちろん適切にvalidateが行われればいいですが、特にAgentを使ったSDDの場合に評価が曖昧になります。
tmux等で他に立ち上げたコンテクストを共有してないClaudeやCodexにレビューさせればまだ良いですが、そうじゃない場合にやはり厳しい評価をもらおうがなんだろうが「でも、ここまで許されているから問題ないよね」となり改善されません。
問題を問題だと認識できない
そもそもですが、人間が問題だと思ったことをLLMは問題だと思わないことが多いです。
例えばUIに戻るボタンがなくても、AIは直接URLを指定して元のページに戻れるので、ボタン系の問題に気づきにくいです。
それ以外にも、要件の実装は存在していてユニットテストもあるのだから問題ないだろってことが多いです。UI上には全くボタンもなければ、その機能を使うための画面すらなくてもAIは実装さえ存在していれば「AI自身が実行できる」ことになるので問題とは全く感じなくなります。
放っておくとユニットテストでだけ確認してあってTodoが完了になって次に進んでいきます。
そのテストがモックやスタブであってもTodoに✅️が付きます。Todoが全部終わったと報告されたのでローカルサーバーで確認するとそもそもDB構築もSchemaの流し込みもしてなかったなんてことも平気でおきます。
レビューエージェントが仕事を増やす仕事をする
これが自分に取ってはもっとも厄介でした。
特にCodexくんにレビューさせていたのですが…あ、これはこの記事ではやめておきましょう。
まだまだありますが、一旦ここでやめます。
じゃあどうすればよいのか
ここからが、この記事の本番です。
問題を解決するためにやったことです。
【初手最終奥義】AIの最終成果物を動画であると明示する
ここだけ実践してもらって帰って試してもらっていい内容です。
残念ながらWebアプリ限定ですが、以下のプロンプトを試してみてください。
◯◯の機能を実装してください。必ずその機能を確認するE2Eテストも同時に実装し各ページでスクショの撮影と機能全体のフローを確認できる動画を撮影して撮影後にその動画を開いてください。E2Eテストではgotoは最初の/へのアクセスのみ許容され、必ずsign upから始めてボタン押下で遷移していき該当箇所のテストを行う実装にしてください。E2Eの最初の処理でデータはクリアし、レコードが正しく変化することをUIでの操作後にassertしてください。
追加でsign up等でメール送信が伴う場合は以下のプロンプトも追加です。
メール送信もモック化せず、mailpitを起動して実際にローカル上でメール送信されるようにしてください。認証のためのコードやURLの取得もmailpitのAPIを使ってE2Eのコード内で取得してください。本番コード内部で裏口実装をすることは禁止です。
これだけです。これの何が嬉しいのか？は以下です。
- AIからするとほぼすべてのモック実装が封印される
- データ処理・メール送信処理だけモック・スタブ・ハードコード・ショートカット・バイパスなどするという技も禁止されていると認識する
- UIとして実動することが強制される
- スクショや動画によって視覚的にテストされることも前提と認識する
- 途中でショートカットやハードコードしたとしても、最後にデータチェックで炙り出されてしまうので無駄だと認識する
- 実装だけして完了とし、確認は人間にやってもらうという奢りが封じられる
つまり、AIの得意技を全部封印します。通常CLAUDE.mdやhooks等を使ってこれまではあの手この手で禁止してきたわけですが、どうしても無視や抜け道をゼロにはできないので、矯正できませんでした。上記プロンプトはそれをまとめて封印します。もちろん平気でやぶってくることもありますが、ほとんど守ってくれます。少なくとも守ってないと思った時に、同じプロンプトを投げると「あぁ、そうでしたね…やります」と言ってすぐ動画を撮影してくれます。
さらに嬉しいこともあります。
- タスク依頼後に人間は他の作業に没頭できる（タスク完了時にフォアグラウンドで動画が起動するので）
- 自然と実装に関してのエビデンスが作成される（例えばそのままSlackやgithub等に添付できる）
このようにメリットが多い手法です。
拙著reviwを導入する
ここからは80点を95点くらいにあげるためのフローです。
そのためにツールを開発しています。
※あえてreviewじゃなくてreviwにしてます
導入は簡単です。Claude Code限定ですが、Pluginを使います。
/plugin marketplace add kazuph/reviw
/plugin install reviw-plugin@kazuph/reviw
これだけです。TUI的な方法でもいけます。
/plugin
| 1. Marketplace追加 | 2. kazuph/reviw入力 |
|---|---|
 |
 |
| 3. マーケットプレイス追加完了 | 4. reviw-pluginインストール |
 |
 |
一度Claude Codeを再起動すると以下一式が使えるようになります。
plugin/
├── .claude-plugin/
│ └── plugin.json # プラグインメタデータ（名前、バージョン、説明）
├── commands/
│ ├── do.md # /reviw-plugin:doコマンド定義
│ └── done.md # /reviw-plugin:doneコマンド定義
├── agents/
│ └── report-builder.md # レポート生成エージェント
├── skills/
│ ├── artifact-proof/
│ │ └── SKILL.md # エビデンス収集スキル
│ └── webapp-testing/
│ ├── SKILL.md # Webテストスキル
│ ├── scripts/ # ヘルパースクリプト
│ └── examples/ # 使用例
├── hooks/
│ └── hooks.json # フック定義
├── hooks-handlers/
│ └── completion-checklist.sh # UserPromptSubmitハンドラ
└── README.md
覚えるのは最低限1つ、多くて2つのコマンドだけです。
- [必須]doneコマンド
- /reviw-plugin:done
- AIが「完了しました！」と実装だけして報告してきた場合にゼロタイム打ち込むコマンドです。これにより先程の動画プロンプトを注入します。すると「やべぇ、こいつは騙せねぇ」となり突然慌ただしく成果物の準備を始めます。待っていると動画が立ち上がると思うので、それ見てレビューできるのですが、そこで拙著のreviwによって報告書レビューモードになります。
- [推奨・好み]doコマンド
- /reviw-plugin:do <タスクの説明・仕様>
- worktreeの利用や最終的に成果物チェックがあることを注入します。これによって初回実装後だとしても実装だけして「完了しました！」と言ってくる確率は下がりますが絶対ではないので、/doneと併用することになると思います。
あとのskillやagentはコマンドを使っていれば勝手に内部で利用してくれるものなので、気にしなくていいです。
更にhookも自動で導入され、会話の完了時にAIに以下の脅迫メッセージを挿入してくれます（ユーザーからは見えません）。
[reviw-plugin] セッション開始 & タスク再開ガイド
【タスク再開】セッション開始時またはcompact後、以下を確認してください：
→ git worktree listでアクティブなworktreeを確認
→ 現在の計画と進捗は .worktree/<feature>/.artifacts/<feature>/REPORT.md にあります
→ REPORT.md内のTODOを確認し、未完了項目から再開
【レポートの場所】
.worktree/<feature>/.artifacts/<feature>/REPORT.md
※ <feature> = ブランチ名（例：feature/auth → auth）
【完了基準】実装だけでは1/3。以下を確認せよ：
□ 実装完了（1/3）
→ ビルドは成功したか？（npm run build / pnpm build）
→ 型エラー・lintエラーはないか？
□ 動作検証完了（2/3）
→ 開発サーバーを起動して実際に動かしたか？
→ webapp-testingスキルで検証したか？
□ レビュー完了（3/3）
→ .artifacts/<feature>/にエビデンス（スクショ・動画）はあるか？
→ artifact-proofスキルで報告書を作成したか？
→ /reviw-plugin:doneコマンドを実行したか？
→ reviwをフォアグラウンド起動してレビューを受けたか？
→ ユーザーから承認を得たか？
【禁止事項】
✗ 「実装しました！」だけの報告
✗ 動作確認なしの完了宣言
✗ 証拠なしの「動きました」報告
✗ reviwでのレビュー前にコミット・プッシュ
【もし上記が未完了なら】
→ 完了報告ではなく、次に何をすべきか伝えること
→ /reviw-plugin:doneコマンドを実行してレビューフローに進むこと
内部的には、報告書を書き上げたあとに npx reviw コマンドを使ってそのマークダウンをブラウザでレビューできるように起動します。
そして、ブラウザ上で行選択などしてコマンドを記入し、最後にsubmitを行うと、それが標準出力によってそのままClaude Codeに伝わり、再度レビュー内容の改善のために修正作業を行ってくれるというものです。
以上によって、動画だけでなく、動画や各画面のスクショを撮影して添付した報告書のレビューをするだけでAIを望む方向に導くことができます。
実際に作成される報告書
ということで、実際に使ってできた報告書の一部が以下です。
サンプルとしておもむろに開発を始めたVibestarというCloudflare系で動作するRAGチャットシステムです。
本当はignoreするものなのですが、一部の報告書だけgit add -fしてpushして置きました。
RAGの証拠として、最初はRAGなしでgpt-ossとチャットを行い、その後ドキュメントを登録し、出力内容が変化することを確認しています。
この実装ですが、私自身は一度もブラウザで確認せず、CloudflareのWorkers AIによるチャットの実装とRAGの実装ができているところの実装完了まで行きました。
注意点としては、動画やスクショだけを見てAIの無意識の嘘を見抜く必要が人間側にはあります。
- 動画のページ遷移に違和感（例: 内部的にgoto("URL")をしており必要な処理してないのに次の画面に遷移した紙芝居の可能性）
- 毎回同じコードで認証している（プロダクションコードでもE2Eテストでもハードコードしている可能性）
- 登録成功！と表示されているが一覧表示でアイテムが増えていない、もしくはなぜか一覧表示に戻る前に動画が終わっている（データの登録が必要だと思っていない）
- ログイン画面でメールアドレスが入力されたがローディングなしですぐにログイン画面に遷移した
- 登録された名前がその後の処理で使われていない
- Sign Up時にプロフ画像登録はしてないはずだが、その後の一覧ではアイコン設定済み
- メール送信した内容を使わないと次に進めないはずなのになぜか遷移できた（内部でmailpitを使っている可能性はありますが、コードを絶対に見たくない場合は、mailpitのUI画面自体を動画に含めるように要求できます）
- ...
また、不安な場合は、指示文に headedで実行してと言えば、ブラウザが実際に動作する様子も見れますし、データが追加されたという報告書になっているなら、「はい、じゃあ実際にそうなっているか直接DBをクエリしてログを出力して」と言えば確認できます（コードは見てない）。
以上のように、AIが成果です！と言って出してきたものに、プロダクトオーナー目線・ユーザー目線で「おかしくない？？」を提示しまくります。
そしてその時に活躍するのが、reviwの機能です。
npx reviw <報告書>.mdでプレビューとコードが左右に表示される
動画のリンクを押すとそのまま再生できる
選択部分に対してコメントできる
このような機能がありますが、行ごとにコメントしたあとに最後にSubmitすると自動で閉じて、それがyaml構造として標準出力されるので、Claude Codeがそれを受け取って修正してくれます。
つまり、ここまで来ると立ち上がったブラウザ上でClaude Codeと対話している状態になるので、あとは、ブラウザが立ち上がるたびにレビューして閉じるだけで裏でClaude Codeが作業する状態になります。作業後に再度修正済みの報告書をブラウザで立ち上げてくれるので、それまでは違う作業をしていて大丈夫です。
Vibe性がとても高まります。
あとは地味ですが、巨大なMermaidがあらゆるツールで見づらい問題もこのreviwが解決しています。
巨大なMermaidをMap付きで拡大縮小できる
最初元々存在していたコードのdiffをこのような感じでブラウザで見れるツールが組み込めるかなと思ったのですが、「diffってコードだよね？じゃあVibe Codingツールじゃないので自作するしかないか」という感じで自作しました。
個人的にはかなり気に入って来ましたが、まだまだ鋭意改善中です。
その他
最近Claude Codeのコンパクトまでのターンが減っている気がしたので、reviwでコメントした内容をすぐ忘れるという事態がありましたが、claude-memがある場合はそんなことなくなっている気がします。
ただし、内部的にはhaikuを使っているのですが、それでも数時間でリミットが来たので、並列開発している人には向かないかもです。
一応それを補うために、PLAN.md的な手法もreviw-pluginに入れています。
まとめ
とりあえずSDDやってあまりうまく行かなかったかたは、
/plugin marketplace add kazuph/reviw
/plugin install reviw-plugin@kazuph/reviw
をやってみて欲しいです。
reviwは0.1.0からバージョンアップを重ねて現在0.13.20.15.1(記事がバズり始めて急いで更新している)です。
まだまだ機能改善すると思いますが、主要機能は揃ったと思うので公開します。
もちろんミニマムには単に動画プロンプトを使うでも構わないと思います。
E2Eの結果を動画で見るの気持ちいいですよ。
フルVibe Codingしたいみなさんの参考になれば幸いです。
この記事に至る関連ツイート