【Flutter】非同期リスト操作：Future、async/await、Streamを理解し、並列処理と並行処理をマスターする

2024年2月12日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

Future、asyncとawaitの基本と使い方
Streamの基本とFlutterでの活用方法
並列処理と並行処理の違いと具体例
非同期処理を使って画面に数字を表示する方法

開発環境

Dart 3.0.0
Flutter 3.10.0

Future、asyncとawaitの基本

FutureはDart言語において、非同期操作を表すクラスです。asyncとawaitキーワードは、Futureを扱うための構文糖（プログラミングにおいて読みやすさや書きやすさを向上させるために導入された構文）です。

サンプルコード

Future<void> fetchUserData() async {
  // 擬似的なユーザーデータ取得処理
  await Future.delayed(Duration(seconds: 2));
  print('ユーザーデータを取得しました');
}

void main() {
  fetchUserData();
  print('データ取得を開始しました');
}

説明

fetchUserData関数は非同期関数であり、asyncキーワードが使用されています。
Future.delayedをawaitしているため、指定した2秒間待機した後に次の処理が行われます。
メイン関数内でfetchUserDataを呼び出した後にすぐに「データ取得を開始しました」と表示され、その後に非同期処理が完了します。

Streamの基本

StreamはDartで時間をかけて複数の値を生成する非同期操作を扱うクラスです。Flutterアプリでは、ユーザーのアクションに応じてデータを動的に更新する際などに有効に活用できます。

サンプルコード

Stream<int> numberStream() async* {
  for (int i = 0; i < 10; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

void main() {
  numberStream().listen((number) {
    print('受け取った数字: $number');
  });
}

説明

numberStream関数は、1秒ごとに数字を生成しています。
async*キーワードとyieldを使用して非同期ストリームを定義しています。
.listenメソッドを用いてストリームから送られてくるデータを受け取り、処理しています。

並列処理と並行処理の違い

並列処理（Parallelism）：複数のプロセスやスレッドが同時に実行されること。物理的に同時に異なるタスクを実行します。
並行処理（Concurrency）：一つのプロセッサが複数のタスクを進行させること。論理的に同時にタスクを進めますが、物理的には交互に実行されます。

いちの

・並列処理は複数縦線が引いてあるイメージ
・並行処理は１本線が引いてあるイメージ

並列処理と並行処理それぞれのイメージ

並列処理は複数縦線が引いてあるイメージ
並行処理は１本線が引いてあるイメージ

非同期処理を使った画面表示のサンプル

以下はFlutterで非同期処理を使って画面中央に文字で表示された数字が0から3まで1つずつ増えるサンプルコードです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: NumberDisplay(),
        ),
      ),
    );
  }
}

class NumberDisplay extends StatefulWidget {
  @override
  _NumberDisplayState createState() => _NumberDisplayState();
}

class _NumberDisplayState extends State<NumberDisplay> {
  int _number = 0;

  @override
  void initState() {
    super.initState();
    _incrementNumber();
  }

  Future<void> _incrementNumber() async {
    for (int i = 0; i <= 3; i++) {
      await Future.delayed(Duration(seconds: 1));
      setState(() {
        _number = i;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Text('$_number', style: Theme.of(context).textTheme.headline4);
  }
}

説明

NumberDisplayウィジェットは、画面に数字を表示するためのStatefulWidgetです。
_incrementNumber関数は非同期関数で、1秒ごとに_numberの値を増やしています。
setStateを使ってUIを更新しているため、数字が変わるたびに画面が再描画されます。

動作確認

いちの

実際の画面表示を見てみましょ〜

ボタン押下後の非同期処理にてボタン連打防止する方法と通信処理中の小技にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

Flutterにおける非同期処理は、Future、async/await、Streamを使って効果的に実装できます。これらの概念を理解し、適切にアプリケーション開発に活用することで、ユーザーに快適な体験を提供することが可能です。また、並列処理と並行処理の違いを理解することは、リソースを効率的に使うためにも重要です。この記事が、Flutterでの非同期処理の理解と実装の助けになれば幸いです。

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

アプリ開発では、ボタン押下時の非同期を行う場面がよくあります。(API通信とか)以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。