rememberとmutableStateOfによるState
ComposableでUIの状態を保持します
「rememberとmutableStateOfによるState」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
Stateとは
Stateとは、時間の経過とともに変化し、UIがその変化に反応する必要がある値です。カウンターやテキストフィールドの内容、チェックボックスがオンかどうかなどが該当します。Stateが変化すると、Composeが再描画します。
mutableStateOf
mutableStateOfは監視可能な値を作成します。その値に書き込むと、Composeはその値を読み取ったコンポーザブルを再実行する必要があることを認識します。
val count = mutableStateOf(0)
// read with count.value, write with count.value = 1rememberを使う理由
コンポーザブルは何度も実行されることがあります（再コンポジション）。実行のたびにStateを作成すると、毎回リセットされます。rememberは、再コンポジションをまたいで値を保持するようComposeに指示します。
val count = remember { mutableStateOf(0) }byデリゲート
あちこちで.valueを読み書きするのは冗長です。Kotlinのbyプロパティデリゲートを使うと、Stateを通常の変数のように扱えます。
var count by remember { mutableStateOf(0) }
// now use count directly, no .value必要なインポート
byデリゲートを使用するには、getter/setterヘルパーをインポートします。Android Studioがこれらを自動的に追加します。
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberカウンターコンポーザブル
動作するカウンターの例を示します。ボタンをタップするとcountが増加し、Textが自動的に更新されます。
@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text(text = "Count: $count")
}
}読み取りが更新を発生させる
ポイントは、Textがcountを読み取ることです。Composeはその読み取りを記録するため、countが変化すると、その部分だけが再コンポジションされ、新しい値が表示されます。
Stateはどの型でも保持できる
Stateは数値専用ではありません。String、Boolean、リスト、自分で定義したデータクラスも保持できます。
var name by remember { mutableStateOf("") }
var isOn by remember { mutableStateOf(false) }Stateを使うTextField
編集可能なテキストフィールドには、現在の値を保持するStateと、その値を更新するコールバックが必要です。
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it }
)Stateはローカル
rememberで作成したStateはコンポーザブルの内部に存在します。Counter()を2回呼び出すと、それぞれが独立したcountを持ちます。
完全な例
このレッスンで学んだ内容をすべて組み合わせた、完全なカウンター画面です。
@Composable
fun CounterScreen() {
var count by remember { mutableStateOf(0) }
Column {
Text(text = "You tapped $count times")
Button(onClick = { count++ }) {
Text(text = "Tap")
}
}
}クイックチェック
mutableStateOfをrememberでラップするのはなぜですか？
まとめ
Stateの基本：
mutableStateOfは監視可能な値を作成します。rememberは再コンポジションをまたいで値を保持します。byを使うと.valueを省略できます。- Stateを読み取ると、コンポーザブルがその変更を監視するようになります。
よくある質問
「rememberとmutableStateOfによるState」レッスンは無料ですか？
はい。「rememberとmutableStateOfによるState」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「rememberとmutableStateOfによるState」で何を学びますか？
ComposableでUIの状態を保持します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「rememberとmutableStateOfによるState」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- rememberとmutableStateOfによるState
- 再コンポジションを理解する
- State Hoisting
- rememberSaveable