バイブコーディングは素晴らしい――でも限界がある。その解決策がこちら

ソフトウェア開発・プログラミング
この記事は約7分で読めます。

この動画では、小規模アプリ開発で効果的なバイブコーディングが持つ課題を解決するスペック駆動開発について解説している。詳細な製品要件書(PRD)から始めて、タスクリストを作成し、エージェントに段階的な実装を行わせる手法を、プライベート文字起こしアプリの構築を通じて実演する。また、augment codeというエージェンティックコーディングシステムを使用して、CLI版からGUI版への発展まで実際の開発プロセスを紹介している。

Vibe Coding Is Great — Until It Isn’t. Here’s the Fix
Try Augment Code with Tasklist: of “vibe coding” that feels magical—right up to the moment everything breaks? In this vi...

バイブコーディングの限界とスペック駆動開発の紹介

おかえりなさい。今日はバイブコーディングについて話していくで。これ、小さなアプリを作るときはめっちゃええんやけど、限界もあるんや。

時々エージェントがループにハマってしまうことがあるねん。同じ機能やコードを何度も何度も実装しようとしたり、こっちの指示を無視し始めたりするんや。

そこで、バイブコーディングの大人版とも言えるのがスペック駆動開発やねん。心配せんでええよ、LLMはほぼ全ての作業で使うからな。

この手法のアイデアは、詳細な製品要件書から始めることや。その要件書では、プロジェクトの目的、実装したい機能、エッジケース、成功基準を明確に書き出すねん。

これを基準として使って、エージェントが実装できるような一口サイズのタスクを作っていく。でも、コントロールはこっちが握り続けるんや。

スペック駆動開発の使い方を、俺が実際に使っているプライベート文字起こしアプリを作りながら見せていくで。この動画では、PRDからタスクリスト、そして最終的なアプリまで全部見せるからな。

製品要件書の作成

スペック駆動開発では、まず最初に詳細な製品要件書を作ることが大事や。ここに、LLMの助けを借りて作った要件書の例があるで。

最初に、このアプリが何をするものなのかを説明してる。主要機能は何か?俺はいつも、エージェントを軌道に乗せるための技術的なドキュメントをできるだけ詳しく提供するようにしてるねん。

今のところは、CLI、つまりコマンドラインベースのインターフェースだけでええ。グラフィカルユーザーインターフェースはまだいらん。

製品要件書の詳細を詰めたら、次はタスクリストを作るんや。

augment codeを使ったタスクリスト作成

この動画では、augment codeっていうエージェンティックコーディングシステムを使うで。他のシステムとよく似てるんやけど、タスクリストっていう本当に便利な機能があるねん。

この機能は、与えられたタスクを小さな段階的なステップに分割して、それを達成してテストできるようにしてくれるんや。これはJiraやLinearみたいなツールとも相性がええ。タスクを作成して、エージェントがそれを実装していくからな。

ちなみに、今日の動画のスポンサーでもあるで。でも、俺が見せるワークフローは他のIDEでも使えるで。ただし、もっと手間がかかるけどな。

これはVS Codeの拡張機能やから、インストールするだけでええ。この拡張機能には3つのモードがある:チャット、エージェント、リモートエージェントや。俺らはエージェントモードを使うで。

既存のコードベースで作業する場合は、そのコードベースをインデックス化したほうがええけど、新しいコードベースから始めるから、PRDを使うねん。

今のところ、俺が持ってるファイルはprd.mdだけや。戻って、このPRDを基にタスクリストを作るよう指示するで。手動でタスクを追加することもできるけど、エージェントに送るだけにしておくわ。

タスクリストの実行と開発プロセス

いくつかの異なるタスクを提案してきたな。要件を確認しながら、どんどん詳細を追加していって、最後に特定のタスクで作業を始めるか、タスク構造を修正するかを聞いてきた。

これでええと思うから、作業を始めてもらうで。どうなるか見てみよう。

コマンドを実行するときは、許可を求めてくるねん。俺は承認するけど、勇気があるなら自動モードにしておけば、全てのコマンドを自動実行してくれるで。

ステータスを見てみよう。今はプロジェクトをセットアップしてるだけや。タスクが完了すると、緑のチェックマークが付くねん。

エージェントがやってる面白いことの一つは、ファイルを追加するたびにコードベースをインデックス化し続けることや。これはめっちゃ興味深いな。

