初めて開発する人
機能を説明できても、どのファイルを変更すべきか分からない場合があります。コードを依頼する前にファイルの変更計画を求め、提案された編集を一つずつ確認しましょう。
最初のタスクを小さくすることと、動作を確かめる方法。
IDEから改善の反復へ
Copilotでバイブコーディングを学ぶための実践的な方法
Copilotでバイブコーディングを学ぶなら、アプリ全体の作成を頼むのではなく、小さくてテスト可能な変更から始めましょう。Vibe Codeは依頼内容を整理するのに役立ち、Copilotはエディター内でのコーディングを支援します。ファイル、テスト、最終判断は自分で管理しましょう。
ユーザーがすでに使っている作業の流れ
ほとんどの人にはすでにアイデアとエディターがあり、プロジェクトを実行する方法もあります。大切なのは、その作業の各段階でCopilotへの依頼を絞り込むことです。
フロントエンド開発者
動作するページがあり、操作を1つ追加したい場合は、関連するコンポーネントと維持すべき動作をCopilotに伝えましょう。
ページを作り直さずにプレビューとテストができる、対象を絞った変更。
アプリのプロトタイプ制作者
画面だけでなく、実際に使える一連の操作が必要です。UIコードを生成する前に、入力内容、保存する状態、失敗時の動作を説明しましょう。
最初から最後まで操作して確認できるアプリの一部分。
ツールを比較する人
制約を明確にした同じ機能の依頼に対して、各アシスタントがどう応答するか比較したい場合は、試行ごとに受け入れ基準を変えないようにしましょう。
見栄えのよい回答ではなく、実際の動作に基づく比較。
私たちの役割
Vibe Codeは、編集を始める前に何をすべきかを明確にする場です。Copilotは開発環境で利用できるプロジェクトの情報を使って作業します。どちらを使う場合も、結果の確認は必要です。
| Vibe Codeの概要 | エディター内のCopilot | |
|---|---|---|
| 最初に入力するもの | 平易な言葉で書いた目標と制約 | プロジェクトファイルとエディターの情報を添えた依頼 |
| すぐに役立つ用途 | 漠然としたアイデアを具体的な機能要件に絞り込む | 依頼に沿ったコードや修正を提案する |
| プロジェクトの把握 | 概要に記載した情報のみ | エディターで利用できるようにしたファイルと情報 |
| 得られる成果物 | 作業範囲、受け入れ基準、例外的なケース | 確認対象となるコードの変更と説明 |
| 検証 | 何を確認すべきかを定義する | テストの作成を支援できるが、実行と評価は自分で行う |
| 次の作業への引き継ぎ | 練り上げた依頼を作業セッションにコピーする | 選んだ変更をプロジェクトに適用する |
| 最終的な責任 | 良し悪しを判断できるほど依頼を具体的にする | 差分を確認し、アプリを実行して、採用する変更を決める |
変更前と変更後
曖昧な依頼では、判断しきれないほど多くのコードが生成されがちです。作業範囲を限定し、提案された変更が求めた動作に合っているか比較しましょう。
-
1
作業前：目標を1つ決める
「生産性アプリを作る」ではなく、「このページにタスクリストを追加する」と伝えましょう。誰が使い、何ができ、何を変更せずに残すべきかを明示します。
-
2
作業中：小さな修正を依頼する
Copilotに関連ファイルを示し、編集前に作業方針を説明してもらいましょう。バイブコーディングは短い工程で進めます。動作を1つ実装し、差分を確認してから次に進みます。
-
3
作業後：要件どおりかテストする
機能を動かし、空の入力を試し、ページを更新して、関連するテストを確認しましょう。受け入れ条件を満たさない場合は、全面的な書き直しを求めるのではなく、不具合の内容を伝えます。
成果物の仕様
各ワークフローの最後には、確認できる成果物を残しましょう。これらのカードには、依頼内容、期待する変更、成果物が使えるかを判断するための確認項目を示しています。
-
最初の機能タスクリストの操作を追加する
既存のページでタスクを追加、完了、削除する際の動作を指定します。成果物は静的なモックアップではなく、実際に操作できる機能です。キーボード操作と空欄での送信を確認しましょう。
機能の要件をまとめる- 編集するコンポーネントを特定し、現在の動作を説明する。
- 3つの操作を実現するための最小限の変更をCopilotに依頼する。
- ページを実行し、マウスとキーボードで各操作をテストする。
-
状態の扱いローカルの設定を保存する
ページを更新しても維持されるテーマ設定を指定します。成果物には適切な初期設定を含め、保存値がない場合や無効な場合の動作も確認します。
状態の概要をまとめる- 設定を変更する場所と、その設定が影響する範囲を明示する。
- 初回表示に支障が出ないよう、保存値の処理をCopilotに依頼する。
- ページを更新し、保存済みの値とクリアした値の両方をテストします。
-
バグ修正フォームのバリデーションのバグを修正する
期待されるルール、実際に起きている不具合、再現可能な入力を示します。成果物は回帰チェックを伴う的を絞った修正であり、無関係なフォームの再設計ではありません。
バグを説明する- コードを変更する前にバグを再現します。
- Copilotに考えられる原因の特定と、変更範囲を限定した修正案の提示を依頼します。
- 不具合が起きるケースを再度試し、関連するテストを実行します。
作業形式を選ぶ
同じバイブコーディングの習慣は、出発点が異なっても役立ちます。次の依頼を具体的にし、変更をレビューしやすい範囲にとどめ、実行中のプロジェクトで動作を確認します。
新規プロジェクト
実行可能な最小単位から始める
最初のユーザー操作とそのテスト方法を明確にしてから、Copilotに最小限の構成を依頼します。計画中の機能をすべて一度に要求するのは避けます。
- 使用する予定の実行環境またはフレームワークを明示します。
- 単独で動作する画面またはフローを1つ定義します。
- 機能を追加する前に行う確認事項を列挙します。
既存のコード
すでに動作している部分を守る
Copilotに関連ファイルを示し、維持すべき動作を説明します。提案された差分を受け入れる前に、無関係な変更がないか確認します。
- 現在の動作と、求める変更点を明示します。
- 参考にすべき近くのテストや規約を確認する。
- 編集後に影響を受けるフローを実行する。
バグ報告
再現手順から始める
失敗する入力、期待される結果、実際の結果をCopilotに伝えます。再現可能なケースがあれば、「このページを修正して」と頼むより、対象を絞った修正を評価しやすくなります。
- 問題を引き起こす手順を記録する。
- 大幅に書き直す前に、考えられる原因を尋ねる。
- 問題が再発したときに検出できるテストを残す。
ほかのアプローチも検討する
エディターでの作業が適切な出発点でなければ、別のアシスタントを比較するか、同じように小さなタスクに絞って初心者向けの演習に取り組みましょう。
要件を実践に移す
Vibe Codeを使って、次の機能アイデアを対象の明確な要件にまとめましょう。その要件をCopilotとの作業に持ち込み、提案された編集内容を確認し、範囲を広げる前に結果を実行してください。
シナリオ別FAQ
まずは小さな機能を日常的な言葉で説明するところから始められます。ただし、実際に動かし、失敗したときに気づける必要があります。プロジェクトのファイル、エラーメッセージ、テストについて十分に学び、Copilotの提案を適切に判断しましょう。
アプリ全体を一度に依頼すると、レビューやデバッグが難しくなります。まずは1つの動作するフローから始め、テスト方法を決めて、期待どおりに動くことを確認してから次の機能を追加しましょう。
関連するファイル、現在の動作、希望する変更、編集時に従うべき規約を伝えましょう。バグの場合は再現できる例を示し、変更してはいけない点もCopilotに伝えてください。
差分を元の依頼内容と照らし合わせ、アプリを実行して通常の入力と境界的な入力を試しましょう。関連するテストも実行してください。アシスタントが自信を持って説明していても、実際の動作を確認する代わりにはなりません。
両者が自動的に連携していると思い込まないでください。Vibe Codeの出力は、自分で確認し、Copilotでの作業に持ち込むための概要として扱ってください。