メニュー
ASP.NET Core Blazor (.NET 10) の最新機能・ベストプラクティスに基づいてコンポーネントやページを生成・レビュー・リファクタリングするスキル。 Blazor コンポーネント、ページ、レイアウト、JS interop、フォームバリデーション、状態管理の実装時に使用すること。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/runceel/DotnetSampleApp --skill blazor-dotnet10コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
.NET 10 file-based apps を使ったスクリプト実行スキル。Copilot がデータ処理・ファイル操作・簡易ツールなどの スクリプト的な処理を行う際に、C# の file-based app として実行する方法を定義する。 使い捨ての処理はファイルを作成せず stdin パイプで実行し、再利用可能な処理のみ .cs ファイルとして保存すること。
クリーンアーキテクチャに基づく設計指針スキル。プロジェクト構成、レイヤー分離、依存関係の方向、テスタビリティ確保の原則を定義する。 新規プロジェクト作成、機能追加、リファクタリング、テスト作成時に使用すること。
C# 14 / .NET 10 の最新文法に基づいてコードを生成・レビュー・リファクタリングするスキル。 C# のコード生成、レビュー、リファクタリング、新規ファイル作成時に使用すること。
SOC 職業分類に基づく
SKILL.md を表示中
| name | blazor-dotnet10 |
| description | ASP.NET Core Blazor (.NET 10) の最新機能・ベストプラクティスに基づいてコンポーネントやページを生成・レビュー・リファクタリングするスキル。 Blazor コンポーネント、ページ、レイアウト、JS interop、フォームバリデーション、状態管理の実装時に使用すること。 |
あなたは ASP.NET Core Blazor (.NET 10) のエキスパートである。 .NET 10 の最新 Blazor 機能を必ず使え。旧来の書き方は禁止。
ターゲットは net10.0。C# 14 の文法も併用すること。
Blazor Web App では全コンポーネントにレンダーモードを適用する。
| モード | ディレクティブ | 場所 | インタラクティブ |
|---|---|---|---|
| Static SSR | なし | Server | ❌ |
| Interactive Server | @rendermode InteractiveServer | Server | ✅ |
| Interactive WebAssembly | @rendermode InteractiveWebAssembly | Client | ✅ |
| Interactive Auto | @rendermode InteractiveAuto | Server→Client | ✅ |
// サービス登録
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
// エンドポイント
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode();
// レンダリング場所の検出
RendererInfo.Name // "Static" | "Server" | "WebAssembly" | "WebView"
RendererInfo.IsInteractive // true = インタラクティブ描画中
AssignedRenderMode // InteractiveServerRenderMode | InteractiveWebAssemblyRenderMode | InteractiveAutoRenderMode | null
インタラクティブアプリ内の静的ページには [ExcludeFromInteractiveRouting] を使う。
@attribute [ExcludeFromInteractiveRouting]
[PersistentState] による宣言的状態永続化プリレンダリング時の状態永続化に [PersistentState] 属性を使う。
PersistentComponentState を手動で注入・購読するコードは書くな。
@* ❌ 旧: IDisposable 実装、手動 RegisterOnPersisting、TryTakeFromJson *@
@* ✅ 新 *@
@page "/movies"
@inject IMovieService MovieService
@code {
[PersistentState]
public List<Movie>? MoviesList { get; set; }
protected override async Task OnInitializedAsync()
{
MoviesList ??= await MovieService.GetMoviesAsync();
}
}
サービスの状態永続化は RegisterPersistentService を使う。
Router の NotFoundPage パラメーターを使う。<NotFound> レンダーフラグメントは .NET 10 で非推奨。
<Router AppAssembly="@typeof(Program).Assembly"
NotFoundPage="typeof(Pages.NotFound)">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router>
NavigationManager.NotFound() で 404 をトリガー:
JS オブジェクトのコンストラクター呼び出し・プロパティ読み書きが可能。
// コンストラクター呼び出し
var classRef = await JSRuntime.InvokeConstructorAsync("jsInterop.TestClass", "Blazor!");
// プロパティ読み取り
var text = await classRef.GetValueAsync<string>("text");
// プロパティ書き込み
await JSRuntime.SetValueAsync("jsInterop.testObject.num", 30);
同期版 (IJSInProcessRuntime): InvokeConstructor, GetValue<T>, SetValue<T>。
ネストオブジェクト・コレクション項目のバリデーションをサポート。
// Program.cs
builder.Services.AddValidation();
.razor ではなく C# クラスファイルで定義すること。[ValidatableType] 属性を付与すること。@* RowClass: 行ごとのスタイル適用 *@
<QuickGrid Items="movies" RowClass="GetRowCssClass">
...
</QuickGrid>
@code {
private string? GetRowCssClass(Movie item) =>
item.IsArchived ? "row-archived" : null;
}
HideColumnOptionsAsync() でカラムオプション UI を閉じる。
サーバーサイド Blazor で接続喪失時のセッション状態を永続化。 ブラウザタブのスロットリング、モバイルアプリ切り替え、ネットワーク断で有効。
Blazor Web App で <ResourcePreloader /> を使い WASM アセットをプリロード。
<head>
...
<base href="/" />
<ResourcePreloader />
...
</head>
Blazor スクリプト (blazor.web.js / blazor.server.js) は自動圧縮・フィンガープリント付きの静的 Web アセットとして配信される。
<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException> で Static SSR 時の NavigationException を抑制 (.NET 10 テンプレートのデフォルト)。NavLinkMatch.All 使用時にクエリ文字列・フラグメントを無視。カスタムマッチングは ShouldMatch をオーバーライド。
テンプレートに ReconnectModal コンポーネントが追加。再接続状態変更イベント components-reconnect-state-changed を使用可能。
WebAssembly で HttpClient レスポンスストリーミングがデフォルト有効。
ReadAsStreamAsync() は BrowserHttpReadStream を返す (同期操作不可)。
オプトアウト: <WasmEnableStreamingResponse>false</WasmEnableStreamingResponse>。
コンポーネントライフサイクル、ナビゲーション、イベント処理、Circuit 管理の計測・トレースが利用可能。
SetParametersAsync
→ OnInitialized / OnInitializedAsync
→ OnParametersSet / OnParametersSetAsync
→ BuildRenderTree (Render)
→ OnAfterRender(firstRender) / OnAfterRenderAsync(firstRender)
OnAfterRender{Async} はプリレンダリング中に呼ばれない。OnAfterRenderAsync の完了後に追加レンダーサイクルは発生しない。Dispose / IAsyncDisposable でアンフックすること。@code ブロックはコンポーネント末尾に置くこと。[Parameter] / [CascadingParameter] で宣言。EventCallback<T> を使うこと。.razor.cs) に分離すること。.razor.css を使うこと。@attribute [StreamRendering] を使うこと。NuGet・プロジェクト作成・ソリューション管理は全て dotnet CLI で行う。.csproj / .slnx の手動編集禁止。
dotnet new blazor # Blazor Web App
dotnet new blazorwasm # Standalone Blazor WebAssembly
dotnet sln add/remove <project>
dotnet add package <pkg>
PersistentComponentState の手動注入・購読 → [PersistentState] 属性<NotFound>...</NotFound> レンダーフラグメント → NotFoundPage パラメーターIJSRuntime.InvokeAsync("eval", ...) → 適切な JS モジュールと新 API.razor 内でのモデル型定義 → C# クラスファイルで定義blazor.boot.json の直接参照 → フレームワークにインライン化済みProperties/launchSettings.json での環境設定 (WASM) → <WasmApplicationEnvironmentName>