compose-ui

Jetpack Compose のベストプラクティス

手順

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

1. 状態のホイスト（単方向データフロー）

可能な限り状態を呼び出し元に移動し、Composable をステートレスにします。

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

  @Composable
  fun MyComponent(
      value: String,              // 状態は下方向に流れる
      onValueChange: (String) -> Unit, // イベントは上方向に流れる
      modifier: Modifier = Modifier // 標準の修飾子パラメーター
  )
  

• メリット：UI を単純な状態の保存から切り離せるため、プレビューやテストが容易になります。
• ViewModel との連携：画面レベルの Composable が ViewModel から状態を取得し（viewModel.uiState.collectAsStateWithLifecycle()）、それを下位に渡します。

2. 修飾子

• デフォルトパラメーター：任意パラメーターの先頭には、必ず modifier: Modifier = Modifier を指定します。
• 適用：この modifier は、Composable のルートレイアウト要素に適用します。
• 順序が重要です：padding().clickable() と clickable().padding() は異なります。パディング部分もクリック可能にしたい場合は、一般に、パディングなどのレイアウトに影響する修飾子をクリックリスナーの後に適用します。

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

• remember：再コンポジションをまたいでコストの高い計算結果をキャッシュするには、remember { ... } を使用します。
• derivedStateOf：スクロール位置のように状態が頻繁に変化する一方で、UI がしきい値や要約（例：「トップへ戻る」ボタンの表示）にだけ反応すればよい場合は、derivedStateOf { ... } を使用します。これにより、不要な再コンポジションを防げます。

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

• ラムダの安定性：不安定な型が子要素の再コンポジションを引き起こさないよう、メソッド参照（例：viewModel::onEvent）や記憶されたラムダを優先してください。

4. テーマとリソース

• ハードコードされた色やテキストスタイルの代わりに、MaterialTheme.colorScheme と MaterialTheme.typography を使用します。
• 複数の機能で共有する場合は、単純な UI コンポーネントを専用のファイル（例：DesignSystem.kt や Components.kt）にまとめます。

5. プレビュー

• 公開 Composable ごとに、private なプレビュー関数を作成します。
• @Preview(showBackground = true) を使用し、該当する場合はライトモードとダークモードのプレビューを含めます。
• ステートレス Composable のプレビューには、ダミーの静的データを渡します。