このタスクリストを見てると、Claudeコードを思い出すわ。Claudeが自分でリストを作って、完了したタスクを一つずつ選んでいくんや。

エージェントがリストからタスクを取り上げて作業してるのを見るのは、本当に満足感があるな。でも本当の問題は、最終的な製品が動くかどうかや。すぐにわかるで。

アプリケーションのテスト

提供したタスクリストの一部を実装したようやな。これを見てみよう。

44タスク中28タスクを完了して、コア機能ができたな。残りはエラーハンドリング、設定管理とかや。これらのタスクも完了するよう指示できるけど、まずはアプリケーションが実際に動くかどうか見てみよう。

アプリケーションを起動する基本コマンドがこれや。特定のWhisperモデルを使いたい場合の文字起こし、複数言語を有効にしたい場合、これはダブルコマンドキーモード、そしてデバッグモードや。

最低限で実行してみるで。ここにはすでに仮想環境を作ってあるから、このコマンドを実行するだけや。

どうなるか見てみよう。リスニングを開始するには、コマンド+オプションを押す必要があるな。押してみて、何かを文字起こしするかどうか見てみよう。

これは簡単なテストや。うまくいけば、俺の話を文字起こししてくれるはずや。同じコマンドをもう一度押すで。

うまくいったようやな。「これは簡単なテスト。うまくいけば、俺の話を文字起こししてくれるはずや」って出てる。

動いてるみたいやな。今度は、ここに貼り付けた状態でトリガーしてみよう。もう一度トリガーするで。

「これは簡単なテスト。他のテキスト入力ボックスからもトリガーできるかどうか見たい」って出てる。動いてるようやな。

これは素晴らしいで。どこからでも文字起こしをトリガーできる最初のステップや。

GUI機能の追加

今度は、グラフィカルユーザーインターフェースを作るタスクを追加してみるで。実装できるかどうか見てみよう。

そのためには、タスクを追加するねん。全てのタスクを完了していないのがわかるやろ。残りのタスクがまだあるからな。

基本的なユーザーインターフェースを作って、コピーボタンも付けてもらうよう頼んでるねん。何かを文字起こししたら、直接コピーできるようにな。

これをタスクリストに追加して、この特定のタスクを実行してもらうで。作成したタスクは順番通りである必要がないのがええところやな。実装したい機能のリストを持っておいて、必要に応じて選択できるんや。

全部完了したようやな。テストしてみよう。python verbby.pyはまだ動くはずや。

エラー対応と改善

問題が発生したな。これは実際、これらのエージェンティックシステムの面白いところやねん。全体を実装してくれるけど、requirements ファイルの更新を忘れたんやと思う。多分やったかもしれんけど。

インストールをもう一度実行してみよう。もう一度試してみるで。

いや、やってなかったな。修正してもらおう。優秀なバイブコーダーみたいに、エラーをコピペしてタスクに追加するで。エージェントに送ろう。

UIを使うために、いろんなものを更新したみたいやな。このパッケージをインストールする必要があるけど、UIよりもええことをやってくれたと思うで。見せるわ。

これを実行して、ホットキーを使ってトリガーするで。「これはシステムが動くかどうかの簡単なテストや」。ホットキーを使って停止するで。

ここを見てや。「テキストがクリップボードにコピーされました」って出てる。直接ここに貼り付けられるってことや。めっちゃええやろ?

他のアプリケーションでも実際に動くかどうか見てみよう。例えば、作成したPRDの中で、文字起こしをトリガーするで。全部をここにコピーするわ。

コントロール+Vで、動いてるみたいやな。

これはめっちゃええな。今、外部APIに接続したり月額料金を払ったりすることなく、ローカルマシンでローカル文字起こしシステムを実行できるねん。

まとめとaugment codeの紹介

これをベースにしてさらに開発を続けていくつもりや。このプロジェクトに興味があったら教えてな。

augment codeをチェックしてみてや。リンクは動画の説明欄にあるで。50ユーザーメッセージまで使える無料プランがあるねん。

今俺が使ってるのは、600メッセージまで送れる開発者版や。7日間の無料トライアルもあるで。チェックしてみてや。コーディングエージェントの非常に優れた実装で、特にスペック駆動コーディングのために設計されてるんや。

とにかく、この動画が役に立ったと思ってくれたら嬉しいわ。見てくれてありがとう。いつものように、次の動画でまた会おうな。

コメント

タイトルとURLをコピーしました