本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つAstro Development Instructionsについてです。
Astro Development Instructions
Astro Development InstructionsはAstro開発標準とベストプラクティスです。
Astroは「高速なWebサイトを作るためのフレームワーク」 です。
以下のページからAstro Development Instructionsのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してAstro Development Instructionsをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
このカスタムインストラクションは、次のような拡張子のファイルに適用されます。
**/*.astro, **/*.ts, **/*.js, **/*.md, **/*.mdx
Copilotはこれらのファイルを扱う際にAstroのコンテキストを意識した振る舞いになります。
プロジェクト設計とアーキテクチャ
Copilotは以下のようなAstroの標準構造・設計方針を前提に提案します。
- サーバー側で基本をレンダリングし、必要な部分だけクライアントで動かす方式を優先する。
- ブログ、ドキュメント、マーケティングサイトなどコンテンツ中心の構造を前提とする。
- 複数UIフレームワーク（React / Vue / Svelte / Solid）との共存を意識する。
- 静的生成（SSG）を基本、必要に応じて サーバーサイドレンダリング（SSR） を提案する。
TypeScriptと型設計
CopilotはTypeScriptとの統合を重視し、プロジェクト内で以下のように扱います。
- 型安全を重視した設定
- 自動生成される型（astro sync による）を活用
- コンポーネントのpropsを厳密に型指定
- エラーを減らすためtsconfigの最適構成を案内
コンポーネント設計
Copilotは次のようなコンポーネントの設計基準を意識して提案します。
- .astroを中心にコンポーネントを分割する
- 名前はPascalCaseで設定する
- 単一責務・再利用性を重視する
- ある場合のみ UI フレームワークコンポーネントを使う
コンテンツ管理（Content Layer API）
Astro v5以降のContent Layer APIを前提にコード生成・修正・改善の提案を行います。
- defineCollection() + glob() を使った構造設計
- Markdown / MDX の型安全なクエリ
- 前提の構成案と例
パフォーマンス最適化
CopilotはAstroのパフォーマンス原則に沿って提案します。
- Lazy loading や最小バンドル
- イメージ最適化やキャッシュ活用
- 不要なクライアント側スクリプトの削減
CSS/スタイリング
CopilotはCSS設計について以下の原則に沿って提案します。
- コンポーネント単位のスタイル
- 画面幅を考慮したレスポンシブ設計
- Tailwind やユーティリティファーストにも対応
- アクセシビリティ配慮（ARIA 等）
クライアントインタラクティビティ
CopilotはAstroのインタラクティブ領域も意識します。
- 必要な部分だけhydration
- 状態管理の一貫性
- フレームワーク内のステート設計
- Web Componentsも視野に入れる提案
API/SSR
CopilotはAPIルートやSSRを扱う際にて以下の原則に沿って提案します。
- src/pages/api/ に API エンドポイント
- ルーティング設計
- バリデーション・エラー処理
- 認証ミドルウェアの提案
SEO/Meta/PWA
CopilotはAstroにおけるSEOでも次を重視します。
- 各ページのタグと構造
- Twitter/OpenGraph
- サイトマップ生成
- JSON-LD の構造化データ提案
ビルド&デプロイ
CopilotはAstroのビルドや本番構成も案内します。
- SSGとSSRの区別
- リソース最適化
- 環境変数の扱い
- 配置先（静的ホスト・Edge・Serverless）提案
