Jetpack Compose における状態の管理

目次

1. 語句の確認
2. コンポーザブル内の状態
3. 実際に使ってみる
4. まとめ

1.語句の確認

まず初めに、状態の管理の説明に移る前に語句の確認を行いたいと思います。
本記事において、重要な語句として次の4つを上げたいと思います。

・コンポジション
・初回コンポーズ
・再コンポーズ
・再コンポジション

それでは、順に説明していきます。

---

・コンポジション‥コンポーザブル(Composable)を実行した際に、コンポジション(Composition)を構成する。

@Composable
fun MyComposable() {
    Column {
        Text("Hello")
        Text("World")
    }
}

上記のSample Codeにおいて、コンポジションは以下のツリー構造を構成する。

コンポジション(Composition)は、UIの構成要素を保存することができ、この時にUIの状態(State)も同時に保存することができる。

よって、状態(State)を正しく管理するためには、状態(State)がどのように管理されるかを知っておく必要があり、コンポジションの重要性が高いことがわかる。

---

次に、コンポジション(Composition)はいつ構成されるのかについて説明したいと思います。

・初回コンポーズ‥初めてコンポーザブル(Composable)を実行した際に、コンポジション(Composition)を構成すること。

また、データの変更をどのように読み取るかは次の再コンポーズが重要になります。

・再コンポーズ‥何らかのデータの変更が行われた際に、コンポジション(Composition)を更新するために、コンポーザブル(Composable)を再実行すること。

この流れを次の画像で表すと、

・再コンポジション‥データの更新があった場合は、再コンポーズを行ってコンポジション(Composition)を更新しなければいけないこと

2. コンポーザブル内の状態

まずは、次のサンプルコードを確認してください。

@Composable
fun EnterYourName() {
    var yourName by remember { mutableStateOf("") }

    TextField(
        value = yourName,
        onValueChange = { yourName = it },
        label = { Text(text = "Your Name") }
    )
}

コンポーザブルの中で、rememberを用いて状態の管理をしているのがわかると思います。このように、コンポーザブルの状態を管理するために、rememberを用いて状態を保持する必要があります。

では、ここでrememberがなかった場合を考え、次のサンプルコードを確認してください。

@Composable
fun EnterYourName() {

    TextField(
        value = yourName,
        onValueChange = { yourName = it },
        label = { Text(text = "Your Name") }
    )
}

この場合では、状態の更新を受け取るvalue =に対し、渡す状態がないのでこのコンポーザブルはエラーとして扱われます。

よって、状態を管理するためには状態をどう管理するのかを考えコンポーザブルを定義しましょう。
また、ステートフル、ステートレスなどの状態をどこで受け取るか、
なぜDelegated Propertyを使ってrememberを定義するかなど、より実践的な内容については、別記事で紹介したいと思います。

3. 実際に使ってみる

ボタンをクリックし、クリックした回数を表示する簡単なコンポーザブルを定義したいと思います。

@Composable
fun EnterYourName() {

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        var number by remember { mutableStateOf(0) }

        Text(
            text = "$number",
            fontSize = 20.sp
        )

        Button(
            onClick = {
                number++
            },
            colors = ButtonDefaults.buttonColors(
                ButtonBackgroundGreen
            )
        ) {
            Text(text = "Click!!")
        }
    }
}

numberをrememberで状態(初期値=0)として管理し、onClickごとに最初の値+1という処理を加えることで上記のように実装することができました。

4. まとめ

Jetpack Composeを使っていくうえで重要な概念である、状態の管理について勉強したことをまとめてみました。この記事で紹介できなかったことは、また別の記事でまとめたいと思います。