初めてアプリを作る人
タスクリストの内容は説明できても、状態管理、空の画面、データの永続化をClaudeにどう依頼すればよいか、まだ分からないかもしれません。機能を追加する前に、まず1つの操作を動くようにし、各ファイルの役割を平易な言葉で説明してもらいましょう。
編集中のコードの横に提案を表示したい場合は、Copilotのガイドでエディターを中心とした方法を紹介しています。
Claudeのワークフロー
小さなアプリでClaudeを使ってバイブコーディングする方法を見る
バイブコーディングのプロジェクトで方向性を見失う一番簡単な方法は、アプリ全体を一度に作るよう頼むことです。まずは画面や動作を1つに絞り、変更してはいけない点をClaudeに伝え、結果をテストする方法も尋ねましょう。Vibe Codeは、そのアイデアを的を絞った最初のプロンプトにまとめるのに役立ちます。
この状況での悩み
曖昧な依頼では、見た目はもっともらしくても必要な動作を備えていないプレビューができることがあります。次の3つの出発点は、Claudeへの依頼を絞ると役立つ場面と、別のワークフローが適している場面を示します。
操作フローを検証するデザイナー
モックアップの見た目が正しくても、静的な画面では、入力欄が空のときや操作が失敗したときに何が起こるか分かりません。Claudeに操作を実装してもらい、確認すべき状態を一覧にしてもらいましょう。
アイデアを練る際に別の対話型モデルと比較したい場合は、Geminiのガイドでその方法を紹介しています。
既存のプロジェクトを拡張する開発者
既存のファイルがあり、アプリを書き直さずにフィルターを追加したい場合です。関連するコンポーネントだけを渡し、現在の動作を説明して、編集案を出す前に影響を受けるファイルを特定するようClaudeに依頼しましょう。
エディター内で変更を加えることを優先するなら、Copilotのガイドで、現在のファイルに即して作業を進める方法を説明しています。
3つの具体的なワークフロー
左の列で、指定が不十分な依頼を見つけてください。右の列には、範囲が明確で、結果を確認できるClaudeへの依頼を示しています。各ワークフローには、作成の依頼と、その後の確認事項があります。
| 範囲が定まっていない依頼 | 範囲を限定したClaudeの作業手順 | |
|---|---|---|
| 新しい画面 · 作成 | 「生産性向上アプリを作って」。対象ユーザー、画面、必要な操作が定義されていません。 | 「タスクの追加、完了、削除ができるタスクリスト画面を1つ作成してください。幅の狭いスマートフォンでも使いやすい画面にしてください」。 |
| 新しい画面 · 確認 | 操作が機能する証拠として、スクリーンショットを受け入れる。 | 空のリスト、完了済みのタスク、更新後の削除を確認する手動テストを依頼する。 |
| 既存のアプリ · 変更 | 「アプリを改善して」。これでは、Claudeがどこまで置き換えてよいか分かりません。 | 関連ファイルを渡し、現在のタスク保存方法とレイアウトを維持しながら、ステータスフィルターを追加するよう依頼する。 |
| 既存のアプリ · 確認 | 差分を確認せずに、大規模な書き換えを適用する。 | ファイルごとの変更概要を求めてから、既存の動作と新しいフィルターを確認する。 |
| バグ修正 · 調査 | 「動きません」。診断に必要な、再現可能な不具合が示されていません。 | エラーメッセージ、再現手順、期待する動作、関連する最小限のコード抜粋を伝える。 |
| バグ修正 · 確認 | もっともらしい説明があれば、バグは修正されたと判断する。 | 考えられる原因、最小限の修正、実行できる回帰テストをClaudeに求める。 |
出力例
タスクリストの依頼に対する有用な回答には、次のような内容を含められます。これらは説明のためのテキスト例であり、プロンプトを実行したことや、そのコードを検証したことを示すものではありません。
初稿
範囲を明確にした回答
出力例：「追加・完了・削除ができるタスクリスト画面を1つ作ります。タスクはローカルストレージに保存します。アカウント、共有機能、サーバーは追加しません。実装後に、状態管理と保存処理の仕組みを説明します。」このように範囲を区切れば、最初のバイブコーディングの結果は、大がかりなアプリの提案より確認しやすくなります。
- 依頼した各操作が、説明文だけでなく実装にも含まれていることを確認します。
- 画面を狭い幅で開き、リストが空の状態でもテストします。
修正
確認した動作に基づく追加依頼
追加依頼の例：「ページを再読み込みすると、完了済みのタスクが未完了として表示されます。現在のレイアウトは維持し、保存処理だけを修正してください。保存されていなかった値と、修正を確認する手順を教えてください。」これなら、Claudeに具体的な不具合を伝え、変更範囲を限定できます。バイブコーディングを繰り返すときは、漠然と改善を求めるのではなく、実際に確認したことを伝えましょう。
- 変更されたファイルを前のバージョンと比較します。
- 完了済みと未完了のタスクを両方用意して、ページを再読み込みします。
引き継ぎ
ほかの人がテストできる成果物
引き継ぎ内容の例：「このタスクリストでは、タスクの追加・完了・削除ができます。ドキュメントに記載されたローカル環境用のコマンドでプロジェクトを起動し、空欄での追加、再読み込み後の完了済み項目の状態、削除をテストしてください。データの保存にはブラウザーのストレージを使用しているため、別のブラウザーには引き継がれません。」バイブコーディングの成果物を適切に引き継ぐには、機能と同じくらい明確に制約も伝える必要があります。
- セットアップ手順は、対象のファイルと一緒に保管します。
- テスト項目の一覧は実施すべき作業であり、テストに合格した証拠ではありません。
コンプライアンス上の注意事項
Claudeはコードを提案できますが、説明が分かりやすいだけでは、そのコードの安全性や正しさは証明されません。秘密情報、顧客の個人情報、共有する許可のないコードをプロンプトに貼り付けないでください。公開前に、依存パッケージとライセンスを確認し、入力の処理方法を調べ、実際の動作をテストしてください。機密データを扱う場合や一般公開するアプリの場合は、適切な資格や専門知識を持つ人によるセキュリティレビューを手配してください。Vibe Codeでは範囲を絞った依頼から始め、最終的な成果物には人が責任を持つようにしましょう。
シナリオに関するよくある質問
再読み込み後も項目が残るタスクリストなど、成功したかどうかを目で確認できる条件を付けて、1つの画面または1つの動作を依頼しましょう。対象外の範囲を明示したうえで、実装の説明と手動テストの提案をClaudeに求めます。最初の依頼を小さくすれば、バイブコーディングの結果を評価しやすくなります。
まず、画面の見た目や動きを日常的な言葉で説明するところから始められます。その後も、実際に動かして不具合を確認し、理解できないコードについては質問する必要があります。人が頼りにするものを作るなら、プレビューで動いたから十分だと思わず、実装のレビューを受けてください。
何をしたか、何が起きたか、代わりに何を期待していたかをClaudeに具体的に伝えてください。エラーメッセージや関連ファイルがあれば添え、動いている部分を維持できる最小限の修正を依頼しましょう。失敗したテストと、すでに動いていた機能のテストを両方再実行してください。
かなり形になった初稿は作れるかもしれませんが、1つのプロンプトだけでは、すべての操作、依存関係、例外的なケースが正しく動くとは確認できません。アプリをテスト可能な単位に分け、追加するたびにレビューしてください。そうすれば、バイブコーディングの反復作業で問題が起きたときも、原因を把握しやすくなります。
自分で実行し、変更されたファイルと依存関係を確認したうえで、入力処理、データ保存、エラー発生時の動作をテストしてください。プロジェクトとプロンプト履歴の両方から、秘密情報やサンプルの個人データを削除しましょう。機密情報を扱うプロジェクトなら、公開前に適切なセキュリティレビューを受けてください。