author-component について
BlazorのC#コンポーネントを作成するための開発スキルです。パラメーター、レンダリング、非同期処理、破棄に関する規則とパターンを示します。
主な機能
- 01パラメーターとイベント処理の規約
- 02読み込み、空、表示、エラーの各状態
- 03RenderFragmentとジェネリックコンポーネント
- 04単一ファイルとコードビハインドの指針
- 05非同期処理とデバウンスのパターン
- 06非同期破棄の実践
活用シーン
- 01一方向データフローのコンポーネント作成
- 02非同期更新とキャンセルの処理
- 03ロジック量に応じたコンポーネント構成の選択
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ dotnet/ skills --skill author-componentインストール後、Claude Code で/author-componentを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/async-programming-rules.mdbreaking-down-components.mdcomponent-disposal.md詳細
Blazor コンポーネントの作成
基本ルール
- データは
[Parameter]を通じて下方向に流します。イベントはEventCallback<T>を通じて上方向に流します(Action/Funcは使用しません)。 [Parameter]プロパティを変更しないでください。OnParametersSetでプライベートフィールドにコピーします。[Parameter] public T Prop { get; set; }を使用します。requiredやinitは使用しないでください(BL0007 が発生します)。- 必須パラメーターには
[EditorRequired]を使用します。 - 読み込み中、空、読み込み完了、エラーのすべての状態を、各状態に対する
@if/@elseで処理します。 - ループ内の繰り返し要素には
@keyを指定し、効率的に差分を検出できるようにします。 - コレクションパラメーターには
IEnumerable<T>ではなくIReadOnlyList<T>を使用します。
RenderFragment とジェネリック
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public RenderFragment<TItem>? RowTemplate { get; set; } // generic template
ジェネリックコンポーネントには @typeparam TItem を使用します。
ファイルのパターン
- 単一ファイル: ロジックが約 50 行未満の場合は、
@codeブロックを含む.razorを使用します。 - コードビハインド: ロジックが約 50 行を超える場合は、
partial classを含む.razorと.razor.csを使用します。
破棄
コンポーネントがサブスクリプション、タイマー、または CTS を所有する場合は、IDisposable ではなく IAsyncDisposable を実装します。
DisposeAsync では、サブスクリプションを解除(-=)し、CTS をキャンセルして、リソースを破棄します。StateHasChanged は呼び出さないでください。
非同期処理のパターン
- すべての非同期操作を
awaitします。.Result、.Wait()、Task.Run、ContinueWith、Thread.Startは使用しないでください。 - デバウンス:
Task.DelayとCancellationTokenSourceを使用します。古い CTS をキャンセルし、新しい CTS を作成して、遅延をawaitしてから処理を実行します。System.Threading.TimerやSystem.Timers.Timerは使用しないでください。 - ポーリング:
OnInitializedAsync内でawait Task.Delay(interval, token)を使ったループを実行します。これにより、同期コンテキスト上にとどまります。 - 外部イベント(
Action<T>):async voidハンドラーを使用し、await InvokeAsync(() => { state++; StateHasChanged(); })を呼び出してから、catchでDispatchExceptionAsyncを呼び出します。_ = InvokeAsync(...)は使用しないでください。 DisposeAsyncで CTS をキャンセルします。ObjectDisposedExceptionをキャッチしないでください。CTS のキャンセルを使用します。
禁止事項
[Parameter]にrequired/initを指定すること — 実行時に失敗します[Parameter]を変更すること —OnParametersSetでプライベートフィールドにコピーします- イベントに
Action/Funcを使うこと —EventCallback<T>を使用します - デバウンスに
Task.Run/.Result/.Wait()/タイマーを使うこと — デッドロックまたはスレッドプールへの処理の移行が発生します - インラインの
style属性 — CSS クラスまたはdata-*属性を使用します catch { throw; }—whenガードを使うか、例外をそのまま伝播させます- 過剰な作り込み:要求されていない ARIA、ラッパーの div、アクセシビリティ機能
_ = InvokeAsync(...)— 例外を握りつぶします。async voidとDispatchExceptionAsyncを使用します
コメント
Markdown 対応