Kotlin Multiplatform Academy · レッスン

共有UIのStateとRecomposition

共有StateFlowからComposeを駆動します

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

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

UI Is a Function of State

In Compose your screen is drawn from state. When the state changes, Compose redraws only the parts that depend on it. You never mutate views by hand.

Recomposition Explained

That automatic redraw is called recomposition. Compose re-runs the affected composables with the new values and updates the screen for you.

Remember Local State

For state owned by a composable, use remember with mutableStateOf so the value survives recomposition instead of resetting every frame.

val count = remember { mutableStateOf(0) }

Read and Write State

Wrap the value in by to read and write it like a normal variable. Reading it subscribes the composable, so writing triggers a redraw.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

Hoist State Upward

Move state to the lowest common parent and pass values down. This hoisting keeps child composables stateless, reusable and easy to test.

@Composable
fun Counter(value: Int, onInc: () -> Unit) {
    Button(onClick = onInc) { Text("" + value) }
}

State Lives in Shared Code

Your real source of truth is the shared layer. A cross-platform StateFlow holds screen state once, far from any platform UI framework.

val uiState: StateFlow<ScreenState> = _state

Collect StateFlow in Compose

Bridge that flow into Compose with collectAsState. The composable observes it and recomposes whenever the shared state emits a new value.

val state by viewModel.uiState.collectAsState()
Text(state.title)

One Source of Truth

Because state flows from shared code into Compose, Android and iOS render the exact same screen from a single source of truth. No drift.

Avoid Side Effects in Composables

A composable can run many times, so never do work like network calls directly in its body. Keep it a pure description and push effects elsewhere.

LaunchedEffect for Side Work

When you must start a coroutine tied to the UI, use LaunchedEffect. It runs once per key and cancels automatically when the composable leaves.

LaunchedEffect(Unit) {
    viewModel.load()
}

Derived and Stable State

Compute values from existing state with derivedStateOf so they recalculate only when their inputs change, keeping recomposition cheap.

Quick Check

What keeps a value across recompositions?

Recap: State Drives the UI

You learned that state drives recomposition, how to remember and hoist it, and how shared StateFlow feeds Compose so both apps render one truth. 🔁

よくある質問

「共有UIのStateとRecomposition」レッスンは無料ですか？

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

「共有UIのStateとRecomposition」で何を学びますか？

共有StateFlowからComposeを駆動しますブラウザで直接実行するハンズオンコードでKotlin Multiplatform Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「共有UIのStateとRecomposition」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Kotlin Multiplatform Academyに戻る