本文へスキップ
BecomeCoder

Blazorコース · 第6章 データとサービス連携 · レッスン20

依存性注入 ― @inject でサービスを受け取る

ローカル実施

導入

コンポーネントの中で毎回newしてサービスを作ると、差し替えもテストも難しくなります。BlazorはDI(依存性注入)——ASP.NET Coreで学んだ仕組み——を最初から備えていて、必要なサービスを@injectで受け取れます。

説明

サービスはProgram.csでDIコンテナに登録し、コンポーネントは@injectで受け取ります。

// Program.cs — サービスの登録
builder.Services.AddScoped<WeatherService>();   // 用途に応じ Singleton / Scoped / Transient
@inject WeatherService Weather

<p>今日の天気: @forecast</p>

@code {
    private string forecast = "";

    protected override async Task OnInitializedAsync()
    {
        forecast = await Weather.GetTodayAsync();
    }
}
  • サービスはProgram.csAddSingleton / AddScoped / AddTransientのいずれかで登録する
  • コンポーネントは@inject 型 名前で受け取る(コンストラクタ注入のコンポーネント版)
  • フレームワーク標準のサービス(NavigationManagerHttpClientIJSRuntimeなど)も同じく@injectで使える
  • ライフタイムの目安: 状態を全体共有=Singleton、リクエスト/接続単位=Scoped、毎回新規=Transient

まとめ

  • サービスはProgram.csで登録し、@injectで受け取る
  • newではなくDIにすることで差し替え・テストが容易になる
  • ライフタイム(Singleton/Scoped/Transient)を用途で選ぶ

次回: 標準サービスの代表HttpClientでAPIからデータを取ります。