Kotlin Multiplatform Academy · レッスン

UI StateをStateFlowとして公開する

画面の単一の信頼できる情報源を公開します

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

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

One Source of Truth

Your screen needs a single, reliable picture of its data. A StateFlow gives you exactly that: one observable value the UI can trust.

Model the Screen as State

Bundle everything the screen shows into one immutable data class. Loading, data and errors all live together in a single object.

data class HomeState(
    val isLoading: Boolean = false,
    val name: String = ""
)

Keep a Private MutableStateFlow

Inside the ViewModel hold a private MutableStateFlow. Only your code may change it, so state stays controlled and predictable.

private val _state =
    MutableStateFlow(HomeState())

Expose a Read-Only View

Publish it as a read-only StateFlow. The UI can collect values but can never write to it directly. Encapsulation, kept clean.

val state: StateFlow<HomeState> =
    _state.asStateFlow()

It Always Has a Value

Unlike a plain Flow, a StateFlow always holds a current value. New collectors instantly get the latest state, no waiting.

Update with .update

Change state safely using update. It copies the current value and applies your change atomically, even across threads.

_state.update { it.copy(isLoading = true) }

copy Keeps It Immutable

Because the state is a data class, copy produces a fresh object with one field changed. Old state is never mutated in place.

Load Data, Then Emit

Launch a coroutine, fetch your data, then emit the new state. The UI re-renders automatically when the value changes. ✨

scope.launch {
    val name = repo.greet()
    _state.update { it.copy(name = name) }
}

StateFlow vs LiveData

Android devs know LiveData, but it is JVM-only. StateFlow works on every KMP target, so it is the portable choice.

Read the Value Directly

Need the current state without collecting? Just read .value. Handy for tests or one-off checks inside the ViewModel.

val current = _state.value

The UI Stays Dumb

The screen only collects state and draws it. All decisions stay in shared code, so both apps behave identically.

Quick Check

Let's confirm why we split mutable and read-only flows.

Recap

Bundle screen data in a state class, hold it in a private MutableStateFlow, and expose a read-only StateFlow the UI just observes. 🚀

よくある質問

「UI StateをStateFlowとして公開する」レッスンは無料ですか？

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

「UI StateをStateFlowとして公開する」で何を学びますか？

画面の単一の信頼できる情報源を公開しますブラウザで直接実行するハンズオンコードでKotlin Multiplatform Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「UI StateをStateFlowとして公開する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Kotlin Multiplatform Academyに戻る