blazor

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 と 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 以降ではストリーミングレンダリングを使用します