BlazorでのエラーハンドリングとローディングUI｜API通信を丁寧に設計する｜ASP.NET×Blazor入門 6.3

6.3 エラーハンドリングとローディングUI

API通信を行うWebアプリでは、通信エラーやデータ取得の遅延は避けられないものです。 そのため、ユーザーにとってわかりやすく丁寧なレスポンスを返すために、 エラーハンドリングとローディングUIの実装は非常に重要です。

エラーハンドリングの基本

Blazorでは、try-catchブロックを使ってエラーを捕捉し、エラーメッセージを画面に表示する設計が一般的です。 以下の例では、通信に失敗した場合にエラーメッセージを表示するようにしています。

@inject HttpClient Http

@if (isLoading)
{
    <p>読み込み中...</p>
}
else if (!string.IsNullOrEmpty(errorMessage))
{
    <p style="color:red;">エラー: @errorMessage</p>
}
else if (users != null)
{
    <ul>
        @foreach (var user in users)
        {
            <li>@user.Name (@user.Email)</li>
        }
    </ul>
}

@code {
    private List<User>? users;
    private bool isLoading = true;
    private string? errorMessage;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            users = await Http.GetFromJsonAsync<List<User>>("https://example.com/api/users");
        }
        catch (Exception ex)
        {
            errorMessage = ex.Message;
        }
        finally
        {
            isLoading = false;
        }
    }
}

ローディング状態の管理

isLoading フラグを使うことで、データ取得中は「読み込み中...」のようなメッセージを表示し、 ユーザーが待たされていることを明示的に伝えることができます。 また、CSSやアニメーションを加えることで、より直感的なUIにすることも可能です。

エラー時のユーザー体験を改善する

単にエラーを表示するだけではなく、再試行ボタンを設けたり、 エラーの種類によって異なるメッセージを表示することで、ユーザーの不安を軽減できます。 たとえば、ネットワークエラーと認証エラーでは対応方法も異なるため、 より詳細なエラーハンドリングを実装することでUXは格段に向上します。

以上で、第6章の内容は完了です。次の第7章では「認証と認可」に焦点を当て、 ユーザー管理やアクセス制御の実装方法について学んでいきます。