【Blazor】Blazorでクエリパラメータを初期チェックする方法

Blazor アプリケーションでクエリパラメータを受け取り、ページ表示前にその値をチェックしたい場面があります。しかし、適切なライフサイクルメソッドを使用しないと、パラメータが正常に取得できない問題が発生します。

問題の概要

Blazor ページでクエリパラメータを受け取っている際に、ページ表示前に値の妥当性をチェックしようとしました。しかし、パラメータの値が常にnullとして表示されてしまいます。

画面にバインドしている値を表示すると正常に表示されるのに、初期チェック時には取得できないという現象が発生しました。

原因

この問題の原因は、Blazor のコンポーネントライフサイクルにあります。クエリパラメータが割り当てられる前のタイミングで値をチェックしていたため、まだパラメータが設定されていない状態でした。

解決方法

正しいライフサイクルメソッドであるOnParametersSetAsyncを使用してパラメータをチェックします。

修正前のコード例

@page "/example"
@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Id { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // この時点ではまだクエリパラメータが設定されていない
        if (string.IsNullOrEmpty(Id))
        {
            // 常にここに入ってしまう
            NavigationManager.NavigateTo("/error");
        }
    }
}

修正後のコード例

@page "/example"
@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Id { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        // この時点でクエリパラメータが正しく設定されている
        if (string.IsNullOrEmpty(Id))
        {
            NavigationManager.NavigateTo("/error");
            return;
        }

        // パラメータを使用した処理を実行
        await LoadDataAsync();
    }

    private async Task LoadDataAsync()
    {
        // Idを使用してデータを読み込む処理
    }
}

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

Blazor コンポーネントには以下のようなライフサイクルがあります：

1. OnInitialized/OnInitializedAsync - コンポーネントの初期化時
2. OnParametersSet/OnParametersSetAsync - パラメータが設定された後
3. OnAfterRender/OnAfterRenderAsync - レンダリング後

クエリパラメータはOnParametersSetの段階で設定されるため、この時点でチェックを行う必要があります。

まとめ

Blazor でクエリパラメータを初期チェックする際は、適切なライフサイクルメソッドを使用することが重要です：

• OnInitializedAsyncではなくOnParametersSetAsyncを使用する
• パラメータの妥当性チェックを適切に実装する
• エラー時の適切なナビゲーション処理を行う

これらのポイントを押さえることで、安全で使いやすい Blazor アプリケーションを構築できます。

この記事が皆様のコーディングライフの助けになれば幸いです。

参考