カスタマイズ機能の実践
VS Codeのカスタマイズ機能に関する動画をいくつかご覧になったことがあるかもしれません。
プロンプトファイル、カスタム指示、エージェントスキル、カスタムエージェント、フックといった個々の機能は理解できても、それらを実際のプロジェクトで組み合わせて活用することで、真の理解が得られます。
本ガイドでは、ゼロからアプリを構築し、ワークフロー全体を通して複数のカスタマイズ機能を活用する方法を解説します。
前提条件
始める前に：VS Code Insidersがインストールされていること、GitHub CopilotとGitHub Copilot Chatの拡張機能が設定され、サインインしている必要があります。
プロジェクト：Repo Analyzer（リポジトリ分析ツール）
構築するアプリは「Repo Analyzer」です。
その目的はシンプルです。GitHubリポジトリのURLを受け取り、コードベースを分析して、プロジェクトの品質を1から10のスケールで評価します。
また、スコアを向上させるための推奨事項も提供し、開発者がどのような変更を行えばプロジェクトがより良くなるかを把握できるようにします。
機能の連携
このプロジェクトでは、いくつかのカスタマイズ機能を同時に使用します。
各機能がワークフローの特定の役割を担います。
- カスタムエージェント → アーケード風のビジュアルスタイルを適用
- エージェントスキル → 機能の変更に合わせてREADMEを自動更新
- カスタム指示 → SOLID原則とアクセシビリティ基準の適用を保証
- プロンプトファイル → 開いているファイルの冗長なコードを簡素化
- フック → 修正後のファイルを自動的にフォーマット
これにより、手動で繰り返し指示を出す必要がなくなり、時間を節約できます。
カスタムエージェントによるアプリ構築
まず、「Arcade App Builder」カスタムエージェントを選択します。
このエージェントは、プロジェクトの設計思想とアーキテクチャスタイルをすでに理解しています。Repo Analyzerアプリの作成を依頼すると、自動的にアーケード風のテーマが適用されます。
プロンプト： GitHubリポジトリのURLからコードを分析し、品質を1〜10で評価して改善案を提示するアプリを作成してください。
その結果、スタイリングと検証ロジックを備えた、動作するアプリの初版が完成します。
アプリのテスト
アプリが生成されたら、実際のレポジトリを使ってテストします。
例えば、GitHubプロジェクトのURLを入力すると、以下が返されます。
- 総合スコア
- 具体的な推奨事項
- ドキュメントや構造の改善案
これにより、最初から実用的なアプリとして活用できます。
READMEスキルのテスト
次に、「Update README」スキルをテストします。
アプリ作成時に、READMEを追加できます。
プロンプト： このプロジェクトのREADMEを作成してください。
その後、機能が追加または削除されると、スキルがREADMEを更新して変更を反映します。
例えば、ダークモード/ライトモード機能がREADMEに記載されていることを確認します。この機能を削除すると、READMEも自動的に更新され、該当機能への参照が削除されます。
プロンプト： アプリからダークモード/ライトモード機能を削除してください。
カスタム指示の検証
開発中、カスタム指示が自動的に適用されます。
明示的な指示がなくても、Copilotは以下の原則に従っていることを確認します。
- SOLID原則
これにより、定義済みの基準に従ってアプリが構築されていることが保証されます。
フックのテスト
ファイルが変更されると、フックがバックグラウンドで実行されます。
例えば、READMEのタイトルを変更した後、フックが追加の操作なしでファイルを自動的にフォーマットします。
プロンプト： READMEの名前を「Repo Analyzer」から「Fantastic Repo Analyzer」に変更してください。
これにより、変更が行われてもファイルがクリーンかつ一貫した状態に保たれます。
プロンプトファイルのテスト
最後に、「Simplify Code」プロンプトファイルを使用します。
このプロンプトは、現在開いているファイルを分析し、以下を探します。
- 冗長なコード
- デッドコード
- 簡素化の機会
その後、どのような変更が加えられたのか、その理由は何かが説明されます。
プロンプト： 開いているファイルのコードを簡素化してください。
これは、複数のファイルで繰り返し行う可能性のあるコードの簡素化において特に役立ちます。
これが重要な理由
このデモは、全体像を示しています。
基準への準拠、ドキュメントの更新、ファイルのフォーマット、コードの簡素化を毎回手動で依頼するのではなく、これらのシステムが自動的に連携して動作します。
その結果、以下の効果が得られます。
- ワークフローの高速化
- 繰り返しプロンプトの削減
- 一貫性のある出力
これは、以下へのシフトを表しています。
単発のプロンプト → 統合されたワークフロー
もはやAIを一度に一つのリクエストで使用するだけではありません。
開発中に複数のAIシステムが自動的に連携する環境を構築するのです。
挑戦してみよう
次はあなたの番です。
本ガイドで作成したRepo Analyzerアプリを構築し、使用したカスタマイズ機能を活用（または独自のものを作成！）して、アプリを拡張してみましょう。
アイデア
- 認証を使用してプライベートリポジトリのサポートを追加する
- コード品質、セキュリティ、パフォーマンスの問題に対する詳細な分析を追加する
- 複数のリポジトリを並べて比較する分析ダッシュボードを構築する
- スコアを向上させるためのコード例を含むAI生成の推奨事項を追加する
ワークフローの一部としてカスタマイズ機能を組み合わせて使用する
- カスタムエージェントを使用して一貫したデザインやアーキテクチャを維持する
- カスタム指示を使用してSOLIDなどのコーディング基準やアクセシビリティを強制する
- スキルを使用してドキュメントの更新などの反復タスクを自動化する
- フックを使用してバックグラウンドでファイルを自動的にフォーマットまたは検証する
- プロンプトファイルを使用して頻繁に行うタスクを効率化する
終了したら、各カスタマイズ機能がどのように反復作業を減らし、プロジェクト全体の一貫性を向上させたかを確認してください。
これらのシステムを組み合わせれば組み合わせるほど、ワークフローはより速く、より一貫したものになります。
ボーナス： 学んだ内容を共有したい場合は、作成したプロジェクトのGitHubリポジトリへのリンクをコメント欄に投稿し、何を行ったかの詳細をREADMEに含めてください。ぜひ見せていただければ幸いです。
ハッピーコーディング！