いまから追い上げる、Jetpack Compose トレーニング

2020年8月26日にJetpack Composeのアルファ版リリースがアナウンスされてから、4年の月日が流れました。多くのプロダクトでJetpack Composeの導入が進んでいることかと思いますが、既存のAndroid Viewから完全移行するためにはまだまだ長い道のりが待ち構えていると感じているかたも少なくないかと思います。

また、リアクティブプログラミングモデルが採用されているため馴染んでくるのにもある程度の知識が必要であったり、従来のUI開発とは勝手が異なるためになかなかキャッチアップが捗らない、といったかたもまだまだいらっしゃるのではないでしょうか？

本セッションでは、実際に業務で起こりえそうなシーンをイメージしつつ、想定受講対象者が以下のゴールを達成する支援となることを狙います。

◆対象者
- Jetpack Composeにこれから触れるひと
- Jetpack Composeをなんとなくで触っている気がしているひと
- 従来のAndroid Viewで開発したような複雑なUIをJetpack Composeで開発する想像力を養いたい
- Jetpack Composeに関する情報ソースを整理・把握したいひと

◆想定ゴール
想定対象者が以下の状態となることを目指します
- Jetpack Composeを使ったUI開発の基礎固めができている
- Jetpack Composeを使った開発に必要な情報ソースに到達しやすくなる
- Jetpack Composeを使ったUIのパフォーマンスチューニングができる
- Android Viewでやっていたような複雑なUIを開発できる

Transcript

