Jetpack Compose Academy · レッスン

Composableの遷移先とルート

Q: 「Composableの遷移先とルート」で何を学びますか？

各画面をルートとして登録します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

各画面をルートとして登録します。

レッスン 2/413 ステップ

「Composableの遷移先とルート」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

画面を Destination として扱う

ナビゲーショングラフ内の各画面は destination です。NavHost 内の composable builder で route 名を付けて登録します。

composable("home") { HomeScreen() }

Route の正体

route は destination を識別する一意の文字列キーです。Compose は、移動先として指定した文字列を宣言済みの route と照合します。

Route を定数にまとめる

生の文字列にあるタイプミスは、気付かないまま失敗する原因になります。各 route を constant として保存すれば、コンパイラーがミスを検出してくれます。

object Routes {
    const val HOME = "home"
    const val SETTINGS = "settings"
}

画面を sealed class にまとめる

大規模なアプリでは、sealed class を使ってすべての route を 1 か所にまとめられます。画面の追加が安全になり、見つけやすくなります。

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Settings : Screen("settings")
}

各 Destination を登録する

各画面を独自の composable ブロックで列挙します。lambda 本体が、その route がアクティブになったときに表示される UI です。

NavHost(navController, startDestination = Screen.Home.route) {
    composable(Screen.Home.route) { HomeScreen() }
    composable(Screen.Settings.route) { SettingsScreen() }
}

Route に移動する

同じ route 文字列を使って移動します。NavController が一致する destination を見つけ、NavHost がそれを描画します。

navController.navigate(Screen.Settings.route)

Route は一意でなければならない

2 つの destination が同じ route を共有することはできません。各 route は住所のようなもので、重複するとナビゲーションが曖昧で信頼できなくなります。

Controller を下位へ渡す

画面からナビゲーションを開始することはよくあるため、各 destination に移動手段を渡します。NavController 全体ではなく lambda を渡すのが一般的なパターンです。

composable("home") {
    HomeScreen(onOpenSettings = { navController.navigate("settings") })
}

画面を疎結合に保つ

NavController の代わりに lambda を渡すと、画面をテストしやすく再利用しやすくなります。画面は何が起きたかを示し、移動方法までは関知しません。

Route は URL のように見える

Route は小さな URL のように扱いましょう。この形式にしておくと、後で引数や deep link を追加し、アプリ外から route を開くときに役立ちます。

確認テスト

Route に定数または sealed class を使うのはなぜでしょうか。

対話的なレッスンで答える

まとめ

各画面は一意の route を持つ destination であり、定数または sealed class を使うと route を安全に整理できることを学びました。🗂️

無料で開始

AI チューターと学ぶ Kotlin — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 30
レッスン: 120

無料で学習を始めるコース全体を表示

よくある質問