«

AsyncValueで扱う非同期状態管理

2025 年 10 月 22 日 by sumikawah

はじめに

Flutterでアプリを開発していると、API通信などの「非同期処理」を扱う場面が多くあります。
しかし、単にFutureやasync/awaitを使うだけでは、「ロード中」「成功」「失敗」といった状態を安全かつ明確に扱うのが難しくなります。
そこで、RiverpodのAsyncValueを使うことで、非同期処理の状態を一元的に管理し、UIとロジックをきれいに分離できるようになります。
本レポートでは、 AsyncValueの仕組みと活用方法を整理し、非同期状態管理の理解を深めます。

AsyncValueとは？

AsyncValueは、Riverpodが提供する「非同期状態を安全に表現するためのクラス」です。
3つの状態を明確に持つのが特徴です。

状態説明
AsyncLoadingデータを取得中の状態
AsyncDataデータ取得が成功した状態
AsyncError例外が発生した状態

これにより、「ロード中なのにUIが更新されない」「エラー処理を忘れていた」などのミスを防げます。

使用例

// Riverpodを利用するためのimport
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';

// 非同期処理を行うProvider（例：API通信）
final userProvider = FutureProvider<String>((ref) async {
  await Future.delayed(const Duration(seconds: 2)); // 擬似的な通信待機
  return "ユーザー情報を取得しました";
});

class AsyncValueExamplePage extends ConsumerWidget {
  const AsyncValueExamplePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Providerから状態を取得
    final asyncValue = ref.watch(userProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('AsyncValueの例')),
      body: Center(
        child: asyncValue.when(
          loading: () => const CircularProgressIndicator(),
          error: (error, stack) => Text('エラー: $error'),
          data: (data) => Text(data),
        ),
      ),
    );
  }
}

ポイント

  • ・.when() メソッドを使うと、「ロード中／成功／失敗」の分岐を簡潔に記述できます。
  • ・UIロジックを AsyncValueに任せることで、状態管理がシンプルになります。

AsyncValueを使うメリット

  • １.状態遷移が明確になる
    　→ ローディング・成功・失敗を1つの型で表現できる
  • ２.例外処理を見逃さない
    　→ .when() を書くことで全状態を網羅できる
  • ３.UIとロジックを分離しやすい
    　→ 非同期処理の結果をWidgetに自然に反映できる
  • ４.テストしやすい
    　→ 状態のパターンを固定してテストできる

まとめ

  • ・非同期処理では、「成功・失敗・ロード中」の状態を明確に管理することが重要です。
  • ・Riverpodの AsyncValueを使うことで、これらの状態を安全に扱えます。
  • ・.when()メソッドによってUIを分岐でき、例外処理の漏れも防げます。

タグ: ,

TrackBack