jetpack-compose

Jetpack Compose エキスパートスキル

Jetpack Compose で正しく高パフォーマンスなコードを書くための、特定の立場に偏らない実践的なガイダンスです。 実際の androidx/androidx ソースコード（ブランチ：androidx-main）の分析に基づき、開発者が日常的に直面する実際の落とし穴に焦点を当てています。

ワークフロー

Compose のコードを扱うときは、次のチェックリストに従ってください。

1. リクエストを理解する

• どの Compose レイヤーが関係していますか？（Runtime、UI、Foundation、Material3、Navigation）
• 状態の問題、レイアウトの問題、パフォーマンスの問題、それともアーキテクチャに関する質問ですか？

2. 適切なリファレンスを確認する

回答する前に、references/ から関連するリファレンスファイルを読みます。

トピック	リファレンスファイル
@State、remember、mutableStateOf、状態のホイスティング、derivedStateOf、snapshotFlow	references/state-management.md
コンポーザブルの構成、スロット、抽出、プレビュー	references/view-composition.md
Modifier の順序、カスタム Modifier、Modifier.Node	references/modifiers.md
LaunchedEffect、DisposableEffect、SideEffect、rememberCoroutineScope	references/side-effects.md
CompositionLocal、LocalContext、LocalDensity、カスタム Local	references/composition-locals.md
LazyColumn、LazyRow、LazyGrid、Pager、キー、コンテンツタイプ	references/lists-scrolling.md
NavHost、型安全なルート、ディープリンク、共有要素のトランジション	references/navigation.md
animate*AsState、AnimatedVisibility、Crossfade、トランジション	references/animation.md
MaterialTheme、ColorScheme、ダイナミックカラー、Typography、シェイプ	references/theming-material3.md
再コンポジションのスキップ、安定性、ベースラインプロファイル、ベンチマーク	references/performance.md
セマンティクス、コンテンツの説明、トラバーサル順序、テスト	references/accessibility.md
削除・置換された API、古い Compose バージョンからの移行パス	references/deprecated-patterns.md
Styles API（試験的）：Style {}、MutableStyleState、Modifier.styleable()	references/styles-experimental.md

3. 適用して検証する

• リファレンスのパターンに従ってコードを書く
• ユーザーの既存コードにアンチパターンがあれば指摘する
• 正しく動作する最小限の解決策を提案する。過剰に複雑にしない

4. ソースを引用する

Compose の内部実装に言及するときは、該当する正確なソースファイルを示します。

// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.kt

主な原則

1. Compose は 3 つのフェーズで処理します：Composition → Layout → Drawing。各フェーズで状態を読み取ると、そのフェーズ以降の処理のみがトリガーされます。

2. 再コンポジションは頻繁に発生しますが、コストは低く抑えられます — ただし、変更されていないスコープをコンパイラーがスキップできるようにする必要があります。安定した型を使い、コンポーザブルの本体での割り当てを避けてください。

3. Modifier の順序は重要です。Modifier.padding(16.dp).background(Color.Red) と Modifier.background(Color.Red).padding(16.dp) は、見た目が異なります。

4. 状態はできるだけ低い位置に置き、必要な範囲までだけホイスティングしてください。可能だからという理由だけで、すべてを ViewModel に入れないでください。

5. 副作用は、Compose の宣言的な世界と命令型 API をつなぐためにあります。目的に合ったものを使ってください。誤用すると、原因を追跡しにくいバグにつながります。

ソースコードの根拠

ガイダンスドキュメントに加えて、このスキルには androidx/androidx（ブランチ：androidx-main）の実際のソースコードが含まれています。内部での動作を確認する必要がある場合や、ユーザーから「実際の実装を見せて」と求められた場合は、references/source-code/ の生のソースを読んでください。

モジュール	ソースの参照先	主なファイル
ランタイム	references/source-code/runtime-source.md	Composer.kt、Recomposer.kt、State.kt、Effects.kt、CompositionLocal.kt、Remember.kt、SlotTable.kt、Snapshot.kt
UI	references/source-code/ui-source.md	AndroidCompositionLocals.android.kt、Modifier.kt、Layout.kt、LayoutNode.kt、ModifierNodeElement.kt、DrawModifier.kt
Foundation	references/source-code/foundation-source.md	LazyList.kt、LazyGrid.kt、BasicTextField.kt、Clickable.kt、Scrollable.kt、Pager.kt
Material3	references/source-code/material3-source.md	MaterialTheme.kt、ColorScheme.kt、Button.kt、Scaffold.kt、TextField.kt、NavigationBar.kt
Navigation	references/source-code/navigation-source.md	NavHost.kt、ComposeNavigator.kt、NavGraphBuilder.kt、DialogNavigator.kt

2 層のアプローチ

1. ガイダンスから始める — トピックに特化したリファレンス（例：references/state-management.md）を読みます
2. ソースをさらに詳しく確認する — ユーザーが根拠を求めている場合、または確認が必要な場合は、references/source-code/ のソースを読みます

ソースツリーのマップ

compose/
├── runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/
├── ui/ui/src/androidMain/kotlin/androidx/compose/ui/platform/
├── ui/ui/src/commonMain/kotlin/androidx/compose/ui/
├── foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/
├── material3/material3/src/commonMain/kotlin/androidx/compose/material3/
└── navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/