2025.07.15

Jetpack ComposeのState管理ガイド

State管理の基本概念

Jetpack Composeにおいて、StateはUIの状態を管理する重要な要素です。Stateが変更されると、関連するComposable関数が自動的に再構成（recomposition）され、UIが最新の状態に保たれます。

主なState管理の方法

1. remember と mutableStateOf

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}

rememberはComposable関数の再構成後もStateを保持し、mutableStateOfは観測可能な状態を作成します。mutableStateOfで作成されたStateのvalueが変更されると、それを参照しているComposable関数が再構成され、UIが更新されます。

2. rememberSaveable

@Composable
fun Screen() {
    var text by rememberSaveable { mutableStateOf("") }
    TextField(
        value = text,
        onValueChange = { text = it }
    )
}

rememberSaveableは画面回転などの設定変更後もStateを保持できる強力な方法です。これにより、アプリケーションのユーザーエクスペリエンスが向上します。

3. ViewModel との統合

class MainViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(UiState())
    val uiState: StateFlow<UiState> = _uiState.asStateFlow()
}

@Composable
fun MainScreen(viewModel: MainViewModel) {
    val uiState by viewModel.uiState.collectAsState()
    // UIの構築
}

ViewModelとFlowを使用して状態管理を行うことで、ライフサイクルに依存しない安全な状態管理が可能になります。Flowを利用することで、リアクティブなデータ更新が簡単に実現できます。

State Hoisting（状態の引き上げ）

@Composable
fun StatefulCounter() {
    var count by remember { mutableStateOf(0) }
    StatelessCounter(count = count, onIncrement = { count++ })
}

@Composable
fun StatelessCounter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}

Stateを上位コンポーネントに移動させることで、再利用性とテスタビリティの向上を図り、Single source of truth（単一の真実のソース）を実現します。Stateを引き上げることで、State変更に応じたUIの自動的な再構成を確保します。

パフォーマンスの最適化

@Composable
fun OptimizedList(items: List<Item>) {
    LazyColumn {
        items(
            items = items,
            key = { it.id } // キーの指定で効率的な更新
        ) { item ->
            ItemRow(item)
        }
    }
}

適切なキーを指定することで、リストアイテムの効率的な更新が可能です。同様に、Stateの変更を効率よく反映するために、keyの管理も重要です

State管理のベストプラクティス

状態は必要最小限に保つ: 不要なStateを減らし、シンプルな状態管理を心がけましょう。
適切なスコープでStateを管理: Stateのスコープを適切に設定し、必要なコンポーネント間で共有しましょう。
単方向データフローの原則に従う: データは一方向に流れるよう管理し、予測可能でデバッグしやすいコードを目指します。
必要に応じてState Hoistingを活用: 状態を上位コンポーネントに持ち上げ、再利用性とテスタビリティを向上させましょう。

デバッグとツール

Compose Layout Inspector: レイアウトの階層やStateの状態を可視化してデバッグします。
Android Studio のプレビュー機能: UIをリアルタイムでプレビューし、素早いフィードバックを得られます。
recomposition カウンター: 再構成の頻度を計測して、パフォーマンスの最適化に役立てます。

まとめ

適切なState管理は、Jetpack Composeアプリケーションの品質と保守性に直結します。状況に応じて適切なState管理手法を選択することが重要です。以上のガイドラインとベストプラクティスを参考に、効果的なState管理を実現しましょう。

一覧を見る