はじめての個人開発で、Jetpack Compose を使った話

第3回 iOS&Android学生エンジニアLT
https://sandbox-style.connpass.com/event/280469

Transcript

1. はじめての個人開発で、 Jetpack Compose を使った話 第 3 回 iOS & Android 学生エンジニア LT 2023/04/22 @keigomichi 1
2. TOC 自己紹介 春インターンに参加 Jetpack Compose どうして Compose を使ったの？ Compose 導入で使ったライブラリ等 まとめ 2
3. 自己紹介 はじめまして、keigomichi です 広島大学情報科学部情報科学科 B3 Web フロントエンド・Flutter・Kotlin インターンやハッカソンに出没 趣味は、のりもの ・おいしい食事 3
4. 春インターンに参加 Android 向け育成型インターンに参加しました。 4
5. Android 向け育成型インターン 2 週間で、「1 人でアプリを開発しリリースできるようになる」ことが目標 プロフィール交換アプリを個人で開発 メンター社員の方に質問し放題 5
6. 完成したアプリ 6
7. Jetpack Compose Compose を使用しました。 7
8. どうして Compose を使ったの？ React や Flutter を使用していたので、宣言的 UI に慣れていた 主に Kotlin だけで開発を進めることができ、コード削減 プレビュー機能が充実 "Recommendations for Android architecture" でも Recommended に 8
9. Compose 導入で使ったライブラリ等 Compose Destinations Showkase Accompanist androidx.compose.ui.viewinterop 9
10. Compose Destinations Navigation Compose だと面倒な画面遷移の実装をシンプルに 型安全な引数 KSP によるコード生成 10
11. 基本的な用法 画面 Composable に @Destination アノテーションをつける @RootNavGraph(start = true) @Destination @Composable fun HomeScreen( navigator: DestinationsNavigator, ) { // ... } 11
12. 基本的な用法 "build/generated/ksp/debug/kotlin/" 以下にビルドされる HomeScreenDestination.kt public object HomeScreenDestination : DirectionDestination { public operator fun invoke(): Direction = this @get:RestrictTo(RestrictTo.Scope.SUBCLASSES) override val baseRoute: String = "home_screen" override val route: String = baseRoute // ... } 12
13. 基本的な用法 "build/generated/ksp/debug/kotlin/" 以下にビルドされる DestinationNavHost.kt public object NavGraphs { public val root: NavGraph = NavGraph( route = "root", startRoute = HomeScreenDestination, destinations = listOf( HomeScreenDestination, ) ) } 13
14. 基本的な用法 生成された Destination オブジェクトを使って画面遷移 @RootNavGraph @Destination @Composable fun ProfileDetailScreen( navigator: DestinationsNavigator ) { navigator.navigate(HomeScreenDestination) } DestinationsNavHost を呼び出す DestinationsNavHost(navGraph = NavGraphs.root) 14
15. 引数を渡す（画面 Composable 内で引数を使用する場合） Composable 関数に引数を追加する @RootNavGraph @Destination @Composable fun ProfileDetailScreen( id: int ) { // ... } 15
16. 引数を渡す（ViewModel で引数を使用する場合） 引数の data class を定義し、 @Destination に設定 data class ProfileDetailScreenNavArgs( val id: int, ) @RootNavGraph @Destination(navArgsDelegate = ProfileDetailScreenNavArgs::class) @Composable fun ProfileDetailScreen( navigator: DestinationsNavigator, profileDetailViewModel: ProfileDetailViewModel = hiltViewModel(), ) { // ... } 16
17. 引数を渡す（ViewModel で引数を使用する場合） "build/generated/ksp/debug/kotlin/" 以下にビルドされる ProfileDetailScreenDestination.kt public object ProfileDetailScreenDestination : TypedDestination<ProfileDetailScreenNavArgs> { @get:RestrictTo(RestrictTo.Scope.SUBCLASSES) override val baseRoute: String = "profile_detail_screen" override val route: String = "$baseRoute/{id}" // ... override fun argsFrom(savedStateHandle: SavedStateHandle): ProfileDetailScreenNavArgs { return ProfileDetailScreenNavArgs( id = uUIDNavType.get(savedStateHandle, "id") ?: throw RuntimeException("'id' argument is mandatory, but was not present!"), ) } } 17
18. 引数を渡す（ViewModel で引数を使用する場合） ViewModel で SavedStateHandle から引数を取得する @HiltViewModel class ProfileDetailViewModel @Inject constructor( savedStateHandle: SavedStateHandle, ) : ViewModel() { val navArgs: ProfileDetailScreenNavArgs = ProfileDetailScreenDestination.argsFrom(savedStateHandle) // OR val navArgs: ProfileDetailScreenNavArgs = savedStateHandle.navArgs() } 18
19. 引数を渡す（ViewModel で引数を使用する場合） SavedStateHandle.navArgs() は… NavArgsGetters.kt public inline fun <reified T> SavedStateHandle.navArgs(): T { return navArgs(T::class.java, this) } 19
20. その他 ディープリンク Navigation Bar との統合 アニメーション Wear OS のサポートもあるらしい 20
21. Showkase UI 要素のカタログを 1 つの Activity で生成 @Preview アノテーションをつけるだけ Paparazzi 等々と組み合わせて VRT も可能 （らしい） 21
22. Accompanist Compose でまだ提供されていない便利な API を提供 e.g. Status Bar, Navigation Bar / WebView / Permission androidx.compose.ui.viewinterop AndroidView コンポーザブルを使って、Compose 内で view 要素を扱える 22
23. まとめ Compose を使ってアプリを作りました Annotation processing library が便利 Compose Destinations - 画面遷移をシンプル・安全に実装できる Showkase - UI カタログを簡単に作れる・VRT にも使える 拡張ライブラリーや相互運用のための API も 23
24. ご清聴ありがとうございました 👋 24