Chapter 21: GitHub Copilot 基本操作

21.1 インライン補完の使い方

Copilot の最も基本的な機能がインライン補完です。コードを書いている最中に、次のコードがグレーのテキストで自動的に提案されます。

キーボードショートカット

補完のトリガー

補完は自動的に表示されますが、表示されない場合は少し待つか、数文字追加入力してみてください。

// 例: ユーザーリストをメールアドレスでフィルタする
function filterByEmail(users, domain) {
  // ↑ ここまで書いて改行すると Copilot が補完を提案
  return users.filter(user => user.email.endsWith(`@${domain}`));
}

出典: VS Code 公式ドキュメント

TODO: あとで実際のスクリーンショットに置き換え - インライン補完がグレーテキストで表示されている状態

21.2 Copilot Chat で対話する

Copilot Chat はチャット形式で Copilot と対話できる機能です。 コードの説明を聞いたり、修正を依頼したり、新機能の実装を相談したりできます。

Chat の開き方

• VS Code 左サイドバーの吹き出しアイコン（Copilot Chat）をクリック
• またはコマンドパレットで Copilot Chat: Open Chat

インラインチャット

コードを選択した状態で Ctrl+I（macOS: Cmd+I）を押すと、エディタ内にインラインチャットが開きます。 選択範囲に対してピンポイントで指示を出せます。

よく使うチャットの指示

# 説明を求める
このコードが何をしているか日本語で説明してください

# テスト生成
この関数に対するユニットテストを書いてください

# リファクタリング
このコードをより読みやすくリファクタリングしてください

# バグ修正
このコードのバグを見つけて修正してください

# 型定義の追加
TypeScript の型定義を追加してください

出典: VS Code 公式ドキュメント

TODO: あとで実際のスクリーンショットに置き換え - Copilot Chat のサイドバーが開いている状態

21.3 コメント駆動開発

Copilot の真価が発揮されるのがコメント駆動開発です。 「何をしたいか」を日本語や英語のコメントで書くだけで、実装コードを生成してくれます。

基本パターン

# メールアドレスのバリデーション関数
# - "@" を含むか確認
# - ドメイン部分にドットがあるか確認
# - 先頭と末尾にスペースがないか確認
def validate_email(email: str) -> bool:
    # Copilot がここに実装を提案する

段階的に詳細を追加する

コメントが具体的であるほど、提案の精度が上がります。

// 1. シンプルなコメント（大まかな提案）
// ユーザーを作成する

// 2. より具体的なコメント（精度が上がる）
// ユーザーを作成し、データベースに保存する。
// 作成に失敗した場合は UserCreationError をスローする。
// 成功した場合は作成されたユーザーオブジェクトを返す。
async function createUser(name: string, email: string): Promise<User> {
  // Copilot の提案がより正確になる
}

関数シグネチャから補完

関数名や引数名から意図を読み取って補完することもできます。

function calculateDiscountedPrice(
  originalPrice: number,
  discountPercentage: number,
  maxDiscount: number
): number {
  // 関数名と引数名だけで適切な実装を提案することが多い
}

21.4 補完の受け入れ・修正・却下

部分的に受け入れる

Tab で全体を受け入れる代わりに、Ctrl+→（macOS: Cmd+→）で単語単位で受け入れられます。 「この部分は良いがその先は変えたい」という場合に便利です。

複数候補を確認する

1つの入力に対して複数の候補が生成される場合があります。 Alt+] / Alt+[ で候補を切り替えるか、Ctrl+Enter で「Copilot Completions」パネルを開いて全候補を一覧確認できます。

出典: VS Code 公式ドキュメント

TODO: あとで実際のスクリーンショットに置き換え - Copilot Completions パネルに複数候補が表示されている状態

却下して自分で書く

提案が期待と大きく異なる場合は Esc で却下してください。 却下した後、少し入力を追加してから再び待つと、異なる候補が提案されます。

21.5 Copilot が得意なこと・苦手なこと

得意なこと

• 定型的なコード: CRUD 操作、バリデーション、ユーティリティ関数
• テストコード: 既存の関数に対するテストケースの生成
• 変換・フォーマット処理: データ変換、文字列整形、配列操作
• よく知られたライブラリの使い方: React、Express、pandas など主要ライブラリ
• コメントの補完: JSDoc や型コメントの自動生成

苦手なこと

• 最新の情報: 学習データのカットオフ後にリリースされたライブラリ・API
• 固有のビジネスロジック: 自社特有のルールや仕様（コンテキストがない場合）
• 長い依存チェーン: 多数のファイルにまたがる複雑な処理
• 保証のある正確性: 提案されたコードが常に正しいとは限らない（必ず確認が必要）
• セキュリティ: 脆弱なコードを提案する場合がある（レビューは必須）

21.6 効果的な使い方のコツ

1. コメントを先に書く習慣をつける

実装の前にコメントで「何をするか」を記述する習慣をつけると、Copilot の精度が大きく上がります。

def process_orders(orders: list[Order]) -> dict:
    """
    注文リストを処理して集計結果を返す。

    Args:
        orders: 注文オブジェクトのリスト

    Returns:
        {
            "total": 合計金額,
            "count": 注文数,
            "by_status": ステータス別の注文数
        }
    """
    # ここまでコメントを書くと精度の高い補完が得られる

2. 既存のコードパターンを活用する

同じファイル内に似た関数が既にあれば、Copilot はそのパターンを学習して同じスタイルで補完します。

3. 提案を必ずレビューする

Copilot の提案を盲目的に受け入れないことが重要です。以下の点を必ず確認してください。

• ロジックが正しいか
• エッジケースが考慮されているか
• セキュリティ上の問題がないか（SQLインジェクション、XSSなど）
• 既存のコードスタイルと一致しているか

4. ファイルを整理しておく

Copilot は現在のファイルと関連ファイルをコンテキストとして使います。 コードが整理されていて、適切な命名がされているほど、提案の精度が上がります。

5. 段階的に使い分ける

まとめ

• Tab でインライン補完を受け入れ、Esc で却下
• Ctrl+I でインラインチャット、サイドバーで深い対話
• コメントを先に書く「コメント駆動開発」で精度を上げる
• 提案は必ずレビューする（正確さは保証されない）
• 得意・不得意を理解して使い分ける