Chuyển đến nội dung chính

レッスン 5: エージェント モード — AI にコードを作成させます

エージェントとは何か、エージェントの動作方法 (計画 → 実行 → 検証)、エージェント ループ、チャット ビュー (Ctrl+Cmd+I)、エージェントと質問モードと計画モードの比較。権限レベル: デフォルト、承認のバイパス、自動操縦。実践: Agent を使用して最初の Web アプリを構築します。

💻 プログラミング — レッスン 5 レッスン 5: エージェント モード — AI にコード自体を記述させる あなた

GitHub Copilot を使用した Vibe コーディング: 基本から高度まで

パート 2: エージェント モード — AI が自動的にコードを作成します

xdev.asia

1. エージェントとは何ですか?

GitHub Copilot では、1 つ エージェント 現役のAIアシスタントです 自律的に 完全なプログラミングタスクを完了します。数行のみを提案するインライン提案とは異なり、エージェントには次の機能があります。

  • 📋 計画を立てる (タスクをステップに分割します)
  • 📝 複数のファイルを作成および編集する 同時に
  • 💻 ターミナルコマンドを実行する (パッケージのインストール、ビルド、テスト)
  • 🔄 自己修正 エラーが発生した場合(自己修正)
  • 🔧 ツールを使用する (ファイルの読み取り、検索、Web、拡張機能)

これが基礎です リアルバイブコーディング — リクエストを記述すると、エージェントがそれをすべて実行します。

2. エージェント ループ — エージェントの仕組み

┌─────────────────────────────────────────────────┐
│              AGENT LOOP                          │
├─────────────────────────────────────────────────┤
│                                                  │
│  User Prompt: "Build a REST API for blog posts"  │
│           ↓                                      │
│  ┌─── PLAN ───┐                                  │
│  │ 1. Setup project                              │
│  │ 2. Create models                              │
│  │ 3. Create routes                              │
│  │ 4. Add middleware                             │
│  │ 5. Test                                       │
│  └────────────┘                                  │
│           ↓                                      │
│  ┌─── EXECUTE ──┐                                │
│  │ Create files  │ ←─ Tool: createFile           │
│  │ Write code    │ ←─ Tool: editFile             │
│  │ Run commands  │ ←─ Tool: runInTerminal        │
│  └──────────────┘                                │
│           ↓                                      │
│  ┌─── VERIFY ───┐                                │
│  │ Check errors  │ ←─ Tool: getErrors            │
│  │ Run tests     │ ←─ Tool: runInTerminal        │
│  │ Self-correct  │ → Quay lại EXECUTE nếu fail   │
│  └──────────────┘                                │
│           ↓                                      │
│  ✅ Complete → User review                       │
│                                                  │
└─────────────────────────────────────────────────┘

3. 3 つの組み込みエージェント

3.1.エージェント (デフォルト)

変更の計画と実装、ファイルの作成、コマンドの実行、ツールの使用を自律的に行うことができます。これは、Vibe コーディングに最もよく使用されるエージェントです。

3.2.計画

構造化された実施計画を作成しますが、 コードを書かないでください。計画に問題がなければ、エージェントに実行を引き渡します。

3.3.尋ねる

コード、概念、コードベースに関する質問に答える ファイルを変更しないでください。コーディングする前に理解する必要がある場合に使用します。

Chọn agent trong Chat view:

┌────────────────────────────┐
│  Agent ▼                   │  ← Click dropdown
├────────────────────────────┤
│  ● Agent    (implement)    │
│  ○ Plan     (plan only)    │
│  ○ Ask      (Q&A only)     │
│  ○ Reviewer (custom)       │
└────────────────────────────┘

4. 権限レベル — コントロールエージェントの権限

エージェントはコマンドを実行し、ファイルを変更する必要があります。自律性のレベルはユーザーが決定します。

レベル 説明 ときに適しています
デフォルトの承認 書き込み/実行ツールの確認を求める 初めて使用する、製品コード
承認をバイパスする すべてのツール呼び出しを自動承認する 信頼できるタスク、プロトタイプ
オートパイロット (プレビュー) 自動承認 + 質問の自動応答 完全に自律的なサイドプロジェクト

⚠️ セキュリティ上の注意: オートパイロット レベルでは、エージェントは任意のコマンドを実行できます。ローカル マシン上の信頼できるプロジェクトにのみ使用されます。

