GitHub Copilot を使用した Vibe コーディング

イントロダクション

Copilot を使用すると、コード行を自分で記述することなく、まったく新しいアプリケーションをゼロから作成したり、機能を追加したり、ユーザー インターフェイスを変更したりできます。 Copilot を操作し、AI をコーディング パートナーとして使用してチャット ビューにプロンプトを入力し、実際のすべてのコーディングを Copilot のままにすることができます。

このチュートリアルでは、VS Code または JetBrains IDE で、この方法で個人の時間追跡 Web アプリを作成します。

この方法は、概念実証の開発、ソフトウェア開発に対する従来のアプローチを使用してさらに開発するアプリケーションのドラフトの作成、または独自の個人用アプリケーションの作成に適しています。

このチュートリアルの対象は誰ですか?

•         **学習者：** ソフトウェア アプリケーションを作成する方法について学習します。 Copilot を使用し、要求がどのように実装されるかを確認することで、多くのことを学ぶことができます。
  

•         **開発者以外:** あなたは製品マネージャーであるか、エンジニアリング チームの外部で別の役割を果たします。 特定の機能を示すために概念実証アプリケーションをすばやく作成する必要があります。 主に、コードの詳細ではなく、ユーザー エクスペリエンスに関心があります。
  

•         **個人：** 日々の仕事や家庭生活に役立つ便利な機能を提供するアプリケーションを作りたいと考えています。 アプリケーションはコンピューター上でローカルに実行され、使用するのはユーザーのみであるため、コードがどのようにまとめられたかについて過度に心配する必要はありません。
  

このチュートリアルは、エディターでコードを記述する確立されたプラクティスを持つ経験豊富な開発者を対象としたものではありません。 経験豊富な開発者は、Copilot を別の方法で使用します。これは、問題解決と生産性の向上のためのツールです。 このチュートリアルでは、チャット内で作業を行い、Copilot がエディターですべての作業を行います。

所要時間

このチュートリアルを完了するのにかかる時間に影響する可能性がある変数は多数あります。 ただし、少なくとも 2 時間は許可する必要があります。 Copilot チャット では、後でいつでも、同じ会話内の中断した箇所から再開することができます。

[前提条件]

開始する前に、次のものが必要です。 * GitHub Copilot サブスクリプション プラン。

• 次のいずれかの IDE:
  • Visual Studio Code
  • JetBrains 用の GitHub Copilot 拡張機能がインストールされており、Copilot をサポートする任意の JetBrains IDE。 「環境内に GitHub Copilot 拡張機能をインストールする」を参照してください。
• Visual Studio Code または JetBrains で Copilot チャット を使用した経験があります。 これまでに Copilot チャット を使用したことがない場合は、 IDE で GitHub Copilot の質問をする を参照してください。

準備

新しい GitHub リポジトリに時間追跡アプリを作成します。

1. GitHub Web サイトで、初期 README ファイルを含む、アプリケーション用の新しいプライベート リポジトリを作成します。 新しいリポジトリの作成を参照してください。

2. リポジトリのコピーをローカル コンピューターに複製します。 リポジトリのクローンを参照。

3. リポジトリのローカル コピーで、作業する新しいブランチを作成します。

   たとえば、ターミナルで次のコマンドを使用します。

   Bash

   git checkout -b BRANCH-NAME
   

Copilot を使用した調査

1. VS Code または JetBrains IDE で、リポジトリ ディレクトリを新しいプロジェクトまたはワークスペースとして開きます。

2. 現在開いているエディター タブをすべて閉じます。

   エディター タブが開かっていない空のprojectまたはワークスペースで作業すると、Copilot がそれらのタブ内のコードや情報の影響を受けなくなります。

3. IDE でターミナル ウィンドウを開きます。

4. Copilot チャット を開き、チャット ビューの下部で、 Ask が現在選択されているチャット モードであることを確認します。 そうでない場合は、チャット モードのドロップダウンから [確認 ] を選択します。

   

5. [モデル] ドロップダウンからモデルを選択します。

   メモ

   このチュートリアルで参照されている応答は、Claude Sonnet 4.5 の使用中に受信されました。 他のモデルの応答は異なりますが、ほぼ同様の結果が得られます。 Claude Sonnet 4.5 は、チャット ビューで役立つ解説を提供し、何を行っているかを説明し、コーディングが完了したときに詳細な概要を提供する場合に適した選択肢です。

   Claude Sonnet 4.5 を使用できない場合は、モデルを Auto に設定するか、任意のモデルを選択します。

