Jetpack Compose ベストプラクティス

手順

パフォーマンスが高く、再利用可能で、テスト可能な Composable を作成するために、以下のガイドラインに従ってください。

1. State Hoisting（単方向データフロー）

State を呼び出し元に移動させることで、Composable を ステートレス にするよう心がけてください。

• パターン: 関数シグネチャは通常以下のようになります：

  @Composable
  fun MyComponent(
      value: String,              // State は上から下へ流れる
      onValueChange: (String) -> Unit, // イベントは下から上へ流れる
      modifier: Modifier = Modifier // 標準的な modifier パラメータ
  )
  

• メリット: UI をシンプルな state 保存から分離し、プレビューとテストが容易になります。
• ViewModel との統合: スクリーンレベルの Composable が ViewModel から state を取得し（viewModel.uiState.collectAsStateWithLifecycle()）、それを下層に渡します。

2. Modifier

• デフォルト値パラメータ: modifier: Modifier = Modifier をオプションパラメータの最初に常に提供してください。
• 適用: この modifier を Composable の ルート レイアウト要素に適用してください。
• 順序が重要: padding().clickable() は clickable().padding() と異なります。一般的に、パディングがクリック可能にしたい場合は、レイアウト関連の modifier（パディングなど）を click listener の 後に 適用してください。

3. パフォーマンス最適化

• remember: 再コンポジション間で高コストな計算をキャッシュするために remember { ... } を使用してください。
• derivedStateOf: state が頻繁に変わる場合（スクロール位置など）でも、UI がしきい値またはサマリーに対してのみ反応する必要がある場合（例：「トップへジャンプ」ボタンを表示）、derivedStateOf { ... } を使用してください。これにより不要な再コンポジションが防げます。

  val showButton by remember {
      derivedStateOf { listState.firstVisibleItemIndex > 0 }
  }
  

• Lambda の安定性: 不安定な型の再コンポジションを防ぐために、メソッド参照（例：viewModel::onEvent）またはメモ化された lambda を優先してください。

4. テーマ設定とリソース

• ハードコードされた色やテキストスタイルの代わりに、MaterialTheme.colorScheme と MaterialTheme.typography を使用してください。
• シンプルな UI コンポーネントが複数の機能で共有される場合、特定のファイル（例：DesignSystem.kt または Components.kt）に整理してください。

5. プレビュー

• すべての public Composable に対して private プレビュー関数を作成してください。
• @Preview(showBackground = true) を使用し、該当する場合はライト/ダークモードのプレビューを含めてください。
• ステートレス Composable にダミーデータ（静的）をプレビューに渡してください。