Blazor状態管理の基本:UserStateサービスの設計と活用方法|ASP.NET×Blazor入門 8.3

8.3 状態管理サービスの設計例

Blazorアプリにおいて、ユーザーの状態やアプリケーション内で共有したいデータを保持する方法として「状態管理サービス」がよく使われます。 特に、ScopedまたはSingletonライフタイムでサービスを登録し、DIを通じて注入・活用する方法が一般的です。

例:ユーザー状態を保持するUserStateサービス

たとえば、ログイン中のユーザー名を管理したい場合、以下のような状態管理クラスを作成します:


// UserState.cs
public class UserState
{
    public string? UserName { get; set; }

    public bool IsLoggedIn => !string.IsNullOrEmpty(UserName);
}
  

DIコンテナへの登録

Program.csまたはStartup.cs内で、AddScopedを使って登録します:


// Program.cs
builder.Services.AddScoped<UserState>();
  

コンポーネント側での使用

状態サービスは、任意のコンポーネントにインジェクトして利用できます:


@inject UserState UserState

@if (UserState.IsLoggedIn)
{
    <p>Welcome, @UserState.UserName!</p>
}
else
{
    <p>Please log in.</p>
}
  

状態の更新と再描画

状態が変更された際に、コンポーネントを再描画する必要があります。これは、 StateHasChanged()を呼び出すことで手動で行うか、イベントやObservableパターンで通知する方法もあります。

注意点:ページ遷移時の保持と破棄

  • Scopedサービスは、Blazor Serverではユーザーごとに保持されますが、WASMではアプリ全体で一つになります。
  • 必要に応じて、状態の初期化や破棄処理も検討しましょう。

状態管理サービスを使うことで、ページ間での状態共有や、コンポーネントをまたぐデータの一貫性を保つことができます。

次は、Blazor WebAssemblyとServerのアーキテクチャ的な違いを解説する 「第9章:Blazor WebAssemblyとServerの違い」へと進みます。

2025-05-06

下田 昌平

開発に関するインプットをアウトプットしています。