Kotlin Multiplatform Academy · レッスン

ViewModelを各UIにバインドする

共有状態をComposeとSwiftUIに接続します

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

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

The Last Mile

Your shared ViewModel is ready. Now each native UI just needs to observe its state and forward user intents. That is the final wiring.

Compose Collects State

On Android, use collectAsState to turn the StateFlow into Compose state. Every emission recomposes the screen automatically.

val state by viewModel.state.collectAsState()

Draw from That State

Your composable reads the collected state and renders it. The UI is now a pure function of the shared ViewModel's output.

Text(state.name)
if (state.isLoading) CircularProgressIndicator()

Send Intents from Compose

Wire a button to onIntent. The user taps, Compose forwards the action, and the shared ViewModel decides what to do.

Button(onClick = {
    viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }

iOS Needs a Bridge

SwiftUI cannot collect a Kotlin Flow directly. A tiny observable wrapper bridges StateFlow into something SwiftUI can watch.

An ObservableObject Wrapper

Wrap the ViewModel in a Swift ObservableObject. It holds a published copy of the state and feeds SwiftUI updates.

class HomeObservable: ObservableObject {
    @Published var state = HomeState(isLoading: false, name: "")
}

Collect the Flow in Swift

Inside the wrapper, collect the Kotlin StateFlow and assign each value to the published property. SkieKit can also generate this for you.

Render in SwiftUI

The SwiftUI view observes the wrapper and reads state the same way. One shared truth, drawn in Apple's native style.

Text(observable.state.name)

Send Intents from Swift

Buttons in SwiftUI call the wrapped ViewModel's onIntent too, so iOS taps flow into the exact same shared logic.

Button("Refresh") {
    observable.viewModel.onIntent(intent: .refresh)
}

Clear on Disappear

When a screen closes, call the ViewModel's clear() from each platform's lifecycle so the scope cancels and nothing leaks.

Same Brain, Two Faces

Both apps now share one ViewModel: identical state, identical decisions, only the rendering differs. That is KMP at its best. 🎉

Quick Check

Let's confirm how SwiftUI consumes a shared StateFlow.

Recap

Compose uses collectAsState; SwiftUI uses an ObservableObject wrapper. Both observe state and send intents to one shared ViewModel. 🚀

よくある質問

「ViewModelを各UIにバインドする」レッスンは無料ですか？

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

「ViewModelを各UIにバインドする」で何を学びますか？

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

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

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

「ViewModelを各UIにバインドする」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Kotlin Multiplatform Academyに戻る