GitHub Copilotプロンプトファイル完全ガイド - .prompt.mdで再利用可能なAI指示を作成する

1
2
3
4
5
6
7
8

---
name: create-react-component
description: Reactコンポーネントの雛形を生成します
argument-hint: コンポーネント名を入力してください（例：UserProfile）
agent: agent
model: claude-sonnet-4
tools: ['editFiles', 'codebase']
---

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

---
name: create-react-component
description: Reactコンポーネントの雛形を生成します
---

# Reactコンポーネント作成

以下の要件に従って、Reactコンポーネントを作成してください：

## 必須要件
- 関数コンポーネントとして実装する
- TypeScriptで型定義を行う
- Propsはinterfaceで定義する
- 名前付きエクスポートを使用する

## ファイル構成
- コンポーネント本体: `${input:componentName}.tsx`
- スタイル: `${input:componentName}.module.css`
- テスト: `${input:componentName}.test.tsx`

## 参照
- プロジェクトのコーディング規約: [coding-standards.md](../../docs/coding-standards.md)

1
2
3
4
5
6
7
8
9

# ディレクトリ構造
your-project/
├── .github/
│   └── prompts/
│       ├── create-component.prompt.md
│       ├── code-review.prompt.md
│       └── generate-tests.prompt.md
├── src/
└── package.json

1
2
3

## コンポーネント情報
- コンポーネント名: ${input:componentName}
- 配置ディレクトリ: ${input:directory:src/components}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# セキュリティレビュー

以下のコードのセキュリティレビューを行ってください。

#tool:codebase を使用して、関連するファイルを検索し、
#tool:githubRepo で同様のパターンがないか確認してください。

## チェック項目
- SQLインジェクションの脆弱性
- XSS攻撃の可能性
- 認証・認可の問題

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

---
name: react-component
description: TypeScript + CSS Modulesを使用したReactコンポーネントを生成
argument-hint: コンポーネント名（例：UserCard）
agent: agent
tools: ['editFiles']
---

# Reactコンポーネント生成

以下の仕様でReactコンポーネントを作成してください。

## コンポーネント名
${input:componentName}

## 要件
- TypeScriptで実装する
- 関数コンポーネントとして作成する
- CSS Modulesでスタイリングする
- Propsはinterfaceで定義し、`${input:componentName}Props`という名前にする
- 名前付きエクスポートを使用する
- JSDOCコメントを付与する

## 出力ファイル
1. `src/components/${input:componentName}/${input:componentName}.tsx`
2. `src/components/${input:componentName}/${input:componentName}.module.css`
3. `src/components/${input:componentName}/index.ts`（re-export用）

## コード例
```tsx
import styles from './${input:componentName}.module.css';

interface ${input:componentName}Props {
  // Propsを定義
}

/**
 * ${input:componentName}コンポーネント
 */
export const ${input:componentName}: React.FC<${input:componentName}Props> = (props) => {
  return (
    <div className={styles.container}>
      {/* 実装 */}
    </div>
  );
};
```

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---
name: security-review
description: セキュリティ観点でのコードレビューを実施
agent: ask
---

# セキュリティコードレビュー

選択されたコードまたは現在のファイルについて、セキュリティ観点でレビューを行ってください。

## レビュー対象
${selection}

## チェック項目

### 入力検証
- ユーザー入力が適切にサニタイズされているか
- SQLインジェクションの脆弱性がないか
- パストラバーサルの危険性がないか

### 認証・認可
- 認証チェックが適切に行われているか
- 認可（権限）チェックが漏れていないか
- セッション管理が適切か

### データ保護
- 機密情報がログに出力されていないか
- 暗号化が必要なデータが平文で保存されていないか
- APIキーやシークレットがハードコードされていないか

### XSS対策
- ユーザー入力がエスケープなしで出力されていないか
- dangerouslySetInnerHTML等の使用が適切か

## 出力形式
- 問題の深刻度（Critical / High / Medium / Low）
- 該当箇所（行番号）
- 問題の説明
- 推奨される修正方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

---
name: create-api-endpoint
description: RESTful APIエンドポイントを生成
argument-hint: リソース名（例：users, products）
agent: agent
tools: ['editFiles', 'codebase']
---

# APIエンドポイント生成

以下のリソースに対するRESTful APIエンドポイントを作成してください。

## リソース名
${input:resourceName}

## 生成するエンドポイント
- GET /${input:resourceName} - 一覧取得
- GET /${input:resourceName}/:id - 個別取得
- POST /${input:resourceName} - 新規作成
- PUT /${input:resourceName}/:id - 更新
- DELETE /${input:resourceName}/:id - 削除

## 要件
- Express.jsのルーターとして実装する
- TypeScriptで型安全に実装する
- バリデーションにはzodを使用する
- エラーハンドリングを適切に行う
- 既存のプロジェクト構造に合わせる

## 参照ファイル
既存のAPIルーターを参考にしてください：
- [既存のルーター例](src/routes/)

## 出力ファイル
1. `src/routes/${input:resourceName}.ts` - ルーター定義
2. `src/controllers/${input:resourceName}Controller.ts` - コントローラー
3. `src/schemas/${input:resourceName}Schema.ts` - zodスキーマ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

---
name: generate-tests
description: 現在のファイルに対するテストコードを生成
agent: agent
tools: ['editFiles', 'codebase']
---

# テストコード生成

現在開いているファイルに対するテストコードを生成してください。

## 対象ファイル
${file}

## テストフレームワーク
- Jest
- React Testing Library（Reactコンポーネントの場合）

## 要件
- describeブロックでテスト対象を明確にする
- 各テストケースは「should」で始まる説明を付ける
- 正常系と異常系の両方をテストする
- エッジケースを考慮する
- モックは必要最小限にする

## 出力ファイル
`${fileDirname}/${fileBasenameNoExtension}.test.ts`

## テスト構成の例
```typescript
import { functionName } from './${fileBasenameNoExtension}';

describe('functionName', () => {
  describe('正常系', () => {
    it('should return expected result when given valid input', () => {
      // テスト実装
    });
  });

  describe('異常系', () => {
    it('should throw error when given invalid input', () => {
      // テスト実装
    });
  });
});
```

1
2
3
4
5
6

{
  "chat.promptFilesLocations": {
    "prompts": true,
    "custom-prompts": true
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

## 出力例
以下のような形式で出力してください：

```typescript
export interface UserProps {
  id: string;
  name: string;
  email: string;
}
```

1
2
3
4

## コーディング規約
以下のガイドラインに従ってください：
- [コーディング規約](../../.github/copilot-instructions.md)
- [TypeScript規約](../../.github/instructions/typescript.instructions.md)

1
2
3
4
5
6
7
8
9

---
name: frontend-review
description: フロントエンドコードのレビュー
agent: frontend-expert
---

# フロントエンドコードレビュー

フロントエンド専門家として、以下のコードをレビューしてください。