Jetpack Compose Academy · レッスン

Flowをマッピングして結合する

画面に届く前にストリームを変換します。

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

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

Shape Data Before the UI

Raw data rarely matches what the screen needs. You use flow operators to transform a stream into ready-to-render UI state.

Transform with map

The map operator runs a function on each emission and passes the result downstream, leaving the original stream untouched.

val names = users.map { it.name }

Filter Out Noise

Use filter to drop emissions you do not care about, so only the items that pass your condition reach the UI.

val active = users.filter { it.isActive }

Combine Two Streams

The combine operator merges multiple flows and re-runs whenever any of them emits, giving you the latest value from each.

combine(query, results) { q, r -> SearchUi(q, r) }

Combine Builds UI State

A common pattern is to combine several source flows into one immutable UiState object that fully describes the screen.

combine(items, loading, error) { i, l, e ->
    UiState(i, l, e)
}

Wait for All with zip

While combine fires on any change, zip pairs emissions one-to-one and waits until both flows have produced a new value.

flowA.zip(flowB) { a, b -> a + b }

Switch to a New Stream

With flatMapLatest a new value cancels the previous inner flow and switches to a fresh one, perfect for live search.

query.flatMapLatest { repo.search(it) }

Operators Are Cold by Default

Transformations like map and filter are cold: they describe work but do nothing until something downstream collects.

Chain Operators Freely

You can chain operators into a pipeline. Each one reads the stream above it and feeds the one below, top to bottom.

users.filter { it.isActive }
    .map { it.name }

Handle Errors in the Chain

The catch operator intercepts exceptions upstream so you can emit a fallback instead of crashing the whole stream.

repo.load().catch { emit(emptyList()) }

Keep Logic in the ViewModel

Do your combine and map work in the ViewModel, then expose one clean state flow. The Composable stays simple and dumb.

Quick Check

Pick the operator for the job.

Recap: Mapping & Combining

Great work! Operators like map, filter, and combine reshape and merge streams in the ViewModel so the UI gets exactly the state it needs. 🎯

よくある質問

「Flowをマッピングして結合する」レッスンは無料ですか？

はい。「Flowをマッピングして結合する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「Flowをマッピングして結合する」で何を学びますか？

画面に届く前にストリームを変換します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

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

「Flowをマッピングして結合する」レッスンにはどのくらい時間がかかりますか？

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

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

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

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

← Jetpack Compose Academyに戻る