5. ハンズオン: エージェント モードで Web アプリを構築する

ステップ 1: チャット ビューを開く

プレス Ctrl+Cmd+I (macOS) または Ctrl+Alt+I (Windows/Linux)

ステップ 2: エージェント モードを選択する

ドロップダウンから選択します 「エージェント」

ステップ 3: プロンプトを書き込む

Create a modern expense tracker web application with:
- Add expenses with amount, category, and date
- View expenses in a table with sorting
- Dashboard with summary charts (total by category)
- Filter expenses by date range and category
- Local storage to persist data
- Modern dark theme UI with smooth animations
- Responsive design for mobile

Use vanilla HTML, CSS, and JavaScript. No frameworks needed.

ステップ 4: エージェントの動作を観察する

エージェントは次のことを行います:

  1. 要件を分析する
  2. ファイル構造を作成します。 インデックス.html、 スタイル.css、 アプリ.js
  3. HTML セマンティック構造を記述する
  4. ダークテーマとレスポンシブで CSS を作成する
  5. CRUD ロジック、チャート、フィルター用の JavaScript を作成する
  6. プレビューを実行できます

ステップ 5: 確認して同意する

ファイルごとの差分を表示 → を押す 「保管してください」 受け入れるか、変更をリクエストします。

ステップ 6: 反復する

会話を続けて機能を追加します。

Add an export to CSV button and a monthly budget feature with progress bar

6. エージェントセッション管理

各タスクは 1 回で実行されます セッション。セッション 別途:

  • セッションリスト: チャットパネルにすべてのセッション (アクティブ、一時停止、完了) を表示します
  • 複数のセッション: さまざまなタスクに対して複数のセッションを並行して実行します。
  • セッションを再開する: 古いセッションに戻って反復を続行します
  • 変更を確認する: セッション内のすべてのファイル変更を表示します

7. エージェントが使用するツール

エージェントは組み込みツールにアクセスできます。

ツール 機能
読む ワークスペース内のファイルを読み取る
編集ファイル ファイルの作成/編集
runInターミナル シェルコマンドを実行する
検索します。検索 コードベース内を検索する
リストディレクトリ ディレクトリ内のファイルを一覧表示する
getErrors コンパイル/lint エラーが発生する
ウェブ ウェブを検索する
用途 シンボルの参照を検索する

8. エージェント モードのベスト プラクティス

✅ すべきこと:

  • 説明がわかりやすくて詳しい: 技術スタック、パターン、制約が含まれます
  • 大きなタスクを小さな部分に分割する: 「すべてをビルドする」のではなく、最初に「認証を追加」し、後で「CRUD を追加」します。
  • 各ステップを確認してください: 生成されたエージェント コード、特に重要なロジックを読み取ります。
  • 最初に /init を使用してください: エージェントが規則を理解できるようにカスタム指示を作成します。
  • やり直すのではなく反復する: セッションを最初からやり直すのではなく続行します

❌ 次のことを行ってはなりません:

  • 実稼働コードにオートパイロットを使用する
  • ファイルをレビューせずにすべてを受け入れる
  • プロンプトが曖昧すぎます:「改善してください」
  • エージェントが知らないうちにパッケージをインストールできるようにする
  • エラー メッセージをスキップ - 読み取られてエージェントに提供されます

9. エージェントモードでのデバッグ

エージェントは次のことができるため、デバッグに特に強力です。

  1. エラーメッセージを読んでください
  2. 複数のファイルにわたる根本原因を追跡する
  3. 修正を適用する
  4. テストを再実行して確認します
// Prompt ví dụ:
The test in tests/auth.test.ts is failing with "TypeError: Cannot read properties
of undefined (reading 'token')". Find the root cause and fix it.

10. まとめ

コンセプト 重要なポイント
エージェント 自律型AIアシスタント:計画→実行→検証
3 つの組み込みエージェント Agent(実行)、Plan(計画)、Ask(Q&A)
権限レベル デフォルト → バイパス → 自動操縦 (自律性の向上)
エージェントループ タスクが完了するまで実行と検証を繰り返します
セッション 各タスク = 1 セッション、並列実行可能
ベストプラクティス プロンプトをクリア + コードを確認 + 反復

次の記事ではさらに深く掘り下げていきます プランエージェント — コーディング前の計画手法により、AI 出力をより適切に制御できるようになります。