クエリ駆動の UI 初期化 — 画面間導線で「地味に効く」テクニック

なぜ書いたか

業務系の画面では「新規登録」「変更登録」「抹消登録」のように 同じ画面で複数の処理種別を切り替える ことがよくあります。遷移元から「次の画面ではこの種別で立ち上げてほしい」を渡せると、ユーザーがいちいち選び直さなくて済みます。Blazorで素朴にやろうとすると、初期化と再描画のタイミング管理で詰まりやすいので、そのコツの話です。

やったこと

URLクエリで初期化情報を渡し、Blazor側の [SupplyParameterFromQuery] で受け取るシンプルな構成にしました。

@page "/{receiption}"
@code {
    [SupplyParameterFromQuery(Name = "applyClass")]
    public string? ApplyClass { get; set; }

    protected override async Task OnInitializedAsync()
    {
        ApplyInitialState(ApplyClass);
    }

    protected override void OnParametersSet()
    {
        // 再遷移・パラメータ変更時にも反映する
        ApplyInitialState(ApplyClass);
    }
}

ポイントは OnInitializedAsync だけでなく OnParametersSet 側にも同じ初期化を入れることです。これがないと、同じ画面に 再遷移したときに古い状態のまま になる事故が出ます。

なぜ再適用が必要か

Blazor Serverでは、同じコンポーネントへの再遷移はインスタンスを保持したままパラメータだけが変わるケースがあります。OnInitializedAsync は最初の1回しか走らないので、2回目以降の遷移では古い状態が残ります。再描画ではなく 再パラメータ適用 が必要です。

なので初期化ロジックは「何度呼ばれても破綻しない」ように書く必要があります。冪等な初期化、つまり：

• 既に同じ状態が適用されていれば何もしない
• 状態が変わっていれば、上書きではなくリセットしてから適用する
• 副作用（APIコール）は必要なときだけ走らせる

わかったこと

• クエリ駆動の初期化はシンプルなのに、操作負荷の削減効果が大きい。ユーザーが「遷移直後に毎回同じ操作をする」のを1ステップ省ける
• ただし「動く」と「再入時に壊れない」は別の話。OnParametersSet 側のケアを忘れると地雷になります
• AIに画面を作らせると OnInitializedAsync だけで済ませがちなので、レビュー観点に「再遷移時の挙動」を入れると安全です

次にやること / 未解決の問題

• クエリパラメータの命名が画面ごとに揺れている。applyClass, mode, type などのバリエーションがあるので、命名ガイドを書きたい
• 再遷移時に途中入力をどう扱うか（クリアするか保持するか）は画面ごとに方針が違う。ルール化したい