初心者向けGitHub Copilotアプリ入門：差分、ターミナル、ブラウザーの使い方GitHub Copilot app for Beginners: Using the diff, terminal, and browser
匿名の公開いいねです。記事の保存・お気に入りではなく、Featured、Top 3、重要度、掲載順位には影響しません。仕組みとプライバシーAnonymous public likes are reactions, not saved articles or bookmarks. They do not affect Featured, Top 3, importance, or listing order.How it works and privacy
- GitHub Copilotアプリは、差分、ターミナル、ブラウザーの各パネルを内蔵し、変更の確認、コードの実行、結果の検証をアプリ内で完結できます。
- エージェントの作業を確かめたい初心者に役立ちます。
The GitHub Copilot app adds built-in diff and terminal panels alongside a browser, helping beginners review agent edits, run code, and verify results in one place.
本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (github.blog) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (github.blog).
要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.
GitHub Copilotアプリでは、エージェントがコードに加えた変更の確認、コードの実行、結果の検証を、アプリから離れずに進められる。差分、ターミナル、ブラウザーを組み込みパネルとして並べ、一連の作業を一か所で扱える点が特徴だ。
組み込みパネル
従来は、エージェントの作業を確認するために、エディター、ターミナル画面、Webブラウザーを行き来する必要があった。GitHub Copilotアプリでは、これらに相当する作業を担うパネルが横並びで用意される。変更内容を調べ、コードを動かし、その結果を確かめるというAIコーディングの流れを、アプリ内で完結できる。
差分パネル
差分とは、変更前と変更後を比較したものだ。差分パネルには、追加、削除、変更された行が明示される。追加部分は緑色、削除部分は赤色で強調されるため、エージェントがコードのどこを編集したのかを確認できる。
確認後の判断も利用者が行う。変更を受け入れるほか、コメントを残したり、Copilotに追加の変更を依頼したりできる。エージェントの編集内容がそのまま最終決定になるのではなく、利用者が内容を見たうえで選択する仕組みとなっている。
ターミナル
ターミナルパネルは、変更されたコードを実行するために使う。差分を確認したあと、そのままアプリ内でコードを動かせるため、実行のために別のターミナル画面へ移る必要がない。確認と実行を連続して進められる構成だ。
ブラウザー
ブラウザーパネルでは、コードを実行した結果を検証する。差分パネルで変更点を確認し、ターミナルパネルで実行し、ブラウザーで結果を見るという三つの工程が同じアプリ内にそろう。エージェントの作業を順に確かめたい初心者にも、各工程の役割を追いやすい構成となっている。
The AI coding loop
The GitHub Copilot app brings code review, execution, and result verification into one place, helping beginners check an agent’s work without leaving the app. These steps are presented side by side as built-in diff, terminal, and browser panels.
When an agent changes code, the next steps are to review the changes, run the code, and see what changed. Previously, completing those jobs meant moving between an editor, a terminal window, and a web browser. Keeping them together in the Copilot app makes it simpler to complete this AI coding loop and evaluate the agent’s work.
The diff panel
The diff panel provides a before-and-after comparison of the code. It shows exactly which lines were added, removed, or changed. Additions are highlighted in green, while deletions are highlighted in red.
This view is designed to make the agent’s edits clear before any final decision is made. After examining the changes, you can accept them, leave comments, or ask Copilot to make further changes. The user remains responsible for deciding what happens to the proposed edits.
That review step is central to checking an agent’s work: rather than treating its changes as final, the panel gives you a direct view of what was modified and several ways to respond.
Terminal and browser
The built-in terminal and browser panels cover the other parts of the process. The terminal lets the code-running step stay inside the Copilot app, while the browser supports checking the results there as well.
Together with the diff panel, these panels allow users to review agent edits, run code, and verify the outcome without repeatedly switching among separate windows. The three tasks remain distinct, but placing them side by side keeps the full process within the app.
ポコとTECHガイドPoko & TECH Guide
ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.
- ポコPoko確認・実行・検証の3つが、アプリ内だけでできるようになったんだね。これって大きいこと？So all three—reviewing, running, and verifying—can happen inside the app now. Is that a big change?
- TECHガイドTECH Guide作業の行き来が減る変化だね。以前はエディター、ターミナル、ブラウザーを移る必要があったけど、今は各パネルが並ぶんだ。It means less jumping between tools. Before, you had to switch among an editor, terminal, and browser; now those tasks sit side by side in the app.
- ポコPokodiffって、変更履歴みたいなもの？Is a diff kind of like a change history?
- TECHガイドTECH Guideここでのdiffは、変更前と変更後の比較だよ。追加は緑、削除は赤で、変わった行を確認できる。Here, a diff compares the code before and after. Added lines appear in green, deleted ones in red, so you can see what changed.
- ポコPokoぼくなら、エージェントに直してもらったら、差分を見てコードを動かし、ブラウザーで結果まで確かめたいな。I’d have the agent make an edit, check the diff, run the code, and then verify the result in the browser.
- TECHガイドTECH Guideその流れがアプリ内でできるよ。ただ、変更を受け入れるか、コメントするか、修正を頼むかの最終判断は自分でするんだ。That whole flow can stay in the app. But you still make the final call: accept the changes, leave comments, or ask Copilot to revise them.