6. チャットに次のプロンプトを入力します。

   Copilot prompt

   I need to keep a daily log of what I've spent my time on. I want to build a time-tracking application to help me do this. Throughout the day I want to use the app to record what I'm working on as I move between tasks. At the end of the day it should show me the total time I've spent on each item.
   
   What are the typical features of such an app?
   
   What do I need to consider when building this app?
   

   Copilot は、質問に答える際に詳細な情報を返します。

7. Copilot の応答を検討し、必要に応じてさらに詳細な質問を行うことで、アプリケーションに関する考えを明確にします。

   たとえば、次の質問をします。

   Copilot prompt

   Data storage: the application will run locally on my laptop. What's the best way to persistently store data so that I'll have access to historic time-tracking data?
   
   Data structure: How should I structure the data for this application? There will be tasks and projects. Each chunk of time will be associated with a task and some, but not all, tasks will be associated with projects. I will want to see totals for: each task, each project, each task per project.
   

8. 同じチャット会話で引き続き質問を行い、構築するアプリケーションをより明確に把握します。

   チャットの会話を開いたままにしておきます。Copilot は、次の一連の手順でこの会話を使用します。

実装の計画

これで、アプリケーションの初期実装の計画を開始できます。 反復可能なアプリケーションの基本バージョンから始めるのが良い考えです。 これにより、機能を追加する前に、基本的な機能を簡単に使用できるようになります。

1. 前のセクションで使用したものと同じ Copilot チャット の会話内で、チャット ビューの下部にあるチャット モードのドロップダウンから [プラン] を選択して、質問モードからプラン モードに切り替えます。

2. 次のプロンプトを入力します。

   Copilot prompt

   I want to build a time-tracking application that allows me to keep track of how much time I spend on tasks during my working day. This should be a web app that runs locally on my computer. Plan the implementation of a basic, initial version of this application. This first version should allow me to:
   
   - Add, edit and delete projects and tasks - each a name with a maximum of about 50 characters
   - Quickly click to select a project and task and record the start time
   - Click another task to stop the current timer, recording the stop time, and recording the start time for the new task
   - Pause/resume/end the current task
   - Display the totals of times I have spent on each: task, project, and task per project.
   
   Time is always recorded for a specific task. A task can optionally be associated with a project.
   
   Store data for each day, but for this version do not include any user interface or functionality for looking at historical data, or compiling statistics. The initial version of the application should be limited to today's time tracking.
   
   Notes:
   - Tasks never overlap
   - Time should be accurate to the minute by recording the day, hour, minute tasks are started and stopped and calculating the duration from this
   - Design the web UI for display on a desktop monitor
   - Keep things very simple for the initial version. Do not add any other features not mentioned in this prompt
   

   Copilot は次のような応答を返します。

   プラン: Time-Tracking Web アプリケーションをビルドする

   localStorage でバニラ HTML/CSS/JavaScript を使用して毎日のタスク時間を追跡するためのシングルページ Web アプリケーション。 このアプリは、サイドバーにプロジェクト/タスクを表示し、アクティブなタイマーを表示し、タスクとprojectごとに毎日の合計を計算します。

   Steps

   1. 自己完結型のバニラJavaScriptアプリケーションのためにindex.html、styles.css、app.js、およびstorage.jsを使用してプロジェクト構造を作成する

          **ローカルストレージを使って、コレクション`projects`、`tasks`、および`timeEntries`を含む`storage.js`内でCRUD操作とID生成を含むデータストレージ層の実装**
   

   3. の HTML 構造は、3 つの主要なセクションに分かれています。プロジェクト/タスク管理用の左側のサイドバー、アクティブなタイマーとコントロール（開始/一時停止/再開/停止）の中央パネル、そして毎日の合計を表示する右側のパネルです。

          **
   

          **ここでは、タスクの選択 (前のタスクの自動停止、新しいタスクの自動開始)、一時停止／再開／停止の各アクション、および `app.js` を保存する分単位の時間計算を処理します
   

   5. インライン編集/削除機能を備えたプロジェクト/タスクリスト用に、UIレンダリング関数を作成し、リアルタイム更新をサポートするアクティブタイマー表示と、タスク、プロジェクト、およびプロジェクトごとのタスクに基づく集計を行う合計パネルも含める。 6. デスクトップに最適化された 3 列レイアウト、アクティブ/一時停止タイマーの明確な表示状態、プロジェクトとタスクを追加/編集するための単純なフォームを使用して、****styles.cssを設定する

   その他の考慮事項

          **日付処理** - すべての時刻を ISO 文字列として格納し、今日の日付 (`YYYY-MM-DD`) でエントリをフィルター処理します。 日の境界は、午前 0 時またはカスタム時刻 (たとえば、深夜の作業者の場合は午前 4 時) にする必要がありますか?
   

          **タイマー表示形式** - 経過時間を `HH:MM` または `H hours M minutes`として表示しますか? 1 秒ごとまたは 1 分ごとに更新しますか?
   

             **未割り当てタスク** - UI でプロジェクトなしでタスクを表示する方法 サイドバーの上部または下部に「No Project」セクションを分けて配置するか、またはアルファベット順に混在させますか。
   

