xDev Asia

ゴーストテキスト補完、タブで受け入れる、サイクル提案、複数行補完。次の編集の提案 (NES) — 次の編集を予測します。提案のナビゲーション、部分的な承認、キーボードショートカット。提案の品質を最適化するためのヒント。

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

パート 1: Vibe コーディングプラットフォームと GitHub Copilot

xdev.asia

1. インライン提案とは何ですか?

インライン提案 (ゴーストテキスト) は GitHub Copilot の中核機能です。コードを入力すると、Copilot はコードの次のセクションを次の形式で自動的に提案します。 ゴーストテキスト エディターに直接表示されます。

Bạn gõ:    function calculateTax(income) {
Ghost text: ░░ const taxRate = income > 50000 ? 0.3 : 0.2;
            ░░ return income * taxRate;
            ░░}

副操縦士の分析 コンテキスト 適切な提案をするために周りに:

ファイル名、プログラミング言語
現在行の上のコメント
ファイルに書かれたコード
他のファイルがエディタで開かれている
インポートステートメント、関数シグネチャ

2. インライン提案の使用

2.1.承認と拒否

操作	ショートカット macOS	ショートカット Windows/Linux
すべての提案を受け入れる	`タブ`	`タブ`
提案を拒否する	`Esc`	`Esc`
一つ一つの言葉を受け入れる	`コマンド+→`	`Ctrl+→`
各行を受け入れます	`Cmd+Shift+→`	`Ctrl+Shift+→`

2.2.多くの提案を順番に実行する

Copilot は多くの場合、さまざまな提案をします。ゴーストテキストの上にマウスを置くと、ナビゲーションコントロールが表示されます。

操作	ショートカット macOS	ショートカット Windows/Linux
次の提案	`オプション+]`	`Alt+]`
まずは提案	`オプション+[`	`Alt+[`

2.3.部分的に受け入れる — 重要なテクニック

部分承認 提案の一部だけを取得し、入力を続けると、Copilot が希望する方向に再提案します。

// Ghost text suggest: const result = data.filter(item => item.active).map(item => item.name);
// Bạn accept "const result = data.filter(" bằng Cmd+→ vài lần
// Rồi gõ tiếp: item => item.price > 100
// Copilot sẽ suggest phần còn lại phù hợp với logic mới

これは技術的なものです ステアリング。ステアリング — 盲目的に受け入れるのではなく、AI をあなたの好みに合わせて導きます。

3. 次の編集提案 (NES)

NES はより高度です — Copilot 次にどこを編集する必要があるかを予測する 加えた変更に基づいて。

例: 変数の名前を変更する

// Bạn vừa đổi tên biến ở dòng 5: userName → displayName
// NES tự động highlight và suggest đổi tên ở dòng 12, 18, 25
// Dòng 5:  const displayName = user.name;     ← bạn vừa edit
// Dòng 12: console.log(displayName);          ← NES suggest edit này
//                       ^^^^^^^^^^^
// Nhấn Tab để accept, Copilot tự nhảy đến dòng tiếp theo cần edit

例: パラメータの追加

# Bạn vừa thêm parameter 'currency' vào function definition
def format_price(amount, currency):   # ← vừa thêm currency
    # NES suggest cập nhật body function để sử dụng currency
    return f"{currency} {amount:,.2f}"
NES cũng suggest cập nhật tất cả function calls
format_price(100, "USD")  # ← NES suggest thêm argument

NESの電源を入れる

{
  "editor.inlineSuggest.edits.enabled": true
}

4. 複数行の補完

Copilot は、関数、クラス、またはコードのブロック全体を提案できます。

// Bạn gõ comment mô tả:
// Function to validate email address using regex

// Copilot suggest toàn bộ function:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

複数行の提案をより適切にするためのヒント:

