Android Academy · レッスン

ViewModelからStateを公開する

Q: 「ViewModelからStateを公開する」で何を学びますか？

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

ViewModelからCompose UIを動かします

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

UIに状態を公開する

ViewModelは状態を保持しますが、UIにはその状態を監視し、変更時に再描画する仕組みが必要です。

現代のAndroidでは、これを行う一般的なツールとしてStateFlowとComposeのStateがあります。

MutableとImmutableのパターン

ベストプラクティスは、privateな可変のバッキングプロパティを保持し、publicな読み取り専用のバージョンを公開することです。

これにより、UIが誤って状態を直接変更するのを防げます。

StateFlowとして公開する

内部ではMutableStateFlowを使用し、読み取り専用のStateFlowとして公開します。

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

ComposeでStateFlowを収集する

ComposableでcollectAsState()（または後で扱うライフサイクル対応版）を使い、フローをComposeの状態に変換します。

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

StateFlowに初期値が必要な理由

StateFlowには常に現在の値があります。そのため、作成時に初期値を指定する必要があります。

新しいコレクターはすぐに最新の値を受け取り、空のストリームを受け取ることはありません。

別の方法: ComposeのmutableStateOf

ViewModel内の単純な画面ローカル状態には、Composeが自動的に監視するComposeのmutableStateOfも使用できます。

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlowとCompose Stateの比較

StateFlowはKotlin coroutinesの一部であり、Composeに限らずどこでも使用できます。共有するライフサイクル対応ストリームに適しています。
mutableStateOfはCompose専用で、とても簡潔に記述できます。

大規模なアプリのViewModelでは、一般的にStateFlowが推奨されます。

画面の状態を1つのオブジェクトとしてモデル化する

複数のフローに分ける代わりに、関連するフィールドを1つのUI状態データクラスにまとめます。これにより、更新をアトミックで予測しやすいものにできます。

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

UI状態オブジェクトを公開する

その状態クラスのStateFlowを1つ公開します。UIは単一の信頼できる情報源からすべての値を読み取れます。

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

不変状態の更新

古いオブジェクトを変更するのではなく、変更したフィールドを持つコピーを生成して状態を更新します。

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

イベントは上へ、状態は下へ流れる

これが単方向データフローの基本です。

状態はViewModelからUIへ下向きに流れます。
イベントは関数呼び出しを介してUIからViewModelへ上向きに流れます。

理解度チェック

状態の公開についての理解度を確認しましょう。

まとめ

学んだこと：

privateなMutableStateFlowを保持し、読み取り専用のStateFlowを公開します。
関連するフィールドをUI状態のデータクラスにまとめます。
update {}を介してcopy()で更新します。
状態は下へ、イベントは上へ流れます。

よくある質問

「ViewModelからStateを公開する」レッスンは無料ですか？

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

「ViewModelからStateを公開する」で何を学びますか？

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

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

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

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

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

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

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

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

← Android Academyに戻る