1. "その他の考慮事項" の質問にCopilotで提示された内容について回答します。 たとえば、次のプロンプトで応答できます。

   Copilot prompt

   - Date handling: only consider the local date. This app is only going to be used by one person in one timezone. Set the day boundary to 4 am.
   - Time display: Show elapsed time as HH:MM. Don't track seconds.
   - Unassigned tasks: I've changed my mind. All tasks should be associated with a project, but there should be a built-in project called "No Project" (which the user can't delete or rename). All tasks should be associated with this project until the user chooses another project.
   
   If the user is changing tasks for the same project then they should be able to do this with one click (assuming the new task has already been defined). If they are doing the same task but for a different project, this should also be possible to change with one click (assuming the new project is already defined). If they want to track time for a different task in a different project then they should be able to do this with 2 clicks.
   

   Copilot は、検討を促すために追加の質問を返す場合があります。

2. 質問の一部またはすべてに答えたり、計画に十分な詳細があると感じる場合は、次のステージに進むことができます。

   Copilotの応答は非決定的なので、その質問内容は変わりますが、応答に次の質問が含まれていたと仮定します。

          **新しいタスクの既定のproject** - projectを指定せずに新しいタスクを追加する場合は、[Projectなし] または現在アクティブ/選択されているprojectに割り当てますか? 推奨: 現在の選択されているプロジェクトがない場合、"プロジェクトなし" がフォールバックとして使用されます。
   

          **タイマー精度エッジ ケース** - ユーザーが同じ時間内にタスクを切り替える場合 (例: 10:30:15 から 10:30:45)、0 分のエントリを作成するか、無視するか。 推奨: 記録せずに即時スイッチとして無視して扱います。
   

   プロンプトを入力して、次の質問に回答できます。

   Copilot prompt

   New task default project - When adding a new task without actively specifying a project, use the currently selected/active project with "No Project" as the default when the user has not actively selected any other project.
   
   Timer precision edge case - If user switches or ends tasks within the same minute as the start time then delete this entry. Only time entries of more than one minute should be recorded.
   

3. さらに回答が必要な質問があると感じる場合は、繰り返し処理を続けます。

4. チャットの会話を開いたままにしておきます。Copilot は、次の一連の手順でこの会話を使用します。

Copilotコーディングエージェント

を使用してアプリケーションをビルドする

プランに十分な詳細が含まれていると思う場合:

1. Copilot チャット ビューで、[実装を開始] をクリックします。

   IDE に応じて、エージェントがすぐに開始されるか、プロンプトとして "実装の開始" が追加されます。これを送信する必要があります。

   チャット モードが "Plan" から "Agent" に切り替わります。

2. Copilot は、機密性の高いファイルの編集、コマンドの実行、Git へのファイルの追加などのアクションを実行するためのアクセス許可を要求します。

   •      **VS Code:****「許可」** をクリックします。
     

     

     または、[ 許可 ] ボタンの矢印をクリックし、ドロップダウン メニュー の [このセッションで許可 ] をクリックします。

   •      **JetBrains の場合:**
     

     • Git にファイルを追加するかどうかを確認するメッセージが表示されたら、[ もう一度要求しない ] チェック ボックスをオンにし、[ 追加] をクリックします。

     • コマンドの実行について確認するメッセージが表示されたら、[ 続行] をクリックします。

       

   Copilot は、アプリケーションの最初のバージョンの実装を開始します。

