State Hoisting
Stateを上位に移してComposableを再利用しやすくします
「State Hoisting」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
Stateホイスティングとは
Stateホイスティングとは、Stateをコンポーザブルの外側、つまり呼び出し元へ移動することです。コンポーザブルはステートレスになり、値を受け取り、変更を通知するだけになります。
ステートフルとステートレス
ステートフルなコンポーザブルはrememberを使ってStateを所有します。ステートレスなコンポーザブルはStateを保持せず、値をパラメータとして受け取り、イベントを公開します。ステートレスなコンポーザブルは再利用やテストが容易です。
value + onValueChangeパターン
Stateホイスティングの標準的な形には、2つのパラメータがあります。現在のStateを渡すvalueと、イベントを呼び出し元へ渡すonValueChangeラムダです。
@Composable
fun NameField(value: String, onValueChange: (String) -> Unit) {
TextField(value = value, onValueChange = onValueChange)
}ホイスティングする前
ここではコンポーザブルがStateを所有しています。動作はしますが、親はテキストにアクセスできず、コンポーザブルの再利用も難しくなります。
@Composable
fun NameField() {
var name by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it })
}ホイスティングした後
ここではStateが親に存在します。フィールドはステートレスで再利用可能になり、親が値を制御します。
@Composable
fun Parent() {
var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })
}下向きと上向き
このパターンでは、Stateは下向きに流れ、イベントは上向きに流れます。値はパラメータとして下へ渡され、変更はコールバックを通じて上へ伝わります。これは単方向データフローと呼ばれます。
なぜホイスティングするのか
Stateをホイスティングすると、複数のコンポーザブルで同じStateを共有でき、親が変更に反応できるようになります。また、子コンポーザブルを入力のみに基づく純粋な関数にできます。これはプレビューやテストにも適しています。
どこへホイスティングするか
Stateを必要とする最も近い共通の祖先へホイスティングします。1つのコンポーザブルしかStateを使わない場合、ホイスティングは不要かもしれません。上位のコンポーザブルがStateを読み取ったり制御したりする必要がある場合にホイスティングしてください。
共有する例
ここでは、1つのStateでフィールドとリアルタイムプレビューの両方を制御しています。これはStateをホイスティングしているからこそ可能です。
@Composable
fun Editor() {
var text by remember { mutableStateOf("") }
Column {
TextField(value = text, onValueChange = { text = it })
Text(text = "Preview: $text")
}
}ステートレスなら再利用できる
ステートレスなコンポーザブルは値をパラメータとして受け取るため、サンプルデータでプレビューしたり、異なるStateの所有者とともにどこでも使用したりできます。
@Preview
@Composable
fun NameFieldPreview() {
NameField(value = "Sample", onValueChange = {})
}まとめて確認
親がcountを所有し、ボタンがステートレスになっている、再利用可能なカウンターです。
@Composable
fun CounterButton(count: Int, onIncrement: () -> Unit) {
Button(onClick = onIncrement) {
Text(text = "Count: $count")
}
}
@Composable
fun Screen() {
var count by remember { mutableStateOf(0) }
CounterButton(count = count, onIncrement = { count++ })
}クイックチェック
Stateホイスティングでは、ステートレスなコンポーザブルは通常、何を2つ公開しますか？
まとめ
Stateホイスティング：
- Stateを呼び出し元へ移動し、子コンポーザブルをステートレスにします。
value+onValueChangeパターンを使用します。- Stateは下へ、イベントは上へ — 単方向データフローです。
- Stateを必要とする最も近い共通の祖先へホイスティングします。
よくある質問
「State Hoisting」レッスンは無料ですか？
はい。「State Hoisting」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「State Hoisting」で何を学びますか？
Stateを上位に移してComposableを再利用しやすくします ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「State Hoisting」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。