compose-state-and-effects について
Compose UI の状態と副作用の構成を支援するコーディングスキルです。状態ごとの所有者を定め、アプリの配線とプレビュー可能なコンテンツを分離します。
主な機能
- 01状態を必要最小限の所有者に割り当て
- 02ライフサイクルとキーに合うエフェクト選択
- 03画面の配線と描画の分離
- 04プレビューとテストが可能なコンテンツ
活用シーン
- 01画面内の状態所有者のレビュー
- 02ライフサイクルに沿うエフェクト API の選択
- 03不変状態を使った UI 境界の構築
- 04プレビューとテスト向けコンテンツの準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ chrisbanes/ skills --skill compose-state-and-effectsインストール後、Claude Code で/compose-state-and-effectsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/local-state.mdside-effects.mdstate-hoisting.md詳細
Compose の状態と副作用
基本原則
UI 状態の各要素に、責任を持つ最も低い階層の所有者を 1 つ割り当て、命令的な処理はその所有者のライフサイクルに従う副作用を通じて実行します。コンポジションは描画を行い、状態と副作用によって描画が安全に変化します。
画面の所有関係のレビューでは、不変の状態とイベントコールバックを、アプリの配線やコンポジションが所有する実行時オブジェクトから分離して受け取る、プレーンでプレビュー可能なコンテンツコンポーザブルを明示するまで、確認は完了しません。
手順
- 要求された範囲と、目に見える動作要件を確認します。所有関係の変更を指摘事項とするのは、ライフサイクル、テスト容易性、ビジネス、または調整の必要性をコードやタスクの根拠が示している場合に限ります。対象を絞った契約または正確性のレビューでは、コードが必要としていないプロバイダー、所有者、または書き込み元の欠如は、せいぜいリスクとして記録するにとどめます。任意の提案であっても、それを理由に所有関係、デフォルト値、または API の公開範囲の変更を推奨してはいけません。
- 対象の画面またはコンポーネントにおける、変更可能な UI 状態、アプリ状態、イベントストリーム、アプリの依存関係、命令的な処理を洗い出します。
- 各状態値を、必要な範囲で最も低い階層の所有者に配置します。ローカル UI 状態、ホイストされた状態、プレーンな UI 状態ホルダー、または画面状態ホルダーが該当します。
- 画面の境界では、永続的なデータとインテントは配線を担う所有者に、Compose の実行時オブジェクトはコンポジションまたはプレーンな UI 状態ホルダーに置きます。描画は、不変の状態とコールバックを受け取るプレビュー可能なコンテンツコンポーザブルで行います。実装の形については、状態のホイスティングを参照してください。状態とインテントに名前を付けるだけでは、この境界を設けたことにはなりません。このコンテンツは、サンプル状態とコールバックを使って呼び出せるようにします。
@Previewラッパーは任意であり、状態駆動の境界に必須ではありません。追加する前に、モジュールでツールが宣言されていることを確認してください。Compose のランタイムや UI の依存関係がツールを提供すると決めつけてはいけません。タスクのファイル範囲を守り、許可されていない限り、ツールの追加やビルドファイルの変更は行わないでください。プレビュー用ツールが必要でも範囲内で利用できない場合は、ラッパーを省略し、セットアップ上の不足を報告します。 - 処理に適したライフサイクルを持つ副作用 API を選び、再起動または破棄の契機とすべき意味上の入力をキーに設定します。
- 以下の重要な関心事ごとに、該当するリファレンスを読みます。話題が近いというだけでリファレンスを使ってはいけません。
- フレームレートに関わる読み取り、フェーズをまたぐ書き戻し、
@ReadOnlyComposableの契約については、Compose のパフォーマンスを参照してください。この契約では、スナップショットのState.valueの読み取りと、コンポーザーを変更する操作を区別します。状態の読み取りだけなら違反ではありません。 - 画面の所有関係をレビューする前に、表示されているコードで必要な場合は、手順 4 にある 3 つの画面境界すべてが満たされていることを確認します。
- すべての状態値に所有者が 1 つあり、すべての副作用に正当なライフサイクルとキーがあり、アプリの依存関係なしに UI をプレビューおよびテストできる状態になったら完了です。レビューのみの作業では、根拠のある問題が残っていなければ変更不要と報告します。製品要件を作り上げてはいけません。
トピック別ガイド
| シグナル | 参照先 |
|---|---|
裸のローカル var、remember { mutableStateOf(...) }、状態リスト/マップ、またはリセットされる状態 | ローカル状態 |
| 兄弟コンポーネント間で共有される状態、UI 状態ホルダー、ViewModel/コンポーネントの配線、またはプレビュー可能な画面境界 | 状態のホイスティング |
LaunchedEffect、DisposableEffect、SideEffect、snapshotFlow、rememberCoroutineScope、rememberUpdatedState、produceState、命令的な requestFocus、コールバック、イベント Flow の収集、スナックバー、ナビゲーション、または分析 | 副作用 |
| フォーカスの所有関係と、キーボード/TV/D-pad の動作 | Compose のフォーカスナビゲーション |
| 結果となる UI 契約のテストまたはプレビュー | Compose UI テストパターン |
コメント
Markdown 対応