Compose Multiplatform パターン
Compose Multiplatform と Jetpack Compose を使用して、Android、iOS、Desktop、Web 間で共有 UI を構築するためのパターン集。状態管理、ナビゲーション、テーマ、パフォーマンスを網羅します。
有効化タイミング
- Compose UI（Jetpack Compose または Compose Multiplatform）の構築時
- ViewModel と Compose 状態を用いた UI 状態管理時
- KMP または Android プロジェクトでのナビゲーション実装時
- 再利用可能なコンポーザブルやデザインシステムの設計時
- 再コンポジションとレンダリングパフォーマンスの最適化時
状態管理
ViewModel + 単一状態オブジェクト
画面状態には単一のデータクラスを使用します。StateFlow として公開し、Compose で収集します。
data class ItemListState(
val items: List<Item> = emptyList(),
val isLoading: Boolean = false,
val error: String? = null,
val searchQuery: String = ""
)
class ItemListViewModel(
private val getItems: GetItemsUseCase
) : ViewModel() {
private val _state = MutableStateFlow(ItemListState())
val state: StateFlow<ItemListState> = _state.asStateFlow()
fun onSearch(query: String) {
_state.update { it.copy(searchQuery = query) }
loadItems(query)
}
private fun loadItems(query: String) {
viewModelScope.launch {
_state.update { it.copy(isLoading = true) }
getItems(query).fold(
onSuccess = { items -> _state.update { it.copy(items = items, isLoading = false) } },
onFailure = { e -> _state.update { it.copy(error = e.message, isLoading = false) } }
)
}
}
}
Compose における状態収集
@Composable
fun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {
val state by viewModel.state.collectAsStateWithLifecycle()
ItemListContent(
state = state,
onSearch = viewModel::onSearch
)
}
@Composable
private fun ItemListContent(
state: ItemListState,
onSearch: (String) -> Unit
) {
// ステートレスなコンポーザブル — プレビューやテストが容易
}
イベントシンクパターン
複雑な画面では、複数のコールバックラムダの代わりに sealed interface を使用したイベントパターンを採用します。
sealed interface ItemListEvent {
data class Search(val query: String) : ItemListEvent
data class Delete(val itemId: String) : ItemListEvent
data object Refresh : ItemListEvent
}
// ViewModel 内
fun onEvent(event: ItemListEvent) {
when (event) {
is ItemListEvent.Search -> onSearch(event.query)
is ItemListEvent.Delete -> deleteItem(event.itemId)
is ItemListEvent.Refresh -> loadItems(_state.value.searchQuery)
}
}
// Composable 内 — 複数ラムダではなく単一のラムダ
ItemListContent(
state = state,
onEvent = viewModel::onEvent
)
ナビゲーション
型安全ナビゲーション（Compose Navigation 2.8+）
ルートを @Serializable オブジェクトとして定義します。
@Serializable data object HomeRoute
@Serializable data class DetailRoute(val id: String)
@Serializable data object SettingsRoute
@Composable
fun AppNavHost(navController: NavHostController = rememberNavController()) {
NavHost(navController, startDestination = HomeRoute) {
composable<HomeRoute> {
HomeScreen(onNavigateToDetail = { id -> navController.navigate(DetailRoute(id)) })
}
composable<DetailRoute> { backStackEntry ->
val route = backStackEntry.toRoute<DetailRoute>()
DetailScreen(id = route.id)
}
composable<SettingsRoute> { SettingsScreen() }
}
}
ダイアログとボトムシートのナビゲーション
命令的な show/hide の代わりに dialog() とオーバーレイパターンを使用します。
NavHost(navController, startDestination = HomeRoute) {
composable<HomeRoute> { /* ... */ }
dialog<ConfirmDeleteRoute> { backStackEntry ->
val route = backStackEntry.toRoute<ConfirmDeleteRoute>()
ConfirmDeleteDialog(
itemId = route.itemId,
onConfirm = { navController.popBackStack() },
onDismiss = { navController.popBackStack() }
)
}
}
コンポーザブル設計
スロットベース API
柔軟性のためにスロットパラメータを持つコンポーザブルを設計します。
@Composable
fun AppCard(
modifier: Modifier = Modifier,
header: @Composable () -> Unit = {},
content: @Composable ColumnScope.() -> Unit,
actions: @Composable RowScope.() -> Unit = {}
) {
Card(modifier = modifier) {
Column {
header()
Column(content = content)
Row(horizontalArrangement = Arrangement.End, content = actions)
}
}
}
Modifier の順序
Modifier の順序は重要です — 以下の順序で適用します。
Text(
text = "Hello",
modifier = Modifier
.padding(16.dp) // 1. レイアウト（パディング、サイズ）
.clip(RoundedCornerShape(8.dp)) // 2. 形状
.background(Color.White) // 3. 描画（背景、境界線）
.clickable { } // 4. インタラクション
)
KMP プラットフォーム固有 UI
expect/actual によるプラットフォームコンポーザブル
// commonMain
@Composable
expect fun PlatformStatusBar(darkIcons: Boolean)
// androidMain
@Composable
actual fun PlatformStatusBar(darkIcons: Boolean) {
val systemUiController = rememberSystemUiController()
SideEffect { systemUiController.setStatusBarColor(Color.Transparent, darkIcons) }
}
// iosMain
@Composable
actual fun PlatformStatusBar(darkIcons: Boolean) {
// iOS では UIKit 相互運用または Info.plist で処理
}
パフォーマンス
スキップ可能な再コンポジションのための安定型
すべてのプロパティが安定している場合、クラスに @Stable または @Immutable をマークします。
@Immutable
data class ItemUiModel(
val id: String,
val title: String,
val description: String,
val progress: Float
)
key() と Lazy リストの正しい使い方
LazyColumn {
items(
items = items,
key = { it.id } // 安定したキーによりアイテムの再利用とアニメーションが可能
) { item ->
ItemRow(item = item)
}
}
derivedStateOf による読み取りの遅延
val listState = rememberLazyListState()
val showScrollToTop by remember {
derivedStateOf { listState.firstVisibleItemIndex > 5 }
}
再コンポジションでのアロケーション回避
// Bad — 再コンポジションごとに新しいラムダとリストが生成される
items.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }
// Good — 各アイテムをキー付けすることでコールバックが正しい行に紐づく
val activeItems = remember(items) { items.filter { it.isActive } }
activeItems.forEach { item ->
key(item.id) {
ActiveItem(item, onClick = { handle(item) })
}
}
テーマ
Material 3 ダイナミックテーマ
@Composable
fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
if (darkTheme) dynamicDarkColorScheme(LocalContext.current)
else dynamicLightColorScheme(LocalContext.current)
}
darkTheme -> darkColorScheme()
else -> lightColorScheme()
}
MaterialTheme(colorScheme = colorScheme, content = content)
}
避けるべきアンチパターン
- ViewModel 内で
mutableStateOfを使用する — 代わりにMutableStateFlowとcollectAsStateWithLifecycleを使用するとライフサイクル上安全 NavControllerをコンポーザブルの深い階層に渡す — 代わりにラムダコールバックを渡す@Composable関数内で重い計算を行う — ViewModel またはremember {}に移動する- ViewModel の初期化の代わりに
LaunchedEffect(Unit)を使用する — 設定変更時に再実行される場合がある - コンポーザブルのパラメータで新しいオブジェクトインスタンスを作成する — 不必要な再コンポジションの原因になる
参考資料
スキル: android-clean-architecture — モジュール構造とレイヤリングについて
スキル: kotlin-coroutines-flows — コルーチンと Flow のパターンについて