Navigation Compose 2.8 - NEWT AndroidにType safe navigation使ってみた

はじめに

Jetpack Navigation 2.8.0 で、type safeなナビゲーションができるようになりました。「NEWT Androidでもさっそく使いたい！」ということで、実際にNEWT Androidで使用している既存のナビゲーション処理を移行してみました。

これまでとの違いを簡単に説明すると、Navigation 2.8.0ではSerializableな型であればなんでもナビゲーションのrouteとして利用することができるようになりました。定義したクラスにパラメータを持たせることで、destination間のデータの受け渡しを実現します。

モデル定義

まずはSerializableなクラスを作っていきます。これまではrouteをStringで定義していましたがこの部分はまるっとなくなります。

@Serializableアノテーションをつけていきます。後述しますがReservationでは画面にパラメーターを渡したいため、引数としてreservationIdを取れるようにしておきます。

Before


sealed class Screen(
    val route: String
) {
    object ReservationList : Screen("reservations")
 
    object Reservation : Screen("reservations/%s")
}

After


sealed interface ScreenRoute {
    @Serializable
    data object ReservationList : ScreenRoute

    @Serializable
    data class Reservation(val reservationId: Int? = null) : ScreenRoute
}

ナビゲーションの置き換え

NavControllerの各APIをtype safety版に置き換えていきます。

Before


fun navigateToReservationList() {
    navController.navigate(Screen.ReservationList.route)
}

After


fun navigateToReservationList() {
    navController.navigate(ScreenRoute.ReservationList)
}

これまでは、routeのパスに含めるかたちで渡していたreservationIdをReservationの引数として渡せるようになり、シンプルでわかりやすくなりました👏

Before


fun navigateToReservation(reservationId: Int?) {
    val reservationRoute = if (reservationId == null) {
        Screen.Reservation.route
    } else {
        Screen.Reservation.route.format(reservationId)
    }
    navController.navigate(reservationRoute)
}

After


fun navigateToReservation(reservationId: Int?) {
    navController.navigate(ScreenRoute.Reservation(reservationId))
}

NavGraph

これまでのナビゲーショングラフでは、routeでのreservationIdプレースホルダーの指定とargumentsの定義を行っていましたが、新しいAPIではその部分もまるっと無くなり、routeの型を指定すれば終わりです。

Before


fun NavGraphBuilder.reservationGraph() {
    navigation(startDestination = Screen.ReservationList.route, route = Graph.Reservation.route) {
        composable(Screen.ReservationList.route) {
            ReservationListScreen()
        }
        composable(
            route = Screen.Reservation.route.format("{reservationId}"),
            arguments = listOf(
                navArgument("reservationId") {
                    type = NavType.IntType
                    nullable = true
                }
            ),
        ) {
            ReservationScreen()
        }
    }
}

After


fun NavGraphBuilder.reservationGraph() {
    navigation<GraphRoute.Reservation>(startDestination = ScreenRoute.ReservationList) {
        composable<ScreenRoute.ReservationList> {
            ReservationListScreen()
        }
        composable<ScreenRoute.Reservation> {
            ReservationScreen()
        }
    }
}

超シンプルですね〜🙌

パラメータの受け取り

NEWT Androidでは、ViewModelのSavedStateHandleからkeyを指定してパラメータを取得していましたが、新しいAPIでは toRoute()を使うことで直接routeに指定したオブジェクトを取得でき、そこからパラメータへアクセスできます。key名や型を気にする必要がなくなって嬉しいです🎉

Before


val reservationId = savedStateHandle.get<Int>("reservationId")

After


val reservationRoute: Route.Reservation = savedStateHandle.toRoute()
val reservationId = reservationRoute.reservationId

以上が基本的なtype safe ナビゲーションのやりかたなのですが、NEWT Androidでは他にも考慮が必要な点があったので続けて紹介していきます。

routeのString値で判定していた箇所の置き換え

プロジェクト内で、destination.routeが特定の値だった場合の分岐処理が何箇所かあったので、こちらも新しいAPIに合わせました。新しいAPIでは、destination.routeには指定したモデルのフルパス + パラメータが入るようになります。

パラメータなしの場合

"net.newt.ScreenRoute.ReservationList”

パラメータありの場合

"net.newt.ScreenRoute.Reservation?reservationId={reservationId}"

qualifiedNameを用いてモデルのフルパスの取得し、判定に使いました。


sealed interface ScreenRoute {
    val path get() = this::class.qualifiedName
    …
}

hasRoute 判定

一部のdestinationでは、そのrouteがバックスタック内にあればpop, そうでなければnavigate するという処理を行っていました。こちらはhasRoute(KClass<T>) を使って実現することができます。


fun navigateToMyPage() {
    if(hasRouteInBackStack(ScreenRoute.MyPage)) {
        navController.popBackStack(ScreenRoute.MyPage, false)
    } else {
        navController.navigate(ScreenRoute.MyPage)
    }
}

@SuppressLint("RestrictedApi")
fun hasRouteInBackStack(route: ScreenRoute): Boolean {
    return navController.currentBackStack.value.any {
        it.destination.hasRoute(route::class)
    }
}

ちなみに、Android StudioのK2モードを有効にしていると、hasRoute(KClass<T>) の呼び出しでRestrictedApiのワーニングが出てしまう不具合があります。既存のライブラリメソッドhasRoute(route: String, arguments: Bundle?) が参照されてしまうようで、本稿執筆時点で解消されていません。

当面は @SuppressLint("RestrictedApi") を付けるなどの対応が必要そうです。

まとめ

従来の型安全ではないナビゲーションAPIでは、NavGraphが肥大化しやすく可読性が低下したり、文字列ベースによるタイプミスや変更の反映もれなども起きやすく、開発時に地味に時間を取られるポイントになっていました。

Type safeナビゲーションを採用することで、型の整合性エラーやタイプミスによるエラーの心配もなくなったり、IDEの補完機能も活用できたりと、実装がスムーズになるのを実感しました！

NEWT Androidではまだ一部の画面しか移行できていないのですが、順次対応を進めてよりこのメリットを活かせるようにしたいです。以上、Jetpack Navigation Compose 2.8 の Type safe ナビゲーションの紹介でした。

参考ページ

Type safe navigation for Compose

Navigation Compose meet Type Safety

「NEWT Tech Talk」のお知らせ

令和トラベルでは、技術的な知識や知見・成果を共有するLT会を毎月実施しています。発表テーマや令和トラベルに興味をお持ちいただいた方は、誰でも気軽に参加いただけます。

【特別編】After Startup CTO of the year 2024 開催決定🎊

この度、「Startup CTO of the year 2024」にて弊社VPoE麻柄が栄えある最優秀賞を受賞しました。6分間のピッチ『事業成長を導く技術戦略』では語り尽くせなかった、プロダクト開発や組織づくりの裏側について、EMのmiisan・Senior Engineerの飯沼を交えて、パネルディスカッション形式でさらに深ぼっていきます！

【特別編】After Startup CTO of the year 2024 (2024/12/13 19:30〜)

# 📍 イベント概要この度、株式会社令和トラベルは、2024年11月19日に開催された「Startup CTO of the year 2024」にて、ノミネートされた7名のファイナリストより、弊社VPoE 麻柄が最優秀賞を受賞させていただきました🎉 今回のNEWT Tech Talkは、最優秀賞受賞記念として特別バージョンで開催します！「Startup CTO of the year 2024」にて麻柄が発表した、"事業成長を導く技術戦略"の6分間のピッチ内では語り尽くせなかった裏側を麻柄と共にEMのmiisan・Senior Engineerの飯沼を加えてパネルデ...