明確に説明的なコメントを書く Enterを押す前に
関数/変数に意味のある名前を付けます — 副操縦士は名前を読んで意図を理解します
関連ファイルを開く — Copilot は開いているタブのコンテキストを使用します
最初にテストを書く — Copilot はテストを読み取り、予想される動作を理解します

5. コメント駆動開発

インライン提案を使用した Vibe コーディングの効果的なパターン:

# 1. Viết comment mô tả intent
# Read CSV file, group by category, calculate average price per category,
# sort by average price descending, and return top 5

# 2. Nhấn Enter → Copilot sinh toàn bộ implementation
import pandas as pd

def get_top_categories(csv_path: str, top_n: int = 5) -> pd.DataFrame:
    df = pd.read_csv(csv_path)
    result = (df.groupby('category')['price']
              .mean()
              .sort_values(ascending=False)
              .head(top_n)
              .reset_index()
              .rename(columns={'price': 'avg_price'}))
    return result

6. より良い提案のためにコンテキストを最適化する

6.1.開いているファイルは提案の影響を受けます

副操縦士は単語のコンテキストを確認します タブを開く。関連ファイルを開いて、Copilot がコードベースを理解できるようにします。

Tab 1: models/User.ts          ← Copilot biết User schema
Tab 2: services/UserService.ts ← Đang viết, suggest dựa trên User model
Tab 3: tests/user.test.ts      ← Copilot hiểu expected behavior

6.2. import ステートメントは適切なコンテキストです

# Viết imports trước → Copilot biết bạn dùng thư viện nào
from fastapi import FastAPI, HTTPException, Depends
from sqlalchemy.orm import Session
from pydantic import BaseModel
Bây giờ Copilot sẽ suggest code theo FastAPI patterns

6.3.型の注釈により、より正確な提案が得られます

// Với type → suggestion chính xác
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}
function filterProducts(products: Product[], minPrice: number): Product[] {
// Copilot biết chính xác structure và suggest phù hợp
}

7. インライン提案が効果的でないのはどのような場合ですか?

複雑なドメイン固有のロジック — 代わりにチャット/エージェントを使用してください
文脈がありません — 新しいファイルは空で、インポートやコメントはありません
コードが間違ったパターンで書かれている — 副操縦士は間違ったパターンを続行します
ファイル間の依存関係 — Copilot のコンテキストウィンドウは限られています

経験則: インライン提案は次のような場合に適しています 単一ファイルの増分編集。マルチファイル機能の場合は、次を使用します。 エージェントモード (レッスン 5)。

8. 練習問題

ファイルの作成 練習.ts そして練習してください:

機能を説明するコメントを書く → Enter キーを押す → 提案を受け入れる
関数の署名を入力 → Copilot に本文を提案させる
部分的な受け入れ (Cmd+→) を試して提案を操作してください
複数の候補を循環します (Option+]/[)
変数の名前を変更する → NES が提案する編集を他の場所で確認してください

// Bài tập 1: Viết comment, nhấn Enter
// Function to convert temperature from Celsius to Fahrenheit

// Bài tập 2: Viết signature, để Copilot suggest body
function sortByDate(items: Array<{date: string, title: string}>)

// Bài tập 3: Viết test function, để Copilot suggest test cases
describe('sortByDate', () => {
  it('should

9. まとめ

特長	説明	いつ使用するか
インライン提案	入力時に自動的にゴーストテキストが表示される	毎日のコード、定型文
部分的に受け入れる	各単語/行を受け入れる	希望に応じて提案を操作する
ファミコン	次の編集位置を予測する	名前の変更、パラメータの追加、リファクタリング
複数行	機能全体を提案する	明確なコメント・署名がある場合
コメント主導型	コメントを書く→コードを取得	複雑なロジックの説明

次の曲はカバーになります インラインチャットとスマートアクション — エディター内でターゲットを絞った編集とリファクタリングを行うための強力なツール。

レッスン 3: インラインの提案と次の編集の提案 — スマート コードの提案