本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つBlazorについてです。
Blazor
BlazorはBlazorコンポーネントとアプリケーションパターンです。
BlazorはC#と.NETを使ってブラウザのUIを作れるWebフレームワークです。
C#、Razor、.NETを使ってフロントエンドを書きます。
以下のページからBlazorのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してBlazorをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
インストラクションが読み込まれると、CopilotはBlazor開発者としてのベストプラクティスに沿ってコード生成・レビュー・説明を行うようになります。
具体的には以下のような行動になります。
Blazorコンポーネント設計を重視
BlazorのUIはコンポーネントベースです。
Copilotは次の設計を前提に提案します。
以下のコンポーネント分割を行います。
Pages/ Components/ Shared/
例エバ以下のようなUIを小さなコンポーネントに分割する設計を推奨します。
UserList.razor UserCard.razor UserDetail.razor
Razor + C#の正しい書き方
BlazorではRazor構文を使います。
例えば以下のようなコードです。
<h3>@Title</h3>
@code {
private string Title = "Hello Blazor";
}Copilotは以下を整理したコードを提案します。
- Razor構文
- C#ロジック
- コンポーネントのstate
C# コーディング規約を守る
このインストラクションでは一般的なC#コーディング規約も強制されます。
例えば以下の規約です。
- 型が明確でない場合varを使わない
- usingは整理する
- {}を必ず付ける
- コードの可読性を優先
状態管理とイベント処理のベストプラクティス
BlazorではUI状態管理が重要です。
Copilotは以下のようなパターンを推奨します。
EventCallback
<button @onclick="IncrementCount">Click</button>
StateHasChanged
UI更新のタイミング管理を行う。
DI（依存性注入）
@inject HttpClient Http
API連携（ASP.NET Web API）
BlazorアプリはよくREST APIと連携します。
Copilot は以下を使ったデータ取得コードを提案します。
- HttpClient
- JSON serialization
- DTO
例えば以下のようなコードです。
var users = await Http.GetFromJsonAsync<List<User>>("api/users");
UIとアクセシビリティ
Copilotは次の点も意識します。
- Semantic HTML
- ARIA 属性
- フォームバリデーション
- 入力コンポーネント
パフォーマンス最適化
CopilotはBlazorのパフォーマンスにも配慮します。
例えば以下の対応を行ってUIのパフォーマンス問題を減らします。
- 不要な再レンダリング防止
- @key 使用
- 非同期処理最適化
テストと保守性
Copilotは長期運用できるBlazorアプリ設計とするため、以下を考慮したコード提案を行います。
- コンポーネントテスト
- UI テスト
- 再利用可能コンポーネント
