Flutter Mobile Development · レッスン

Future と async/await による非同期プログラミング

Future、async、await、エラーハンドリングを使って、Dart と Flutter で遅延する処理を扱います。

「Future と async/await による非同期プログラミング」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFlutter Mobile Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Async?

Apps fetch data, read files, and wait on timers. Blocking would freeze the UI, so Dart uses asynchronous programming to stay responsive.

The Future Type

A Future is a value that’ll arrive later. It’s either uncompleted, completed with a value, or completed with an error.

Future<String> fetchName() {
  return Future.delayed(
    Duration(seconds: 1),
    () => "Ada",
  );
}

async and await

Mark a function async and use await to pause until a Future completes — async code that reads top-to-bottom like normal.

Future<void> main() async {
  print("start");
  String name = await fetchName();
  print("Hello, " + name);
}

await Suspends, Not Blocks

Key point: await suspends, it doesn’t block. The event loop keeps handling other work, so the UI stays responsive.

Returning Values

An async function always returns a Future. A plain return inside it just completes that Future with the value.

Future<int> doubleIt(int x) async {
  return x * 2;  // becomes Future<int>
}

Error Handling

Wrap awaited calls in try/catch to handle failures — exactly like catching synchronous exceptions.

try {
  var data = await fetchData();
} catch (e) {
  print("Failed: " + e.toString());
}

Chaining with then

Without async/await, you attach callbacks with then and catchError. Async/await is clearer but compiles to the same idea.

fetchName()
    .then((n) => print(n))
    .catchError((e) => print("error"));

Running in Parallel

Use Future.wait to launch several Futures at once and await them together — faster than awaiting one after another.

var results = await Future.wait([
  fetchA(),
  fetchB(),
]);

FutureBuilder in Flutter

The FutureBuilder widget rebuilds your UI as a Future goes from loading to done — so you show spinners and results declaratively.

FutureBuilder<String>(
  future: fetchName(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    return Text(snapshot.data!);
  },
)

Streams: Many Values

A Future yields one value; a Stream yields many over time. Listen with await for or a StreamBuilder.

Stream<int> counter() async* {
  for (var i = 0; i < 3; i++) {
    yield i;
  }
}

Putting It Together

Putting it together: Futures for one-off results, async/await for clean code, try/catch for errors, and FutureBuilder to bind async data to widgets.

Quick Check

One quick check on Dart’s Future and async/await before you move on.

Recap

You’ve got Dart async: Future for later values, async/await for readable code, try/catch for errors, and Future.wait plus FutureBuilder.

よくある質問

「Future と async/await による非同期プログラミング」レッスンは無料ですか？

はい。「Future と async/await による非同期プログラミング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「Future と async/await による非同期プログラミング」で何を学びますか？

Future、async、await、エラーハンドリングを使って、Dart と Flutter で遅延する処理を扱います。ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Future と async/await による非同期プログラミング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flutter Mobile Developmentに戻る