コード補完を効果的に使おう
ストーリー
「Copilotはインストールしたか？ じゃあ実際にコードを書いてみよう」
中島先輩がVS Codeで新しいファイルを開いた。
「Copilotの補完をうまく使うにはコツがある。 コメントを先に書く、関数名を工夫する、コンテキストを整える -- この3つだ」
「コメントを先に書く？」
「コメントで"何をしたいか"を伝えると、Copilotは驚くほど正確なコードを生成する。 やってみればわかるよ」
コメント駆動のコード生成
基本テクニック: コメントで意図を伝える
typescript
// ユーザーの年齢が18歳以上かチェックするバリデーション関数
// 引数: birthDate (Date), 戻り値: boolean上記のコメントを書いた後、Enterを押すと、Copilotが以下のような関数を提案します:
typescript
const isAdult = (birthDate: Date): boolean => {
const today = new Date();
const age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
return age - 1 >= 18;
}
return age >= 18;
};コメントの書き方のコツ
| レベル | コメント例 | 補完品質 |
|---|---|---|
| 曖昧 | // 関数 | 低 |
| 基本 | // ソート関数 | 中 |
| 具体的 | // 配列をprice順に降順ソートする関数 | 高 |
| 詳細 | // Product[]をpriceで降順ソート。nullは末尾に配置。元配列は変更しない | 最高 |
関数名によるコード生成
Copilotは関数名からも意図を推測します。
typescript
// 関数名だけ書いてEnter
const formatCurrency = (Copilotの提案:
typescript
const formatCurrency = (amount: number, currency: string = 'JPY'): string => {
return new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency,
}).format(amount);
};効果的な関数名のパターン
typescript
// 動詞 + 名詞 の組み合わせが最も効果的
const validateEmail = ... // メールバリデーション
const fetchUserById = ... // ID指定のユーザー取得
const formatDateToJST = ... // 日本時間にフォーマット
const calculateTaxAmount = ... // 税額計算
const parseCSVToJSON = ... // CSV→JSON変換コンテキストの整え方
関連ファイルを開いておく
Copilotは開いているタブのファイルを参照します。
効果的なタブ構成の例:
タブ1: types.ts (型定義) ← Copilotが型を参照
タブ2: utils.ts (ユーティリティ) ← 共通関数を参照
タブ3: user.ts (今書いているファイル) ← ここで補完を利用
import文を先に書く
typescript
// import文がCopilotに使用ライブラリを伝える
import { z } from 'zod';
import { PrismaClient } from '@prisma/client';
import bcrypt from 'bcrypt';
// この時点でCopilotは「Zod + Prisma + bcrypt を使う」と理解
// 以降の補完でこれらのライブラリを活用したコードを生成する型定義を先に書く
typescript
// 型定義を先に書くと、その型に合った実装を提案してくれる
interface CreateUserInput {
email: string;
password: string;
name: string;
}
interface CreateUserOutput {
id: string;
email: string;
name: string;
createdAt: Date;
}
// ここで "const createUser = async (" と書くと、
// 上記の型を活用した関数を提案してくれる補完の受け入れ方
部分的な受け入れ
全てを受け入れる必要はありません。
全体を受け入れる: Tab
単語単位で受け入れる: Ctrl + → (VS Code)
行単位で受け入れる: 設定で変更可能
拒否する: Esc
次の候補を見る: Alt + ]
補完パネルで選ぶ
Ctrl + Enter で補完候補の一覧パネルを開き、複数の候補から最適なものを選択できます。
Copilotが効果を発揮するパターン
1. 繰り返しパターン
typescript
// 1つ目を手で書くと、2つ目以降はCopilotが推測
const routes = {
home: '/',
about: '/about',
// ここからCopilotが推測して補完
contact: '/contact',
blog: '/blog',
pricing: '/pricing',
};2. テスト記述
typescript
describe('calculateTotal', () => {
it('should return 0 for empty array', () => {
expect(calculateTotal([])).toBe(0);
});
// ここからCopilotがテストケースを提案
it('should calculate total for single item', () => {
expect(calculateTotal([{ price: 100, quantity: 2 }])).toBe(200);
});
});3. データ変換
typescript
// APIレスポンスをフロントエンド用の形式に変換
const mapApiResponseToUser = (response: ApiUserResponse): User => ({
// Copilotがフィールドのマッピングを推測
id: response.user_id,
name: response.full_name,
email: response.email_address,
createdAt: new Date(response.created_at),
});注意点: 補完を鵜呑みにしない
Copilotの補完で注意すべきこと:
1. セキュリティ
→ ハードコードされた値、脆弱なパターンが提案されることがある
2. パフォーマンス
→ 非効率なアルゴリズムが提案されることがある
3. 古いAPI
→ 非推奨のAPIを使ったコードが提案されることがある
4. ライセンス
→ 学習データ由来の類似コードが出力される可能性
対策: Tab を押す前に必ず内容を確認する
まとめ
| ポイント | 内容 |
|---|---|
| コメント駆動 | コメントで意図を伝えると高品質な補完が得られる |
| 関数名の工夫 | 具体的な動詞+名詞で意図を明確に |
| コンテキスト | 関連ファイルを開く、import文・型定義を先に書く |
| 受け入れ方 | 全体、部分、候補パネルの使い分け |
| 注意点 | 補完は必ず確認してから受け入れる |
チェックリスト
- コメント駆動のコード生成を実践できた
- 関数名でCopilotを誘導するテクニックを理解した
- コンテキストの整え方（型定義先行、関連ファイルオープン）を実践した
- 補完を鵜呑みにせず確認する習慣を理解した
次のステップへ
コード補完をマスターしたら、次はCopilot Chatの活用法を学びます。 エディタ内でAIと対話し、より複雑なタスクをこなす方法です。
推定読了時間: 30分