Jetpack ComposeのNavController入門編

1. はじめに

• この記事で学べること
  • Jetpack Composeにおける画面遷移の基本
  • NavControllerの役割と使い方
• 対象読者
  • Composeを使い始めた人
  • 画面遷移で迷っている人

2. NavControllerとは？

• アプリ内で、「今どの画面を表示するべきか？」を管理するコントローラー
• 画面遷移の情報を持っていて、成功したら自動的に表示を切り替えてくれる

3. Composeでのナビゲーション全体像

rememberNavController()

• 役割：NavControllerのインスタンスを作成する
• ポイント：rememberを使って、再コンポーズされても保持される

NavHost

• 役割：NavControllerの状態を観測し、対応するComposable画面を表示する入れ物
• ポイント：startDestinationを指定し、最初の画面を決める

composable

• 役割：ルート(パス名)とComposable画面を結びつける
• ポイント：複数のcomposableをNavHost内に登録して画面遷移を実現する

4. コード例（簡易バージョン）

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("detail") { DetailScreen(navController) }
}

Button(onClick = { navController.navigate("detail") }) {
    Text("Go to Detail")
}

• navigate(ルート名)を呼ぶだけで画面遷移できる！

6. よくあるミスと対処

• NavHostにルートを登録し忘れる
• startDestinationを設定していない
• NavControllerを適切にComposableに渡していない