Jetpack Compose Academy · レッスン

rememberとmutableStateOf

再コンポジション後も保持される状態を保存します。

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

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

What Is State?

In Compose, state is any value that can change over time and that your UI cares about, like a counter or a typed name. 🙂

Plain Variables Don't Work

A normal var inside a Composable changes its value, but Compose never notices, so the screen stays exactly the same.

var count = 0
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

Meet mutableStateOf

Wrapping a value in mutableStateOf creates an observable holder. When its value changes, Compose knows it must redraw.

val count = mutableStateOf(0)
count.value = count.value + 1

State Reads Are Tracked

Any Composable that reads a state's value gets subscribed to it automatically. Change the value and only those readers update.

The Recomposition Trap

Compose re-runs your function on every redraw. A fresh mutableStateOf each time would reset to zero and lose your work.

remember to the Rescue

remember stores a value across recompositions. Compose computes it once, then hands back the same instance on every redraw.

val count = remember { mutableStateOf(0) }

The Classic Combo

You almost always pair them: remember keeps the holder alive, while mutableStateOf makes changes observable. Together they hold real UI state.

Cleaner with by

Use the by delegate so you read and write the value directly, skipping the noisy .value access every single time.

var count by remember { mutableStateOf(0) }
count++

Putting It Together

Read count in your Text and change it in onClick. The button taps update the number, and Compose repaints just that Text.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Tapped " + count)
}

State Holds Any Type

State is not just numbers. You can hold a String, a Boolean, or a whole data class, and Compose still tracks every change.

var name by remember { mutableStateOf("") }

Keep State Local for Now

For small widgets, holding state right inside the Composable is fine. Later you will lift it up, but local state is the perfect starting point.

Quick Check

Why do we wrap mutableStateOf in remember?

Recap

You learned that remember plus mutableStateOf gives you state that survives recompositions and updates the UI automatically. Nice start! 🎉

よくある質問

「rememberとmutableStateOf」レッスンは無料ですか？

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

「rememberとmutableStateOf」で何を学びますか？

再コンポジション後も保持される状態を保存します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「rememberとmutableStateOf」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る