BlazorでのWebアプリケーション開発手法１【C#】B20_OnInitialized

前回のB19では OnParametersSet を扱いました。今回はコンポーネントの初期化処理を書く場所である OnInitialized を扱います。

Microsoftドキュメントで確認する

Microsoft Learn の「ASP.NET Core Razor コンポーネントのライフサイクル」ページを開き、OnInitialized（および非同期版の OnInitializedAsync）の項目を確認します。URLはボーナスレクチャーに記載されています。

図1　Microsoft Learn「ASP.NET Core Razor コンポーネントのライフサイクル」ページ

ドキュメントには、OnInitialized と OnInitializedAsync は「コンポーネントの初期化にのみ使用」し、パラメータ値やパラメータ値の変更に依存しない初期化処理はこれらのメソッドで行う、と説明されています。一方、パラメータ値やその変更がコンポーネントの状態に影響する場合は、代わりに OnParametersSet（または非同期版）を使用する、とされています。

図2　「コンポーネントの初期化（OnInitialized{Async}）」の解説部分

Clearメソッドを作ってOnInitializedから呼び出す

実演用に、計測値・計測日時・計測場所をそれぞれ初期状態の文字列へ戻す Clear メソッドを MeasurePage.razor に新規追加します。

private void Clear()
{
    _measureValue = "計測ボタンを押してください";
    _measureDate = "---";
    _measureArea = "---";
}

図3　Clearメソッドの実装

このメソッドを起動時に呼びたい場合、@codeブロック内で protected override void On と入力すると、IntelliSenseの候補に OnInitialized() や OnInitializedAsync() などのオーバーライド候補が表示されます。

図4　「protected override on」と入力した際のIntelliSense候補一覧

候補から OnInitialized() を選択して自動生成し、中で Clear() を呼び出すよう実装します。

protected override void OnInitialized()
{
    Clear();
}

図5　OnInitializedからClear()を呼び出す実装

実行すると、OnInitialized が動くタイミングで Clear が呼ばれるため、計測画面を開いた時点で計測値・計測日時・計測場所が初期値（「計測ボタンを押してください」「—」「—」）で表示されることを確認できます。

時間のかかる初期化処理は非同期版を使う

起動時にデータベース検索など時間のかかる処理を行う場合は、非同期版の OnInitializedAsync を使います。同様にIntelliSenseの候補から選択すると、既定の実装（base.OnInitializedAsync() を返すだけの雛形）が自動生成されます。

protected override Task OnInitializedAsync()
{
    return base.OnInitializedAsync();
}

図6　OnInitializedAsyncのIntelliSenseによる自動生成コード

サンプルプロジェクト標準の Weather.razor では、実際にこの OnInitializedAsync を使って非同期の読み込みをシミュレートしています。中では await Task.Delay(500) によって、時間のかかる処理を行っている想定のコードが書かれています。

図7　Weather.razorのOnInitializedAsync実装（Task.Delayで非同期読み込みをシミュレート）

初期化処理は、メモリ上の値を入れ替えるだけのような処理であれば同期版（OnInitialized）でよく、ファイルアクセスなどすぐに結果が返ってこない可能性がある処理であれば非同期版（OnInitializedAsync）を使う、という使い分けになります。

コンストラクタは基本的に使わない

Razorコンポーネントには通常のC#と同じようにコンストラクタも書けますが、基本的には使いません。理由は、コンストラクタが動く時点ではコンポーネントの初期化に必要な設定（依存性の注入やパラメータの設定）がまだ完了していないためです。

これを確認するため、@inject ディレクティブで NavigationManager を Navi という名前で注入するコードを追加し、コンストラクタと OnInitialized の両方にブレークポイントを設置してデバッグ実行します。

@inject NavigationManager Navi

図8　コンストラクタで停止した時点ではNaviがnullであることを確認

計測画面を開くと、まずコンストラクタでブレークし、この時点で Navi の値を確認すると null になっています。続行すると OnInitialized でブレークし、この時点では Navi に値（RemoteNavigationManager のインスタンス）がすでに入っていることが確認できます。

図9　OnInitializedで停止した時点ではNaviに値が入っていることを確認

つまり、コンストラクタの時点ではまだ依存性の注入などの準備が整っておらず、OnInitialized（またはその非同期版）に来た段階で初めて準備が整うため、初期化処理はコンストラクタではなく OnInitialized 側で行う必要があります。

参考：コンストラクタの引数で受け取る方法

Injectの仕組みだけで言えば、コンストラクタの引数として NavigationManager を受け取る書き方も可能です。この場合も依存性注入によって値を取得できますが、基本的には推奨されません。

public MeasurePage(NavigationManager navi)
{
}

図10　コンストラクタの引数でNavigationManagerを直接受け取る例

さらに、コンストラクタには非同期版が存在しないため、その意味でも初期化処理は OnInitialized もしくは OnInitializedAsync のどちらかを使うようにします。

まとめ：コンポーネントの初期化は OnInitialized（同期）または OnInitializedAsync（非同期）で行う。パラメータの値やその変更に応じた処理は OnParametersSet（またはその非同期版）を使う。コンストラクタは依存性の注入やパラメータの設定が完了する前に動くため、初期化処理には使わない。