1. いまから追い上げる、 Jetpack Compose トレーニング DroidKaigi 2024 @nyafunta9858
2. 小林 慶弘 (Yoshihiro Kobayashi) a.k.a nyafunta9858 • Android Engineer @ Yappli, Inc. • 趣味：ガジェット集め、ゲーム、カメラ...
3. 本セッションについて
4. 本セッションについて 宣言的？ リアクティブ？ ホイスティング？
5. 本セッションについて 公式情報は？ リファレンスにな るコードは？ ハンズオンは？
6. 本セッションについて 想定対象者 • Jetpack Composeにこれから触れるひと • Jetpack Composeをなんとなくで触っている気がしているひと • Jetpack Composeに関する情報ソースを整理・把握したいひと • 従来のAndroid Viewで開発したような複雑なUIをJetpack Composeで開発する想像力を養いたい
7. 本セッションについて 目標 • Jetpack Composeを使ったUI開発の基礎固めができている • Jetpack Composeでの開発に必要な情報に到達しやすくなる • Jetpack Composeを使ったUIのパフォーマンスチューニングができ る • 従来のAndroid Viewで実現していたような複雑なUIを開発できる
8. 本セッションについて 注意書き • Jetpack Compose提供機能の詳細を全網羅するものではありませ ん • ご紹介する情報ソース・コンテンツ本来の使い方とは異なる可能性 があります • 上記を踏まえ、ステップアップのための足掛かり、話題のネタのひと つとしてお楽しみいただけますと幸いです
9. 目次 • 開発を始めるまでに • UI開発 • 画面遷移 • パフォーマンスチューニング • まとめ
10. 開発を始めるまでに
11. ここでおさえておきたいポイント • Jetpack Composeとは？ • 参考になる情報ソース • 環境セットアップ ◦ 開発環境の構築方法 ◦ Previewの確認方法 • Jetpack Composeでできること • 「導入しやすい」単位
12. Jetpack Composeとは？ Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android bringing your apps to life with less code, powerful tools, and intuitive Kotlin APIs. It makes building Android UI faster and easier. 引用：https://developer.android.com/develop/ui/compose/why-adopt
13. 参考になる情報ソース • Android Developers ◦ Guides, Pathway, Samples and more • YouTube Channel ◦ MAD Skills, Now In Android and mroe • GitHub ◦ Codelabs, Sample Project and more
14. 参考になる情報ソース 注意事項 😥
15. 参考になる情報ソース Android Developers 引用：https://developer.android.com/develop/ui
16. 参考になる情報ソース > Android Developers Pathway 引用：https://developer.android.com/courses/jetpack-compose/course
17. 参考になる情報ソース > Android Developers Compose samples 引用：https://developer.android.com/develop/ui/compose/samples
18. 参考になる情報ソース YouTube Channel 引用：https://www.youtube.com/@AndroidDevelopers/videos
19. 参考になる情報ソース > GitHub Codelabs 引用：https://github.com/android/codelab-android-compose
20. 参考になる情報ソース > GitHub Jetpack Camera App 引用：https://github.com/google/jetpack-camera-app
21. 参考になる情報ソース • Android Developers ◦ Guides, Pathway, Samples and more • YouTube Channel ◦ MAD Skills, Now In Android and mroe • GitHub ◦ Codelabs, Sample Project and more
22. ここでおさえておきたいポイント • Jetpack Composeとは？ • 参考になる情報ソース • 環境セットアップ ◦ 開発環境の構築方法 ◦ Previewの確認方法 • Jetpack Composeでできること • 「導入しやすい」単位
23. 環境セットアップ チュートリアル 引用：https://developer.android.com/develop/ui/compose/tutorial
24. 環境セットアップ Codelabs 引用：https://github.com/android/codelab-android-compose
25. 環境セットアップ > Codelabs Jetpack Compose Basics このコードラボで学べる・体験できること • 一からのComposeを使ったアプリ作成 • Compose とは何か • Compose を使用して UI を作成する方法 • Compose で作成された UI をPreviewする方 法 • Composable 関数で状態を管理する方法 • 効率の良いリストを作成する方法 など 引用：https://developer.android.com/codelabs/jetpack-compose-basics
26. 環境セットアップ > Pathway Compose essentials 引用：https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1
27. 環境セットアップ Android Basics with Compose 引用：https://developer.android.com/courses/android-basics-compose/course 想定合計時間：100時間超 • Kotlin の基礎 • Android Studio のセットアップ • スクロールするリストの追加 • Architecture Componentsの利用 • 通信処理 • WorkManagerの使用 など
28. 環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/setup#setup-compose
29. 環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/compiler
30. 環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://github.com/android/compose-samples/pull/1354
31. 環境セットアップ Kotlinとの互換性 引用：https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility
32. 環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/setup#setup-compose
33. 環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/setup#setup-compose
34. 環境セットアップ Jetpack Composeと互換性 引用：https://developer.android.com/develop/ui/compose/bom/bom-mapping
35. 環境セットアップ Import an Android Code Sample
36. 環境セットアップ Guides 引用：https://developer.android.com/develop/ui/compose/documentation
37. ここでおさえておきたいポイント • Jetpack Composeとは？ • 参考になる情報ソース • 環境セットアップ ◦ 開発環境の構築方法 ◦ Previewの確認方法 • Jetpack Composeでできること • 「導入しやすい」単位
38. 「導入しやすそう」を定義する 新規プロジェクト • シンプルな画面（e.g. 設定画面、ウェルカム画面など） 既存プロジェクト • シンプルな画面（e.g. 設定画面、ウェルカム画面など） • シンプルな既存画面（e.g. 設定画面、ウェルカム画面など） • View単位（e.g. リスト表示の１セル、画面内の1要素など） など
39. 「導入しやすそう」を定義する
40. ここまでのまとめ • https://developer.android.com/develop/ui • https://developer.android.com/courses/jetpack-compose/course • https://developer.android.com/develop/ui/compose/samples • https://www.youtube.com/@AndroidDevelopers/videos • https://github.com/android/codelab-android-compose • https://github.com/google/jetpack-camera-app • https://developer.android.com/develop/ui/compose/tutorial • https://developer.android.com/codelabs/jetpack-compose-basics • https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1 • https://developer.android.com/courses/android-basics-compose/course • https://developer.android.com/develop/ui/compose/setup#setup-compose • https://developer.android.com/develop/ui/compose/compiler • https://github.com/android/compose-samples/pull/1354 • https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility • https://developer.android.com/develop/ui/compose/bom/bom-mapping • https://developer.android.com/develop/ui/compose/documentation
41. UI開発
42. ここでおさえておきたいポイント • 基本的なUI • 複雑なUI • カスタムAndroid View • 既存UI
43. UI開発 > 基本となるUI App Layout / Components 引用：https://developer.android.com/develop/ui/compose/layouts
44. UI開発 > 基本となるUI > Codelabs Basic layouts in Compose このコードラボで学べる・体験できること • 修飾子がComposableを拡張する仕組み • Column や LazyRow などの標準レイアウト コン ポーネントが子Composableを配置する仕組み • 位置揃えと配置により、親 Composable内で子の 位置が変化する様子 • Scaffold やボトム ナビゲーションなどの Material Composable • さまざまな画面構成向けのレイアウトを作成する 方法 など 引用：https://developer.android.com/codelabs/jetpack-compose-layouts
45. UI開発 > 基本となるUI List of Compose modifiers 引用：https://developer.android.com/develop/ui/compose/modifiers-list
46. UI開発 > 基本となるUI > Pathway Layouts, theming, and animation このPathwayで学べる・体験できること • Compose のレイアウトと修飾子の基礎 • Lazy レイアウト • マテリアル デザイン 3 でアプリのテーマを設定する • テキストのスタイル設定 • アプリの魅力を高める 5 つの簡単なアニメーション • 要素のアニメーション化 • カスタム レイアウトとカスタム グラフィック • 制約と修飾子の順序 など 引用：https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-2
47. UI開発 > 基本となるUI ConstraintLayout 引用：https://developer.android.com/develop/ui/compose/layouts/constraintlayout
48. UI開発 > 基本となるUI ConstraintLayout 引用：https://github.com/search?q=repo%3Aandroid%2Fcompose-samples+ConstraintLayout&type=code
49. UI開発 > 基本となるUI ConstraintLayout 引用：https://github.com/android/snippets/blob/6ea91d123db3e094b82c3c8b6245e75114dfed60/compose/snippets /src/main/java/com/example/compose/snippets/layouts/ConstraintLayoutSnippets.kt
50. UI開発 > 基本となるUI ConstraintLayout
51. UI開発 > 基本となるUI Quick Guides 引用：https://developer.android.com/quick-guides
52. UI開発 > 基本となるUI Quick Guides • Create a finite scrollable list • Create a scrollable grid • Lazily load data with lists and Paging • Show or hide password based on a user toggle • Auto-format a phone number in a text field • Support multiple links in a single string of text • Display pop-up messages or request user input など
53. UI開発 > 基本となるUI Sample Annotation
54. UI開発 > 基本となるUI Sample Annotation 引用：https://proandroiddev.com/finally-working-samples-in-android-studio-7edd8bd05bba
55. ここでおさえておきたいポイント • 基本的なUI • 複雑なUI • カスタムAndroid View • 既存UI
56. 複雑なUI グラフ描画 引用：https://patrykandpatrick.com/vico/wiki/
57. 複雑なUI > グラフ描画 Canvasの利用 core uses android.graphics.Canvas (also used by views) to draw charts, and DrawScope (used by Jetpack Compose) exposes an instance of android.graphics.Canvas via DrawScope#canvas#nativeCanvas. It’s similar for other APIs, like Path. This approach encourages a greater level of abstraction and promotes the separation of concerns. It also helped make Vico’s API highly extensible. 引用：https://patrykandpatrick.com/vico/wiki/
58. 複雑なUI > グラフ描画 Canvasの利用 @Composable internal fun CartesianChartHostImpl(...) { : Canvas( modifier = Modifier.fillMaxSize() .chartTouchEvent( : ) ) { : val drawingContext = CartesianDrawingContext( measuringContext = measuringContext, canvas = drawContext.canvas.nativeCanvas, : ) chart.draw(drawingContext, model, markerTouchPoint.value) : 引用：https://github.com/patrykandpatrick/vico/blob/master/vico/compose/ src/main/java/com/patrykandpatrick/vico/compose/cartesian/CartesianChartHost.kt
59. 複雑なUI > グラフ描画 Canvasの利用 @Composable internal fun CartesianChartHostImpl(...) { : Canvas( modifier = Modifier.fillMaxSize() .chartTouchEvent( : ) ) { : val drawingContext = CartesianDrawingContext( measuringContext = measuringContext, canvas = drawContext.canvas.nativeCanvas, : ) chart.draw(drawingContext, model, markerTouchPoint.value) : 引用：https://github.com/patrykandpatrick/vico/blob/master/vico/compose/ src/main/java/com/patrykandpatrick/vico/compose/cartesian/CartesianChartHost.kt
60. 複雑なUI > グラフ描画 Canvasの利用 @Composable internal fun CartesianChartHostImpl(...) { : Canvas( modifier = Modifier.fillMaxSize() .chartTouchEvent( : ) ) { : val drawingContext = CartesianDrawingContext( measuringContext = measuringContext, canvas = drawContext.canvas.nativeCanvas, : ) chart.draw(drawingContext, model, markerTouchPoint.value) : 引用：https://github.com/patrykandpatrick/vico/blob/master/vico/compose/ src/main/java/com/patrykandpatrick/vico/compose/cartesian/CartesianChartHost.kt
61. 複雑なUI > グラフ描画 Canvasの利用 引用：https://android-developers.googleblog.com/2024/06/3-fun-experiments-to-try-for-your-next-android-app-using-google-ai-studio.html
62. ここでおさえておきたいポイント • 基本的なUI • 複雑なUI • カスタムAndroid View • 既存UI
63. カスタムAndroid View AndroidView Composable @Composable fun InteropExistingAndroidView() { // Adds AndroidView to Compose AndroidView( modifier = Modifier.fillMaxSize(), factory = { context -> MyExistingAndroidView(context).apply { : } }, update = { view -> : } ) }
64. カスタムAndroid View AndroidView Composable @Composable fun InteropExistingAndroidView() { // Adds AndroidView to Compose AndroidView( modifier = Modifier.fillMaxSize(), factory = { context -> MyExistingAndroidView(context).apply { : } }, update = { view -> : } ) }
65. カスタムAndroid View > Pathway Views in Compose 引用：https://developer.android.com/courses/pathways/android-basics-compose-unit-8-pathway-2 このPathwayで学べる・体験できること • Compose内でのAndroid Viewとの相互 運用 ◦ AdViewのケース ◦ RatingBarのケース など
66. ここでおさえておきたいポイント • 基本的なUI • 複雑なUI • カスタムAndroid View • 既存UI
67. 引用：https://developer.android.com/codelabs/jetpack-compose-migration 既存UI > Codelabs Migration to Jetpack Compose このコードラボで学べる・体験できること • さまざまな移行方法 • アプリを段階的に Compose に移行する方法 • ビューを使用して作成した既存の画面に Compose を追加する方法 • Compose 内からビューを使用する方法 • ビューと Compose の両方で作成された混合 画面をテストする方法 など
68. 既存UI > YouTube From Views to Compose 引用：https://www.youtube.com/watch?v=y10I6Suhvtc
69. 既存UI Using Compose in RecyclerView 引用：https://medium.com/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583
70. • https://developer.android.com/develop/ui/compose/layouts • https://developer.android.com/codelabs/jetpack-compose-layouts • https://developer.android.com/develop/ui/compose/modifiers-list • https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-2 • https://developer.android.com/develop/ui/compose/layouts/constraintlayout • https://github.com/search?q=repo%3Aandroid%2Fcompose-samples+ConstraintLayout&type=code • https://github.com/android/snippets/blob/6ea91d123db3e094b82c3c8b6245e75114dfed60/compose/snippets/src/mai n/java/com/example/compose/snippets/layouts/ConstraintLayoutSnippets.kt • https://developer.android.com/quick-guides • https://proandroiddev.com/finally-working-samples-in-android-studio-7edd8bd05bba • https://patrykandpatrick.com/vico/wiki/ • https://github.com/patrykandpatrick/vico/blob/master/vico/compose/src/main/java/com/patrykandpatrick/vico/compos e/cartesian/CartesianChartHost.kt • https://android-developers.googleblog.com/2024/06/3-fun-experiments-to-try-for-your-next-android-app-using-google- ai-studio.html • https://developer.android.com/courses/pathways/android-basics-compose-unit-8-pathway-2 • https://developer.android.com/codelabs/jetpack-compose-migration • https://www.youtube.com/watch?v=y10I6Suhvtc • https://medium.com/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583 ここまでのまとめ
71. 画面遷移
72. 画面遷移 Navigation Compose 引用：https://developer.android.com/develop/ui/compose/navigation
73. 画面遷移 Navigation Compose と Jetpack Navigation 特徴 Navigation Compose Jetpack Navigation 基礎となる概念 Composableベース Activity/Fragmentベース 定義方法 Kotlinコード (NavHost, composabe()) XML (Navigation Graph) その他の特徴 Jetpack Composeとの 高い親和性 定義をUIで確認可能
74. 画面遷移 > YouTube Fragments in Compose 引用：https://www.youtube.com/watch?v=DZJV-ZKQ634
75. 想定される課題 • Navigation Composeへの移行前にロジックの整理が必要 • 異なる画面遷移システム間での操作の複雑化 • データの受け渡しの複雑化 など 画面遷移 FragmentTransaction使用のケース
76. パフォーマンス チューニング
77. パフォーマンスチューニング 引用：https://developer.android.com/develop/ui/compose/performance
78. パフォーマンスチューニング > Codelabs Practical performance problem solving in Jetpack Compose このコードラボで学べる・体験できること • System traceとCompositionのtraceでパ フォーマンスの問題を特定する方法 • スムーズにレンダリングできる、パフォーマ ンスの高い Compose アプリを作成する方 法 など 引用：https://developer.android.com/codelabs/jetpack-compose-performance
79. まとめ
80. まとめ • Jetpack Composeに関する基礎から実践まで多くの情報ソース・学 習コンテンツが提供されている • Codelab、動画、コードスニペットなど手を動かしながら情報をイン プットするコンテンツも多数 • 業務フェーズにあわせて、各種コンテンツを選択する
81. ご清聴 ありがとうございました
82. Appendix • https://developer.android.com/develop/ui • https://developer.android.com/courses/jetpack-compose/course • https://developer.android.com/develop/ui/compose/samples • https://www.youtube.com/@AndroidDevelopers/videos • https://github.com/android/codelab-android-compose • https://github.com/google/jetpack-camera-app • https://developer.android.com/develop/ui/compose/tutorial • https://developer.android.com/codelabs/jetpack-compose-basics • https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1 • https://developer.android.com/courses/android-basics-compose/course • https://developer.android.com/develop/ui/compose/setup#setup-compose • https://developer.android.com/develop/ui/compose/compiler • https://github.com/android/compose-samples/pull/1354 • https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility • https://developer.android.com/develop/ui/compose/bom/bom-mapping • https://developer.android.com/develop/ui/compose/documentation • https://developer.android.com/develop/ui/compose/layouts • https://developer.android.com/codelabs/jetpack-compose-layouts • https://developer.android.com/develop/ui/compose/modifiers-list
83. Appendix • https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-2 • https://developer.android.com/develop/ui/compose/layouts/constraintlayout • https://github.com/search?q=repo%3Aandroid%2Fcompose-samples+ConstraintLayout&type=code • https://github.com/android/snippets/blob/6ea91d123db3e094b82c3c8b6245e75114dfed60/compose/snippets/src /main/java/com/example/compose/snippets/layouts/ConstraintLayoutSnippets.kt • https://developer.android.com/quick-guides • https://proandroiddev.com/finally-working-samples-in-android-studio-7edd8bd05bba • https://patrykandpatrick.com/vico/wiki/ • https://github.com/patrykandpatrick/vico/blob/master/vico/compose/src/main/java/com/patrykandpatrick/vico/co mpose/cartesian/CartesianChartHost.kt • https://android-developers.googleblog.com/2024/06/3-fun-experiments-to-try-for-your-next-android-app-using-go ogle-ai-studio.html • https://developer.android.com/courses/pathways/android-basics-compose-unit-8-pathway-2 • https://developer.android.com/codelabs/jetpack-compose-migration • https://www.youtube.com/watch?v=y10I6Suhvtc • https://medium.com/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583 • https://developer.android.com/develop/ui/compose/navigation • https://www.youtube.com/watch?v=DZJV-ZKQ634 • https://developer.android.com/develop/ui/compose/performance • https://developer.android.com/codelabs/jetpack-compose-performance