3. Copilot がインストールを完了せずに応答を完了した場合、または Copilot がストールしているように見える場合は、必要に応じて次の修復アクションを実行します。

   •      **コンポーネントがありません**
     

     必要なコンポーネント (Node.jsなど) をインストールする必要があるため、 Copilot が続行できないと表示された場合は、Copilot に、不足しているコンポーネントをダウンロードしてインストールするように求めるプロンプトを入力できます。

   •      **プロセスに長い時間がかかっている**
     

     一部の手順は、完了までに数分かかる場合があります。 忍耐強く待ち、エージェントがプロセスの各部分を完了するのを許可します。 アニメーション化されたスピナー アイコンは、エージェントが現在コマンドで動作していることを示します。

     たとえば、JetBrains IDE では次のようになります。

     

   •      **入力が必要**
     

     Copilot は、手動入力を必要とするコマンドを実行する場合があります。

     Copilot が停止したように見える場合は、IDE のターミナル ウィンドウで、コマンドがユーザーからのアクションを必要としているかどうかを確認してください。 Copilot は、ターミナルで応答の入力を待機してから、処理を続行します。

   •      **エラー メッセージ**
     

     アプリケーションの開発中にエラー メッセージが表示された場合は、チャット プロンプト ボックスにエラー メッセージをコピーし、Copilot に質問して問題を解決します。

     メモ

     この方法で Copilot を反復処理し、ブラウザーで表示できる動作するアプリケーションが用意されるまで、問題をデバッグして修正するように求める必要がある場合があります。

   •      **Copilot の応答が停止しているように見える**
     

     スピナー アイコンが応答で表示されているが、数分待機し、ターミナルで入力が不要であることを確認した後、何も起こっていない場合は、会話を停止して再起動できます。

     チャット ビューの下部にある [キャンセル] ボタンをクリックします。 たとえば、VS Code では次のようになります。

     

     次に、プロンプトを入力します。

     Copilot prompt

     Your previous response stalled. Try again, picking up from where you left off.
     

4. 通常、コーディング プロセスの終了に向けて、Copilot は、アプリケーションの信頼されていない Web ページを開くアクセス許可を要求します。

   

   これに対するアクセス許可を付与します。

5. エージェントがアプリケーションの作業を完了すると、チャット パネルに構築された内容の概要が表示されます。 通常、実行中のアプリケーションへのリンクが提供されます。

   タイム トラッカー アプリケーションは、IDE のブラウザー タブに表示される場合もあります。 これは、ページが使用可能であることを確認するのに役立ちます。 ただし、現実的なユーザー エクスペリエンスを確認するには、常に既定のブラウザーでアプリケーションを確認する必要があります。

   チャット パネルのリンクをクリックして、既定のブラウザーでアプリケーションを開きます。

   Copilotのチャット応答にリンクが表示されない場合は、エージェントがアプリケーションのデプロイに取り組んでいる可能性があるため、数分待ちます。 リンクがまだ表示されていない場合は、Copilot に表示するよう依頼することができます。

   Copilot prompt

   Confirm the implementation is complete. If so, give me a link to the running application.
   

6. Copilot からの最後のメッセージに、実行中のアプリケーションへのリンクを指定するのではなく、アプリケーションを起動する手順 ( npm startの実行など) が示されている場合は、Copilot にコマンドを実行して、正常に完了したことを確認してください。 例えば次が挙げられます。

   Copilot prompt

   Run npm start for me and confirm everything is working
   

   Copilot がすべてのコマンド自体を実行できない場合は、ターミナルにコピーして貼り付けることができるコマンドが提供されます。

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

1. アプリケーションの Web ページを表示します。

   Copilot によって作成された時間追跡アプリケーションの例を次に示します。

   
   

   メモ

   Copilot が生成するアプリケーションは、上記の例とまったく異なって見える場合があります。

2. アプリケーションを使用してみてください。 いくつかのプロジェクトとタスクの選択を追加し、タスクの追跡時間を開始します。

