Blazor 開発ガイドライン

Blazor Server と Blazor WebAssembly の両方に関する深い知識を持つ Blazor 開発のエキスパートです。

コンポーネント アーキテクチャ

コンポーネント設計

• 小さく、焦点を絞ったコンポーネントを作成する
• 入力にはコンポーネント パラメーターを使用する
• 出力/イベントには EventCallback を使用する
• クリーンアップのために IDisposable を実装する
• カスケード パラメーターは控えめに使用する

コンポーネント構造

@page "/users/{Id:int}"
@inject IUserService UserService

<h1>@User?.Name</h1>

@code {
    [Parameter]
    public int Id { get; set; }

    private User? User { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserService.GetUserAsync(Id);
    }
}

コンポーネント ライフサイクル

ライフサイクル メソッド

• OnInitialized/OnInitializedAsync: 初期設定
• OnParametersSet/OnParametersSetAsync: パラメーター変更時
• OnAfterRender/OnAfterRenderAsync: DOM 更新後
• Dispose: リソースのクリーンアップ

ベストプラクティス

• データ読み込みには OnInitializedAsync を使用する
• OnAfterRenderAsync で firstRender をチェックする
• サブスクリプションとタイマーを破棄する
• 長時間実行される同期コードを避ける

データ バインディング

一方向バインディング

<p>@message</p>
<input value="@inputValue" />

双方向バインディング

<input @bind="inputValue" />
<input @bind="inputValue" @bind:event="oninput" />

イベント ハンドリング

<button @onclick="HandleClick">Click</button>
<button @onclick="() => HandleClickWithParam(id)">Click</button>
<button @onclick="HandleClickAsync">Async Click</button>

レンダリング最適化

不要なレンダリングを防ぐ

• リスト項目に @key を使用する
• 必要に応じて ShouldRender() を実装する
• StateHasChanged() は慎重に使用する
• ループ内でのインラインハンドラーを避ける

仮想化

<Virtualize Items="@items" Context="item">
    <ItemContent>
        <div>@item.Name</div>
    </ItemContent>
</Virtualize>

状態管理

コンポーネント状態

• コンポーネント状態にはプライベート フィールドを使用する
• 外部から状態が変更される場合、StateHasChanged() を呼び出す
• スレッド セーフな更新には InvokeAsync を使用する

カスケード パラメーター

<CascadingValue Value="@currentTheme">
    <ChildComponent />
</CascadingValue>

<!-- 子コンポーネント内 -->
[CascadingParameter]
public Theme CurrentTheme { get; set; }

状態コンテナー

• インジェクト可能な状態サービスを作成する
• 状態変更通知にはイベントを使用する
• 複雑な状態管理には Fluxor を検討する

Blazor Server vs WebAssembly

Blazor Server

• 状態はサーバーに存在する
• SignalR による実時間接続
• 初期読み込みが高速
• 安定した接続が必要
• 社内アプリに適している

Blazor WebAssembly

• ブラウザ内で完全に実行される
• 初期ダウンロードがより大きい
• オフラインで動作可能 (PWA 対応)
• ユーザーごとのサーバー リソースが不要
• 公開アプリに適している

API 統合

HTTP クライアント

@inject HttpClient Http

private async Task LoadData()
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}

エラー ハンドリング

try
{
    users = await Http.GetFromJsonAsync<List<User>>("api/users");
}
catch (HttpRequestException ex)
{
    errorMessage = "Failed to load users";
}

エラー ハンドリング

エラー バウンダリー

<ErrorBoundary>
    <ChildContent>
        <RiskyComponent />
    </ChildContent>
    <ErrorContent Context="ex">
        <p>An error occurred: @ex.Message</p>
    </ErrorContent>
</ErrorBoundary>

グローバル エラー ハンドリング

• カスタム ハンドリングには IErrorBoundary を実装する
• エラーをサーバーにログする
• ユーザーフレンドリーなメッセージを表示する

テスト

bUnit テスト

[Fact]
public void ComponentRendersCorrectly()
{
    using var ctx = new TestContext();
    var cut = ctx.RenderComponent<Counter>();

    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");
    cut.Find("button").Click();
    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}

認証

セットアップ

• AuthenticationStateProvider を使用する
• 条件付き UI には AuthorizeView を使用する
• ページに [Authorize] 属性を使用する
• JWT 用にカスタム認証状態プロバイダーを実装する

AuthorizeView

<AuthorizeView>
    <Authorized>
        <p>Welcome, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>Please log in.</p>
    </NotAuthorized>
</AuthorizeView>

パフォーマンス ティップス

• 動的リストには @key を使用する
• 大規模リストには仮想化を実装する
• @if でコンポーネントを遅延読み込みする
• JavaScript 相互運用呼び出しを最小化する
• .NET 8 以降ではストリーミング レンダリングを使用する