概要
Github copilotを使って、ソースコードから概要を理解するコツについて記載する。
(AI初心者のため、まだまだこれからです！)
環境
・vscode
・拡張プラグイン：github copilot
コード構成
@workspace ワークスペース全体のコードの構成について教えて下さい
@workspace このプロジェクトの目的と主要な技術スタックは何ですか？」と尋ねることで、プロジェクト全体の概要を素早く把握できます。
Mermaid形式で出力
「ECサイトのログイン処理のシーケンス図をMermaid形式で出力してください。」
「このJavaScriptファイルの内容をフローチャートにし、Mermaidコードを生成してください。」
「商品、ユーザー、注文の3つのテーブルの関係を示すER図をMermaidで作成してください。」
```mermaid
sequenceDiagram
participant User
participant Frontend
participant Backend
User->>Frontend: ログイン情報入力
Frontend->>Backend: 認証リクエスト
Backend->>Backend: ユーザー認証処理
alt 認証成功
Backend-->>Frontend: 認証トークン
Frontend-->>User: ログイン成功
else 認証失敗
Backend-->>Frontend: エラーメッセージ
Frontend-->>User: ログイン失敗
end
```
/explain でのコード理解
全体像が把握できたら、気になるモジュールやファイルのコードを選択し、/explain コマンドでCopilotに説明を求めましょう。これにより、個別のコードがシステム全体でどのような役割を果たしているかを理解できます。
コマンド
GitHub Copilotには、@workspace以外にも、開発者のワークフローを効率化するための様々な機能があります。
スラッシュコマンド（/）
@workspaceがワークスペース全体を扱うのに対し、スラッシュコマンドは特定のタスクを素早く実行するためのショートカットです。GitHub Copilot Chatのプロンプト入力欄に / を入力すると、利用可能なコマンドのリストが表示されます。
| コマンド | 説明 |
|---|---|
| /explain | 選択したコードブロックの動作を説明します。 |
| /fix | 選択したコードの問題を特定し、修正案を提案します。 |
| /tests | 選択したコードに対して、ユニットテストを生成します。 |
| /doc | 選択したコードのドキュメント（コメント）を生成します。 |
| /simplify | 選択したコードをより簡潔にするための提案をします。 |
参考元
特になし