初めてアプリを作る人
自分用のトラッカーのアイデアはあるものの、プロジェクトの構成はまだありません。単一ページのアプリ、必要なファイル、ローカルで開く手順を依頼します。
項目を追加してページを再読み込みし、データが保持されているか確認できます。初稿が動かない場合は、全面的な書き直しを依頼するのではなく、エラーを貼り付けます。
Geminiを使った作業の流れ
Geminiで実際にテストできるプロジェクトをバイブコーディングする方法
まず機能を1つに絞り、Geminiに実行可能な初版を依頼して、生成されたものを確認します。各回答は草案として扱いましょう。実行し、発生したエラーを正確に伝え、一度に1つずつ変更を依頼します。
このシナリオで必要な成果物（表）
Geminiを使った有益なコーディング作業では、もっともらしい説明だけでなく、実行して確認できるものを完成させます。コードを依頼する前に、小さな目標を決めましょう。
エディターを使う開発者
既存のリポジトリがあり、無関係なファイルを変更せずにフォームを追加したい場合です。関連するコンポーネントをGeminiに渡し、既存のコード規約を説明します。
プロジェクトに照らして確認できる、変更範囲を絞ったパッチを受け取ります。チャットを通じて進めるこの方法と、エディター内に提案が表示されるCopilotを使ったバイブコーディングの方法を比較しましょう。
週末にプロトタイプを作る人
検索機能付きの読書リストなど、小規模なアプリのデモが必要な場合です。データ項目、データがない場合の表示、ブラウザーを更新した後の動作を指定します。
機能の要望リストではなく、テストできる最小限の機能が手に入ります。初心者向けチュートリアルは、最初の依頼を検証しやすい範囲に絞るのに役立ちます。
各項目
| Geminiの最初の回答 | 確認後の成果物 | |
|---|---|---|
| 範囲 | 大まかな依頼を、一度に複数の機能を求めるものと解釈する場合があります。 | ユーザーが行う作業を1つ挙げ、初版に含めないものを明示します。 |
| ファイル | コードの断片を示しても、どこに配置するかは説明しない場合があります。 | 必要なファイルをすべて列挙し、各コードの配置先を示します。 |
| 依存関係 | フレームワーク、パッケージ、ツールがすでにインストールされていると想定する場合があります。 | 必要な実行環境とパッケージを明示するか、ブラウザの標準機能を使用します。 |
| 動作 | インターフェースが何をするべきかを説明します。 | 指定された作業を実行し、その結果を確認できます。 |
| データの取り扱い | 入力した情報が再読み込み後も残るかのように示唆する場合があります。 | データを永続的に保存するかどうかを明示し、再読み込み後の確認手順を含めます。 |
| エラーへの対応 | 空の入力や無効な値への対応を省略する場合があります。 | 空欄、無効な値、欠落したデータに対して適切に応答します。 |
| 検証 | 提案したコードが動くはずの理由を説明します。 | 実際に動くことを確認するための、実行可能な手順を含めます。 |
品質基準
Geminiはコードの下書きや修正に役立ちますが、もっともらしい回答だけではアプリが動く証拠にはなりません。採用する前にプロジェクトを実行し、主要な作業と例外的なケースを確認して、変更内容を読んでください。
よくある手戻り
手戻りの多くは、要件が曖昧なリクエスト、プロジェクトに関する前提の見落とし、または「動かない」としか伝えないフィードバックから生じます。これらのワークフローを使えば、次の修正をより的確に進められます。
- 計画
- 実装
- デバッグ
-
計画漠然としたアイデアを1つのテストに落とし込む
Geminiに生産性向上アプリ全体の構築を依頼する代わりに、「習慣を追加し、今日の分を完了として記録する」という1つのタスクを伝えましょう。必要なファイル、セットアップ手順、再読み込み後に期待される動作も提示するよう依頼します。
対象を絞った機能を作成する- 誰がその機能を使い、何をする必要があるかを明確にします。
- 入力内容、画面に表示される結果、再読み込み時の動作を指定します。
- コードを生成する前に、前提条件を明らかにするようGeminiに依頼します。
-
実装最初の実行可能な案を確認する
返されたファイルを指定の場所に配置し、セットアップ手順に正確に従います。見た目の調整を依頼する前に、通常の操作、空の入力、ページの更新をテストしましょう。見た目が整っていても、動作の不具合が隠れていることがあります。
テスト可能な案を作成する- ファイル一覧と依存関係に関する指示を読みます。
- プロジェクトを実行し、指定したタスクを行います。
- 実際に確認した結果と期待した結果を分けて記録します。
-
デバッグ一度に1つの不具合を修正する
ボタンを押しても反応しない場合は、関連するファイル、エラーがあればその正確な内容、再現手順を共有してください。最小限の修正と変更内容の説明を求め、その後、失敗したチェックを再実行してください。
プロトタイプを修正する- エラーの文面と、その原因となった操作を伝えてください。
- プロジェクト全体の作り直しではなく、最小限の修正を依頼してください。
- 修正を確認し、以前は正常に動作していた項目も再度チェックしてください。
ユーザーの操作を1つと、その期待される結果を説明してください。最初の草案を作成し、自分で実行して、確認した結果を次のプロンプトに反映させてください。
シナリオ FAQ
Geminiは説明からコードとセットアップ手順の草案を作成できますが、結果はタスクと実行環境をどれだけ明確に定義するかによって変わります。コードは必ず自分で実行してください。完成しているように見える回答でも、ファイルが不足していたり、依存関係に互換性がなかったり、依頼と異なる動作をしたりする場合があります。
ユーザーが行うタスクを1つ挙げ、必要な入力と、成功したときに起こることを説明してください。希望する言語やフレームワークがあれば指定し、出力を確認しやすいよう、ファイル一覧と実行手順も求めてください。
エラーの文面を正確にコピーし、そのエラーが発生したコマンドや操作を特定して、関連するファイルを提示してください。最小限の修正を依頼した後、失敗した操作と、以前は正常に動作していた項目の両方を再確認してください。
いいえ。プロジェクトの情報を共有する前に、パスワード、トークン、個人情報、機密のソースコードを削除してください。非公開リポジトリ全体よりも、機密情報を取り除いた小さな例と関連するエラーのほうが、通常は役に立ちます。
何も設定していない状態から実行し、主要なタスク、無効な入力、再読み込み時の動作、セットアップ手順を確認してください。生成されたコードに想定外の依存関係やデータ処理がないか確認し、プロトタイプを共有する際は、未完成の動作について正直に説明してください。