API通信の基本を理解しよう ｜ASP.NET×Blazor入門 6.1

6.1 HttpClientの基本

Blazorアプリケーションが外部のサーバーやAPIと通信する際、もっとも基本となるクラスが HttpClient です。 これは、HTTPプロトコルを使ってデータの取得（GET）や送信（POST）などを行うための.NET標準のクラスです。

Blazor ServerでのHttpClient

Blazor Serverでは、DI（依存性注入）により HttpClient はすでにサービスとして登録されています。 コンポーネントで使用するには、以下のように @inject ディレクティブを使います。

@inject HttpClient Http

@code {
    protected override async Task OnInitializedAsync()
    {
        var response = await Http.GetAsync("https://example.com/api/data");
        var content = await response.Content.ReadAsStringAsync();
    }
}

Blazor WebAssemblyでのHttpClient

一方、Blazor WebAssemblyでは自分で HttpClient を Program.cs で登録する必要があります。 以下のように、builder.Services.AddScoped を使って、ブラウザの HttpClient を登録します。

builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

これにより、WebAssemblyアプリケーション内でもAPIとの通信が可能になります。注意点としては、WASMではCORS（クロスオリジン）制約が強くなるため、サーバー側での対応も必要になります。

JSONデータの取得：便利な拡張メソッド

Blazorでは、System.Net.Http.Json 名前空間に含まれる拡張メソッドを使うことで、より簡潔にJSONを扱えます。 たとえば、以下のようにすれば List<User> 型として自動的にデシリアライズされます。

var users = await Http.GetFromJsonAsync<List<User>>("https://example.com/api/users");

このように、HttpClientは非同期でのAPI通信において、Blazorアプリケーションの中核を担う存在です。次のセクションでは、実際に取得したJSONデータをどう表示するかを見ていきましょう。