القائمة
ASP.NET Core Blazor (.NET 10) の最新機能・ベストプラクティスに基づいてコンポーネントやページを生成・レビュー・リファクタリングするスキル。 Blazor コンポーネント、ページ、レイアウト、JS interop、フォームバリデーション、状態管理の実装時に使用すること。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
.NET 10 file-based apps を使ったスクリプト実行スキル。Copilot がデータ処理・ファイル操作・簡易ツールなどの スクリプト的な処理を行う際に、C# の file-based app として実行する方法を定義する。 使い捨ての処理はファイルを作成せず stdin パイプで実行し、再利用可能な処理のみ .cs ファイルとして保存すること。
クリーンアーキテクチャに基づく設計指針スキル。プロジェクト構成、レイヤー分離、依存関係の方向、テスタビリティ確保の原則を定義する。 新規プロジェクト作成、機能追加、リファクタリング、テスト作成時に使用すること。
C# 14 / .NET 10 の最新文法に基づいてコードを生成・レビュー・リファクタリングするスキル。 C# のコード生成、レビュー、リファクタリング、新規ファイル作成時に使用すること。
| 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>