00:00:00Claude Codeを使ってWebアプリケーションを構築しているなら、GSDをチェックしてみてください。
00:00:04これはオープンソースのスペック駆動開発（SDD）フレームワークで、
00:00:08SDDフレームワークに沿ってプロジェクトを完了させるために、様々なサブエージェントをオーケストレートすることに特化しています。
00:00:12このチャンネルで紹介してきた、従来のスペック駆動開発フレームワークとは異なります。
00:00:15これまでの「Beemap Method」や「SpecKits」、「Taskmaster」などの伝統的なフレームワークは、
00:00:20すべてを1つのコンテキストウィンドウ内で行わなければならないという厳格なルールがありました。
00:00:24例えば、計画、リサーチ、開発、検証のすべてを、
00:00:29単一のコンテキストウィンドウで完結させる必要があったのです。しかし、それには重大な問題が伴います。
00:00:33それは「コンテキストの肥大化」です。1つのウィンドウでのトークン消費量が増えるほど、精度が低下してしまいます。
00:00:38その解決策が、サブエージェントを使って、
00:00:42計画、リサーチ、開発、検証をそれぞれ専用のエージェントに委任することです。
00:00:47各エージェントが独自のフレッシュなコンテキストを持ち、タスクを1つずつ完了させていきます。
00:00:51GSDはそれらを統括するオーケストレーターとして機能し、スペック駆動開発の手順に従って、
00:00:55大まかなアイデアから本番レベルのアプリケーションへと、ステップバイステップでAIを導きます。
00:01:00つまり、トークン消費量は増えますが、
00:01:04すべてを1つのコンテキストで処理するよりも、得られる精度は格段に高くなります。
00:01:07そこで今回の動画では、Claude CodeにGSDフレームワークをセットアップする方法を具体的に解説します。
00:01:11アイデアを形にし、既存のアプリや新規アプリに組み込む方法や、
00:01:15リサーチエージェントやプランナーエージェントを使って、
00:01:19構築したいアイデアを具体化していく流れをお見せします。
00:01:23アイデアが固まったら実装フェーズに移ります。そこでは専用の実行エージェントが、
00:01:27並列でタスクをこなしていきます。
00:01:32各エージェントは独自のコンテキストを持ち、完了したタスクをコミットします。
00:01:37また、タスクが完了するたびに別のエージェントが立ち上がり、
00:01:41目標通りに完了したかを検証します。そして最も重要なのは、
00:01:45ディスカッション、計画、実行、検証という各フェーズをループさせ、
00:01:49手動のループを介さずに、マイルストーン全体を自律的に完了させる方法を紹介することです。
00:01:55本日はこれらすべてをカバーします。興味のある方は、さっそく始めましょう。
00:02:00本題に入る前に、初めての方に向けて簡単に自己紹介をさせてください。エリックと申します。
00:02:04私はAmazonやAWS、Microsoftなどの企業でシニアソフトウェアエンジニアとして長年勤務してきました。
00:02:09このチャンネルを開設したのは、私がこれまでに学んできたこと、
00:02:15AIコーディングから自動化、Web3、キャリア開発に至るまでを共有するためです。
00:02:22すべて実践的なチュートリアルとして分かりやすく解説しています。もしスキルアップを目指しているなら、
00:02:27ぜひチャンネルをチェックして、購読ボタンを押してください。では動画に戻りましょう。
00:02:32まず最初に、GSDのレポジトリにアクセスします。
00:02:36ここには、ローカルマシンへのインストール方法が詳しく記載されています。
00:02:40このコマンドをコピーして、現在のプロジェクトのターミナルに戻ります。
00:02:44そして、このコマンドを入力してローカルプロジェクトにインストールします。
00:02:49「はい」を選択してインストールを進めます。
00:02:53次に、Claude CodeかOpen Code、あるいはその両方を使うかを選択します。今回はデモ用にClaude Codeのみを選びます。
00:02:57「どこにインストールしますか？」と聞かれます。
00:03:02すべてのプロジェクトで利用できるように、グローバルにインストールするのがいいでしょう。
00:03:07選択が終わると、GSDにはモデル名や現在のタスク、
00:03:12コンテキストウィンドウの使用状況を表示するステータスラインが含まれていることがわかります。
00:03:17既存のものを使い続けるか、GSDのステータスラインに置き換えるかを聞かれますが、
00:03:22まだ見たことがないので、2番のオプションを選んで、
00:03:26GSDのステータスラインがどのようなものか見てみましょう。Claude Codeのセッションを開きます。
00:03:31画面に出ているのがGSDの現在のステータスラインです。
00:03:37もしこのバージョンが気に入らず、私のカスタム版を使いたい場合は、
00:03:41ステータスラインをこのようにカスタマイズする方法を解説した別の動画もチェックしてみてください。
00:03:46もちろん、GSD標準のステータスラインのままでも問題ありません。
00:03:49GSDのインストールが完了したら、単に「gsd」と入力します。
00:03:54Claude Codeのターミナル内にカスタムコマンドが表示されるはずです。では、
00:03:58次はプロジェクトを初期化しましょう。
00:04:02新規プロジェクトの場合は「gsd new project」を実行しますが、
00:04:06既存のプロジェクトがある場合は、まずこちらのコマンドを実行します。
00:04:10これにより複数のサブエージェントが起動し、スタック、アーキテクチャ、規約、
00:04:15懸念事項などを分析します。このコマンドでコードベース全体を把握させ、
00:04:20追加したい機能や設計に基づいた質問を投げることができます。
00:04:24まずはこのコマンドでコードベース全体のマッピングを行います。
00:04:28すると、4つのコードベース・マッパー・エージェントが並列で起動し、
00:04:32技術スタック、アーキテクチャ、規約、懸念点など、
00:04:38アプリケーションのすべてを分析し始めます。並列実行されている
00:04:42マッパーエージェントが完了するまで少し待ちましょう。
00:04:46マッパーによるコードベースの分析が終わりました。ここで一旦、
00:04:50Claude Codeのセッションをリセットします。コンテキストウィンドウが
00:04:54半分ほど埋まってしまっているからです。一度終了して、
00:04:59ターミナルをクリアしてからセッションを再開します。これでゼロからのスタートになりますが、
00:05:04マッピング結果はステートとして保存されているので心配いりません。
00:05:09「.planning」フォルダを確認すると、その中に「codebase」という項目があります。
00:05:13ここには、アプリケーションのアーキテクチャや懸念点など、
00:05:17規約や統合情報を含むすべての要約が格納されています。
00:05:23これにより、マッピングした現在の状態を見失うことはありません。
00:05:28コードベースのマッピングが完了したので、いよいよプロジェクトを初期化します。
00:05:32すると、私のアイデアを理解するために、いくつかの重要な質問を投げかけてきます。
00:05:36「どんな新機能を追加したいか？」といった質問です。その後、
00:05:39複数のサブエージェントが並列で起動し、構築しようとしているドメインを調査します。
00:05:43また、要件の抽出や、実現するために必要なフェーズを
00:05:47ロードマップとして作成する手助けもしてくれます。
00:05:51このコマンドをコピーして貼り付けます。これで、
00:05:56現在のプロジェクトの初期化が始まります。既存のコードベースと、
00:06:00作成済みのコードベースマップがある「ブラウンフィールド・プロジェクト」として認識されました。
00:06:05Gitレポジトリはありますが、まだプロジェクト用の計画ファイル（project.md）はありません。
00:06:10「すでにマッピング済みの既存プロジェクトがあるようですね」というメッセージとともに、
00:06:14ビジネスコンテキストを確認した上で、「次に何を構築したいですか？」と聞かれます。
00:06:18構築したい機能のアイデアはすでにあります。管理システム用のダッシュボードの構築です。
00:06:23これはAIを使ってドラフトした短いマークダウンファイルで、
00:06:29既存のダッシュボードのサイドバーに新しいタブとして最小限の管理パネルを作成する計画です。
00:06:34ユーザー管理やサポート対応に必要な基本ツールを提供します。
00:06:39ここには、要望した機能やMVP（実用最小限の製品）としての機能、
00:06:42UXのモックアップやフレームワークなどが詳細に記されています。
00:06:47皆さんもぜひAI、例えばClaudeを使ってアプリケーションを分析し、
00:06:52構築したいもののドラフト計画を作成することをお勧めします。
00:06:56少なくともUXの変更点や盛り込みたい機能がわかっていれば、
00:07:00Claudeに何を実装させるか明確なプランが持てます。
00:07:04もちろん、このプランをそのままClaudeに渡して実装させることもできますが、
00:07:08今回はGSDに主導権を渡し、調査やリサーチを行わせたいと思います。
00:07:13複数のサブエージェントを起動してリサーチを代行させ、この大きなタスクを
00:07:20実装しやすい小さなタスクに分解させます。ターミナルを開いて、
00:07:25まさにこれを構築したいのだと伝えます。このファイルを参照して、
00:07:28「次にこれを構築する予定です」と伝えます。
00:07:33これを入力して、GSDにプランニングを手伝わせましょう。
00:07:40GSDはこのアプリケーションに実装しようとしているバックログ項目を読み取ります。
00:07:44そして、正確な仕様を確認するために一連の質問を投げかけてきます。
00:07:48「この仕様には、ユーザーリスト、クレジット、ティア、なりすまし機能の4つすべてが含まれていますが、」
00:07:52「これらを一度に構築しますか？それとも最初のイテレーションでは一部を優先しますか？」
00:07:58巨大な4つの機能を、さっそく小さな機能に分解し始めているのがわかります。
00:08:02「まずはユーザーリストやクレジットのようなシンプルな機能から始めましょう」と答えます。
00:08:07「はい、そうしましょう」と入力します。
00:08:11次に「管理パネルが正しく動作することをどう確認しますか？」と聞かれます。
00:08:16今はまだプロジェクトが始まったばかりなので主に手動テストで行いますが、
00:08:21GSDはテストカバレッジについても尋ねてきます。例えば、APIルートのテストを追加する
00:08:25統合テストや、ユニットテスト、統合テスト、E2Eテストを含むフルカバレッジテストなどです。
00:08:30まずは手動テストのみに集中し、後でテストカバレッジを広げていくことにします。
00:08:34「今は手動テストで」と答えて回答を送信します。
00:08:38GSDが次に何をするか見てみましょう。
00:08:43さらに質問が続きます。管理パネルをいつまでに稼働させる必要があるかという点です。
00:08:46現在のアプリケーションには、ビジネスアナリストによるタイムライン計画があり、
00:08:501月30日の本番リリースについて言及されています。
00:08:56「V2のリリース、つまり1月30日より前に必要ですか？」という質問です。
00:09:01「はい、間違いなく1月30日より前に完成させたいです」と答えます。
00:09:05そして、プロジェクトのMDファイル作成に進むかどうかを聞かれます。
00:09:10まだ調査を続けて、もっと質問をしたいところです。
00:09:14仕様に見落としがないか、何をすべきかを確認するために質問を重ねます。
00:09:19複数のサブエージェントを起動して、セキュリティ、UX、ベストプラクティス、
00:09:22そして現在の仕様に欠けている技術的な実装のギャップを調査させます。
00:09:28ここに表示されたテーブルが、ギャップの全貌を網羅しています。
00:09:32例えば、管理用ミドルウェアの保護が不足している、
00:09:37クッキーの欠落、レート制限がインメモリであること、ユーザー削除時の管理アクション、
00:09:43そして他のユーザーに対して「isAdmin」関数が正しく機能しないといった点です。
00:09:49実装する前に、これらの課題に対処しておく必要があります。
00:09:52そして、これらが提案された修正リストです。
00:09:57内容を確認して、これらの指摘が妥当かどうかを判断します。
00:10:02問題なければ、プロジェクトMDファイルを作成し、実装へと進むことができます。
00:10:06「リサーチにより重大なセキュリティ上の欠陥が見つかりました。どう対処しますか？」と聞かれます。
00:10:11「推奨通り、重大なものは修正してください」と答えます。
00:10:15回答を入力して、Claude Codeにプランを練り直させ、
00:10:20プロジェクトMDファイルに移る前に仕様に漏れがないか確認させます。
00:10:24準備が整ったので、プロジェクトMDファイルを作成します。
00:10:29「はい、プロジェクトMDファイルの作成に進みましょう」と伝えます。
00:10:33Claude Codeがプロジェクト全体のMDファイルを作成し始めます。
00:10:38完了まで少し待ちましょう。次のセクションへ行く前に、
00:10:42本日のスポンサーであるTestbriteを紹介させてください。
00:10:46Testbriteは、ソフトウェアテストに特化したAIエージェントです。
00:10:51Testbrite MCPのリリースにより、Cursor、Windsurf、Claude Codeなどの
00:10:57IDE内で直接利用できるようになりました。セットアップは非常に簡単で、
00:11:02MCP設定に構成を追加するだけです。Testbriteの素晴らしい点は、
00:11:07闇雲にテストを実行するのではなく、まずコードベース全体とドキュメントを読み込み、
00:11:11AIエージェントが出した結果を検証することです。PRDからテスト計画を自動生成し、
00:11:16テストケースを作成して適切なカバレッジを確保します。これらすべてが手動入力なしで行われます。
00:11:21さらにテストを実行し、どこが壊れているか、どこに注意が必要かを詳しくレポートしてくれます。
00:11:26現在のコーディングエージェントの平均精度は約42%ですが、
00:11:32Testbrite MCPを使用することで、機能提供の精度を最大93%まで高めることができます。
00:11:38興味のある方は、解説動画をご覧になるか、概要欄のリンクをクリックしてください。では動画に戻ります。
00:11:42プロジェクトのスコープ設定とMDファイルの作成が終わると、モードの選択を求められます。
00:11:47「YOLOモード」を選べば、自動的に承認して実行まで進めてくれます。
00:11:52あるいは、より対話的なモードも選べます。ステップが終わるたびに
00:11:56変更内容を確認して次に進むことができます。今回はYOLOモードで、
00:12:01手を離してすべてお任せで完了させてみようと思います。
00:12:04YOLOモードを選択してエンターを押します。次に「深さ（Depth）」を聞かれます。
00:12:09プランニングをどれくらい徹底するかです。素早く出荷するための「クイック（3〜5フェーズ）」か、
00:12:14あるいは各1〜3つのプランを持つ構成か。
00:12:18もしくは、より標準的でバランスの取れた「スタンダード（5〜8フェーズ）」かです。
00:12:22各フェーズに3〜5つのプランが含まれます。今回は、
00:12:26スピード重視ではなく、スコープのバランスが良いスタンダードを選びます。
00:12:302番を選択して回答を送信します。
00:12:34次に実行方法について聞かれます。プランを「並列」で実行するか、
00:12:38つまり独立したプランを同時に走らせるか、あるいは1つずつ順次実行するかです。
00:12:42時間に余裕があるなら、順次実行（sequential）を強くお勧めします。
00:12:46プランを1つずつ着実にこなしていくからです。もし並列で実行して
00:12:51途中でクレジットが切れてしまうと、両方のタスクが未完了のまま止まってしまう可能性があります。
00:12:57順次実行なら、少なくともいくつかのタスクは確実に完了します。
00:13:01クレジットが切れても、翌日まで待ってから
00:13:06続きを再開することができます。プロジェクトが中途半端な状態で放置されるのを防げます。
00:13:10一歩ずつ進めたいので「順次実行」を選びます。次にGitの追跡について、
00:13:14計画ドキュメントをGitにコミットするかどうかを聞かれます。
00:13:18もちろん記録を残しておきたいので「はい」と答えて送信します。
00:13:22さらに「プランニングの前にリサーチを行うか？」という質問にも「はい」と答え、
00:13:27「実行前に、プランが目標を達成できるか検証するか？」にも「はい」と答えました。
00:13:31さらに検証ツール（Verifier）について、各フェーズの後に要件を満たしているか確認するか、
00:13:35これにも「はい」を選択。そしてモデルの優先設定です。
00:13:40「最も品質の高いもの」を選びました。リサーチとロードマップ作成には、
00:13:46コストは高いですがより深い分析ができるOpusを使用します。
00:13:52これらの設定はすべて「config.json」に保存されました。
00:13:58これがその設定ファイルです。将来何か変更したい場合は、
00:14:03このファイルを直接編集することも可能です。
00:14:07動画が長くなりすぎないよう進めますが、GSDはリサーチフェーズに移りました。
00:14:12まず「リサーチ・シンセサイザー」が起動し、複数のサブエージェントを立ち上げてリサーチを行います。
00:14:16リサーチが完了すると、それらを統合して、
00:14:21開発しようとしているプロジェクトに基づいた独自のリサーチレポートを作成します。
00:14:26内容に同意すると、GSDはプロジェクト全体のロードマップ作成に移行し、
00:14:30ステップバイステップで何をすべきかを明確にします。
00:14:34ロードマップが生成されました。5つのフェーズからなり、
00:14:39V1の要件をすべて網羅する36の要件がマッピングされています。
00:14:43例えば、データベース、スキーマ、バックエンド、そしてユーザーエクスペリエンスなどです。
00:14:49「このロードマップの構造でよろしいですか？」と聞かれるので、内容をチェックして、
00:14:54不足しているものがないか確認します。問題なければ、
00:14:59「承認して変更を開始」を選択します。プロジェクトの初期化が終わると、
00:15:03MVP用のアーティファクト一式が作成されます。これらはすべて
00:15:08「planning」フォルダ内に格納されます。全5フェーズ、36の要件の準備が整いました。
00:15:13すべてplanningフォルダ内にあります。5つのフェーズと36の要件すべて、構築の準備が整いました。
00:15:18次に、これに問題がなければ、フェーズ1から順に進めていきます。
00:15:21フェーズ1を開始し、一つずつ進めます。フェーズ1のプランを作成すると、
00:15:25このように、フェーズ2やフェーズ3のプラン作成のために、複数のサブエージェントが起動されます。
00:15:29これらすべてのサブエージェントを使って、各フェーズのプランを
00:15:34新しく作成したり、整理したりできます。フェーズが作成できたら、
00:15:38次は実装に移ります。先ほどお話ししたように、
00:15:41これらを新鮮なコンテキストで順次実行したいので、一つのプランが終わるたびに
00:15:46検証を求められるのは避けたいです。すべてを完了させた後に、
00:15:52まとめて検証できるようにしたいのです。各フェーズごとではなく、全フェーズ終了後に確認したい。
00:15:55そこでClaudeに対して、GSDの各フェーズを新鮮なコンテキストで
00:15:59順次実行するように指示を出します。
00:16:03すると、各プランに対して新しいセッションコンテキストを使用して、各フェーズを一つずつ実行します。
00:16:08具体的には、GSDエグゼキューターを使って新しいサブエージェントを実行することになります。
00:16:13各エージェントには200Kのクリーンなコンテキストが割り当てられるため、
00:16:18他のサブエージェントが完了した前のプランと混ざることはありません。
00:16:23そして、GSDを使用して13のプランすべてを自律的に実行します。
00:16:27データベーススキーマ、バックエンド、UI、クレジット管理、
00:16:34そして監査ログビューアまで、すべてを一つずつ実行します。
00:16:39ここではコンテキストをクリアし、権限確認をバイパスして順次実行していきます。
00:16:44管理ダッシュボードの実装におけるフェーズ1の実行が始まりました。
00:16:48すべてが完全に実装されるまで少し待ちましょう。さて、GSDですべてのフェーズを
00:16:53実装した結果がこちらです。現在、管理タブの
00:16:57ユーザー管理タブにいます。ここで、現在のプラットフォームにいる
00:17:03すべてのユーザーを確認できます。ユーザーの検索も可能です。例えば、
00:17:07「test」と入力すると、このように最初の結果が表示されます。
00:17:12これを削除すれば、再びリスト全体が表示されます。
00:17:17ティア（階層）でフィルタリングすることもできます。フリープランを利用しているユーザーを確認したり、
00:17:21クレジットの使用状況、最終サインアップ日を確認したり、クレジットの調整も可能です。
00:17:25こちらでアカウントの詳細を確認したり、クレジットを調整したりできます。
00:17:29イベントの調整やクレジットの設定、
00:17:33カスタムクレジット制限や現在の使用量の設定、
00:17:38そして理由の入力も可能です。これらは監査ログで追跡できます。
00:17:42例えば「全ティア」を選択し、現在は管理者として設定されている
00:17:48このユーザーでログインしています。これをクリックしてクレジットを調整してみましょう。
00:17:52クレジットを50増やしてみます。つまり、
00:17:57現在の510クレジットから560クレジットに変更します。
00:18:03下の欄に理由、例えば「test」と入力して、
00:18:07調整を適用します。すると、このように
00:18:11510から560に増加したという通知が表示され、
00:18:17コンポーネントの再レンダリングがトリガーされます。テーブル上でも、
00:18:21510から560へと正しく反映されているのが確認できます。
00:18:27機能が完全に動作していることがわかりますね。次に管理分析パーツを見てみましょう。
00:18:31アプリケーション内のあらゆる統計データを確認できます。最終更新日時や、
00:18:36総ユーザー数、有料ユーザー数などの統計が表示されます。
00:18:40ティア別の割合、クレジット使用量、最もアクティブなユーザーなども確認できます。また、
00:18:46監査ログも見ることができます。これは、ユーザーのクレジット調整などで行った
00:18:51すべてのイベントやアクションを、この監査ログ内で
00:18:55確認できることを意味します。例えば、クレジット調整、クレジット同期、対象ユーザー、
00:19:00操作の詳細などを監査ログの履歴で確認できます。このように、
00:19:05GSDを使って開発の全工程をたどり、機能を完成させることができます。
00:19:09この動画が参考になったら、ぜひ高評価をお願いします。
00:19:13また、ページをリロードせずにクレジット適用後にコンポーネントを再レンダリングさせた方法が
00:19:16気になる方への答えは、状態管理ライブラリの「Zustand」を使用しているからです。
00:19:21アプリケーション全体の情報を一元管理することで、
00:19:26コンポーネントの一部が更新されると、現在の状態も自動的に更新されるようになっています。
00:19:30もし、ご自身のアプリケーションにこのような状態管理を追加する方法に興味があるなら、
00:19:34私が作成した7時間のコースをチェックすることを強くお勧めします。
00:19:38スケーラブルで本番環境に対応したNestJSアプリをステップバイステップで構築する方法を解説しています。
00:19:44ということで、この動画が役に立ったと思ったら、高評価をお願いします。
00:19:47チャンネル登録もぜひ。今後も、AIを使ってこのように
00:19:51本番レベルのアプリケーションを構築するための
00:19:55レッスンやテクニックを共有していきます。それでは、また次の動画でお会いしましょう。