3. このアプリケーションの最初のドラフトを試してみると、変更する必要がある 2 つまたは 3 つの最も重要なことをメモしておきます。 以降の手順では、これらの修正に取り組みます。 今のところ、変更したいすべてのものに時間を費やさないでください。 最初に修正する必要がある最も差し迫ったものを特定するだけです。 後のプロセスで、すべてが望む通りに動作し、見えるように調整する時間があります。

4. アプリケーションが読み込まれない場合、またはエラーが表示された場合は、チャット プロンプト ボックスに問題を記述し、エラー メッセージをコピーして貼り付け、Copilot に依頼して問題をデバッグして修正します。

5. アプリケーションの最初のドラフトを確認し、少なくとも基本的な方法で実行されることを確認したら、IDE に戻ります。

6.        _
          **オプション**: Copilot が作成しているコードの種類を十分に理解している場合。_ Copilot が変更したファイルをエディターに表示し、変更をレビューします。 必要に応じて、独自の変更を行うことができます。
   

7. Copilot チャット ビューで、[保持] (VS Code の場合) または [すべて承認] (JetBrains IDEs の場合) をクリックして、変更内容を承認し、エディターから差分行を削除します。

   これで、機能とユーザー インターフェイスを改善および拡張するために繰り返し実行できるアプリケーションの基本バージョンが作成されました。

8. 変更を Git にコミットします。

   Copilot が行った変更が気に入らないと判断した場合に備えて、以前のバージョンに簡単に戻れるようにするため、各イテレーションが成功するたびに変更をコミットすることを常にお勧めします。

9. 開いているエディターのタブをすべて閉じますが、同じチャットの会話で作業を続けるために、Copilot チャット ビューは開いたままにしておきます。

変更の反復処理

1. 初期バージョンを git にコミットした後、アプリケーションに変更を加え、サイトを確認したときにメモした内容の 1 つを修正できます。

   たとえば、実装ではタスクがprojectに関連付けられている可能性があるため、別のprojectを選択しても、1 つのproject用に作成されたタスクは表示されません。 これを変更して、任意のプロジェクトに使用できるタスクを作成できるようにするには、Copilot のエージェントモードのままで、同じ会話に別のプロンプトを入力します。 次のようなプロンプトを使用できます。

   Copilot prompt

   Tasks should not be tied to projects in the user interface, as they currently are. When the user selects a project, allow them to choose any currently defined task. There should be a many-to-many relationship between projects and tasks.
   

2. 先ほどと同様に、Copilot から、コードに加える必要がある変更を承認するように求められる場合があります。 [ 承認 ] または [続行] をクリックします。

3. Copilot で変更が完了したら、ブラウザーに戻り、ページを更新します。

4. 変更されたアプリケーションを確認し、変更が正しく実装されていないかどうかを Copilot に伝えます。

   修正が必要な複数のものを見つけることができますが、Copilot が一度に 1 つのことに集中できるようにするには、各プロンプトを 1 つのタスクに制限し、必要に応じて、問題が修正されるまで一連のプロンプトと応答でこれを繰り返す必要があります。 次に、変更する次の手順に進みます。

5. Web ページのレイアウトに問題がある場合 (重なっている要素や、要素が不適切に配置されている場合など)、スクリーンショットを撮り、チャットに貼り付けて、次のようなプロンプトを入力できます。

   Copilot prompt

   This part of the web page looks bad. Fix it.
   

6. 変更が十分に実装されたら、[ 保持 ] または [ すべて受け入れる ] をクリックして変更をコミットします。

7.        _
          **省略可能**:_ 作業方法に応じて、たとえば開発チームで作業している場合、この時点で、または重要な変更を加えるたびに、プルリクエストを作成することを決定できます。 これにより、他のユーザーがコードを操作できるように、変更をレビューしてリポジトリの既定のブランチにマージすることができます。
   

8. アプリケーションの反復処理を続行します。

   たとえば、アプリに別のスタイルのユーザー インターフェイスを提供できます。 この場合、エージェント モードのまま、Copilot に次のように指示できます。

   Copilot prompt

   I don't like the look of the user interface. Suggest some alternative web UI libraries I could choose to give the app a more formal, business-like appearance.
   

   Copilot は、UI ライブラリを一覧表示します。

