Compose Multiplatform Patterns

# Compose Multiplatformパターン

Compose MultiplatformとJetpack Composeを使用して、Android、iOS、デスクトップ、Web間で共有UIを構築するためのパターン。状態管理、ナビゲーション、テーマ設定、パフォーマンスをカバーします。

## 起動条件

- Compose UIの構築（Jetpack ComposeまたはCompose Multiplatform）
- ViewModelとCompose状態によるUI状態の管理
- KMPまたはAndroidプロジェクトでのナビゲーション実装
- 再利用可能なコンポーザブルとデザインシステムの設計
- リコンポジションとレンダリングパフォーマンスの最適化

## 状態管理

### ViewModel + 単一状態オブジェクト

画面状態には単一のデータクラスを使用します。`StateFlow`として公開し、Composeで収集します：

```kotlin
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での状態収集