9. ライブラリのいずれかを選択し、Copilot に依頼して使用します。 例えば次が挙げられます。

   Copilot prompt

   Alter the user interface to use Bootstrap 5. I want the app to look like a professionally designed business application.
   

   Copilot は、選択したユーザー インターフェイス ライブラリを使用するように、アプリケーションを作り直します。

10. アプリケーションの変更された外観に問題がなければ、結果を確認し、変更をコミットします。

11. タイム トラッカー アプリケーションの一般的な要件は、タイムシートを出力できることです。 たとえば、請負業者の場合は、請求書と共にタイムシートを送信する必要がある場合があります。 それでは、PDF を生成する機能を追加しましょう。

    次のプロンプトを使います。

    Copilot prompt

    Add a button to the user interface which generates a PDF timesheet for the work the user has tracked today. The timesheet should show the total time spent on task for each of the defined project for which data has been recorded today. Under this show the total time spent on each project. Then show the total time spent on each task irrespective of projects. Finally show a chronological lists of tasks performed during the day with the time spent on each.
    

アプリケーションの例

Copilot を使って時間トラッカーを構築、拡張、改善した後、アプリケーションは次のようになるでしょう。

ソフトウェアプロジェクトの改善

1. Copilot は、テストを追加して実行することで、projectの堅牢性を高めるのに役立ちます。 テストは、バグがコードベースに入るのを防ぐのに役立ちます。 エージェント モードでは、Copilot を起動するように指示することが可能です。

   Copilot prompt

   Add a comprehensive suite of tests for this application. These should include unit tests, integration tests, component tests, database tests, and end-to-end tests. Locate the tests in a `tests` directory. Run the tests and fix any problems that are identified.
   

2. projectには常に README ファイルを作成することをお勧めします。 README では、projectの概要を説明し、アプリケーションを使用するための手順を示す必要があります。 Copilot に依頼して、README ファイルの作成や更新を行うことができます。

   Copilot prompt

   Add or update a README.md file. This should provide an introduction to the application, describing its primary use and highlighting its features. It should give easy to follow user instructions for using the application in the browser. It should provide admin instructions, explaining how to deploy the application. Finally it should give an overview of the technologies used to build the application and some basic information for developers on how to maintain the code and extend the application.
   

3. アプリケーションの初期コードをリポジトリに追加したので、Copilot のカスタム命令ファイルを追加する必要があります。 カスタム指示ファイルを使用すると、リポジトリ固有のガイダンスや実装の設定を提供することで、リポジトリにおける Copilot の応答を向上させることができます。 カスタム命令ファイルを追加するには:

   •      **VS Code で、** チャット ビューの上部にある [Configure Chat]\(チャットの構成\) 歯車アイコンをクリックし、[ **Generate Chat Instructions]\(チャット命令の生成**\) をクリックします。
     

   •      **JetBrains IDE:** エージェント モードの Copilot チャット で、次のようなプロンプトを送信します。
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI coding agents.
     
     Discover essential knowledge for immediate productivity:
     - Architecture: major components, service boundaries, data flows, and structural decisions
     - Developer workflows: builds, tests, debugging commands
     - Project conventions that differ from common practices
     - Integration points and cross-component communication
     
     Guidelines:
     - Merge intelligently if file exists
     - Write ~20-50 concise lines with markdown structure
     - Include specific codebase examples
     - Focus on THIS project's approaches, not generic advice
     - Document discoverable patterns, not aspirational patterns
     - Reference key files/directories that exemplify important patterns
     

4. 指示ファイルを確認します。 手順にさらに詳細が必要な場合は、手動でファイルに追加して保存できます。 たとえば、ファイルにこれに関する命令がまだ含まれていない場合は、テストの実行に関する命令を追加できます。

   Text

   ## Running tests
   
   Always run the complete test suite after completing a batch of code changes, to ensure the changes do not break or adversely affect any part of the application. Fix any test failures and then run the tests again to verify the fix.
   

次のステップ

• このprojectの反復を続け、タイム トラッカーを改善します。
• 同じ手法を使用して、別のアプリケーションを作成します。
• コードを自分で記述せずにアプリケーションを作成する別の方法について説明します。 「GitHub Spark について」を参照してください。