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

小林 慶弘 (Yoshihiro Kobayashi) a.k.a nyafunta9858 ● Android Engineer @ Yappli, Inc. ● 趣味：ガジェット集め、ゲーム、カメラ...

本セッションについて

本セッションについて 宣言的？ リアクティブ？ ホイスティング？

本セッションについて 公式情報は？ リファレンスにな るコードは？ ハンズオンは？

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

本セッションについて 目標 ● Jetpack Composeを使ったUI開発の基礎固めができている ● Jetpack Composeでの開発に必要な情報に到達しやすくなる ● Jetpack Composeを使ったUIのパフォーマンスチューニングができ る ● 従来のAndroid Viewで実現していたような複雑なUIを開発できる

本セッションについて 注意書き ● Jetpack Compose提供機能の詳細を全網羅するものではありませ ん ● ご紹介する情報ソース・コンテンツ本来の使い方とは異なる可能性 があります ● 上記を踏まえ、ステップアップのための足掛かり、話題のネタのひと つとしてお楽しみいただけますと幸いです

目次 ● 開発を始めるまでに ● UI開発 ● 画面遷移 ● パフォーマンスチューニング ● まとめ

開発を始めるまでに

ここでおさえておきたいポイント ● Jetpack Composeとは？ ● 参考になる情報ソース ● 環境セットアップ ○ 開発環境の構築方法 ○ Previewの確認方法 ● Jetpack Composeでできること ● 「導入しやすい」単位

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

参考になる情報ソース ● Android Developers ○ Guides, Pathway, Samples and more ● YouTube Channel ○ MAD Skills, Now In Android and mroe ● GitHub ○ Codelabs, Sample Project and more

参考になる情報ソース 注意事項 😥

参考になる情報ソース Android Developers 引用：https://developer.android.com/develop/ui

参考になる情報ソース > Android Developers Pathway 引用：https://developer.android.com/courses/jetpack-compose/course

参考になる情報ソース > Android Developers Compose samples 引用：https://developer.android.com/develop/ui/compose/samples

参考になる情報ソース YouTube Channel 引用：https://www.youtube.com/@AndroidDevelopers/videos

参考になる情報ソース > GitHub Codelabs 引用：https://github.com/android/codelab-android-compose

参考になる情報ソース > GitHub Jetpack Camera App 引用：https://github.com/google/jetpack-camera-app

参考になる情報ソース ● Android Developers ○ Guides, Pathway, Samples and more ● YouTube Channel ○ MAD Skills, Now In Android and mroe ● GitHub ○ Codelabs, Sample Project and more

ここでおさえておきたいポイント ● Jetpack Composeとは？ ● 参考になる情報ソース ● 環境セットアップ ○ 開発環境の構築方法 ○ Previewの確認方法 ● Jetpack Composeでできること ● 「導入しやすい」単位

環境セットアップ チュートリアル 引用：https://developer.android.com/develop/ui/compose/tutorial

環境セットアップ Codelabs 引用：https://github.com/android/codelab-android-compose

環境セットアップ > Codelabs Jetpack Compose Basics このコードラボで学べる・体験できること ● 一からのComposeを使ったアプリ作成 ● Compose とは何か ● Compose を使用して UI を作成する方法 ● Compose で作成された UI をPreviewする方 法 ● Composable 関数で状態を管理する方法 ● 効率の良いリストを作成する方法 など 引用：https://developer.android.com/codelabs/jetpack-compose-basics

環境セットアップ > Pathway Compose essentials 引用：https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-1

環境セットアップ Android Basics with Compose 引用：https://developer.android.com/courses/android-basics-compose/course 想定合計時間：100時間超 ● Kotlin の基礎 ● Android Studio のセットアップ ● スクロールするリストの追加 ● Architecture Componentsの利用 ● 通信処理 ● WorkManagerの使用 など

環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：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

環境セットアップ Kotlinとの互換性 引用：https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility

環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/setup#setup-compose

環境セットアップ 開発環境設定 -既存プロジェクト向け- 引用：https://developer.android.com/develop/ui/compose/setup#setup-compose

環境セットアップ Jetpack Composeと互換性 引用：https://developer.android.com/develop/ui/compose/bom/bom-mapping

環境セットアップ Import an Android Code Sample

環境セットアップ Guides 引用：https://developer.android.com/develop/ui/compose/documentation

ここでおさえておきたいポイント ● Jetpack Composeとは？ ● 参考になる情報ソース ● 環境セットアップ ○ 開発環境の構築方法 ○ Previewの確認方法 ● Jetpack Composeでできること ● 「導入しやすい」単位

「導入しやすそう」を定義する 新規プロジェクト ● シンプルな画面（e.g. 設定画面、ウェルカム画面など） 既存プロジェクト ● シンプルな画面（e.g. 設定画面、ウェルカム画面など） ● シンプルな既存画面（e.g. 設定画面、ウェルカム画面など） ● View単位（e.g. リスト表示の１セル、画面内の1要素など） など

「導入しやすそう」を定義する

ここまでのまとめ ● 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

UI開発

ここでおさえておきたいポイント ● 基本的なUI ● 複雑なUI ● カスタムAndroid View ● 既存UI

UI開発 > 基本となるUI App Layout / Components 引用：https://developer.android.com/develop/ui/compose/layouts

UI開発 > 基本となるUI > Codelabs Basic layouts in Compose このコードラボで学べる・体験できること ● 修飾子がComposableを拡張する仕組み ● Column や LazyRow などの標準レイアウト コン ポーネントが子Composableを配置する仕組み ● 位置揃えと配置により、親 Composable内で子の 位置が変化する様子 ● Scaffold やボトム ナビゲーションなどの Material Composable ● さまざまな画面構成向けのレイアウトを作成する 方法 など 引用：https://developer.android.com/codelabs/jetpack-compose-layouts

UI開発 > 基本となるUI List of Compose modifiers 引用：https://developer.android.com/develop/ui/compose/modifiers-list

UI開発 > 基本となるUI > Pathway Layouts, theming, and animation このPathwayで学べる・体験できること ● Compose のレイアウトと修飾子の基礎 ● Lazy レイアウト ● マテリアル デザイン 3 でアプリのテーマを設定する ● テキストのスタイル設定 ● アプリの魅力を高める 5 つの簡単なアニメーション ● 要素のアニメーション化 ● カスタム レイアウトとカスタム グラフィック ● 制約と修飾子の順序 など 引用：https://developer.android.com/courses/pathways/jetpack-compose-for-android-developers-2

UI開発 > 基本となるUI ConstraintLayout 引用：https://developer.android.com/develop/ui/compose/layouts/constraintlayout

UI開発 > 基本となるUI ConstraintLayout 引用：https://github.com/search?q=repo%3Aandroid%2Fcompose-samples+ConstraintLayout&type=code

UI開発 > 基本となるUI ConstraintLayout 引用：https://github.com/android/snippets/blob/6ea91d123db3e094b82c3c8b6245e75114dfed60/compose/snippets /src/main/java/com/example/compose/snippets/layouts/ConstraintLayoutSnippets.kt

UI開発 > 基本となるUI ConstraintLayout

UI開発 > 基本となるUI Quick Guides 引用：https://developer.android.com/quick-guides

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 など

UI開発 > 基本となるUI Sample Annotation

UI開発 > 基本となるUI Sample Annotation 引用：https://proandroiddev.com/finally-working-samples-in-android-studio-7edd8bd05bba

ここでおさえておきたいポイント ● 基本的なUI ● 複雑なUI ● カスタムAndroid View ● 既存UI

複雑なUI グラフ描画 引用：https://patrykandpatrick.com/vico/wiki/

複雑な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/

複雑な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

複雑な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

複雑な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

複雑なUI > グラフ描画 Canvasの利用 引用：https://android-developers.googleblog.com/2024/06/3-fun-experiments-to-try-for-your-next-android-app-using-google-ai-studio.html

ここでおさえておきたいポイント ● 基本的なUI ● 複雑なUI ● カスタムAndroid View ● 既存UI

カスタムAndroid View AndroidView Composable @Composable fun InteropExistingAndroidView() { // Adds AndroidView to Compose AndroidView( modifier = Modifier.fillMaxSize(), factory = { context -> MyExistingAndroidView(context).apply { : } }, update = { view -> : } ) }

カスタムAndroid View AndroidView Composable @Composable fun InteropExistingAndroidView() { // Adds AndroidView to Compose AndroidView( modifier = Modifier.fillMaxSize(), factory = { context -> MyExistingAndroidView(context).apply { : } }, update = { view -> : } ) }

カスタム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のケース など

ここでおさえておきたいポイント ● 基本的なUI ● 複雑なUI ● カスタムAndroid View ● 既存UI

引用：https://developer.android.com/codelabs/jetpack-compose-migration 既存UI > Codelabs Migration to Jetpack Compose このコードラボで学べる・体験できること ● さまざまな移行方法 ● アプリを段階的に Compose に移行する方法 ● ビューを使用して作成した既存の画面に Compose を追加する方法 ● Compose 内からビューを使用する方法 ● ビューと Compose の両方で作成された混合 画面をテストする方法 など

既存UI > YouTube From Views to Compose 引用：https://www.youtube.com/watch?v=y10I6Suhvtc

既存UI Using Compose in RecyclerView 引用：https://medium.com/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583

● 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 ここまでのまとめ

画面遷移

画面遷移 Navigation Compose 引用：https://developer.android.com/develop/ui/compose/navigation

画面遷移 Navigation Compose と Jetpack Navigation 特徴 Navigation Compose Jetpack Navigation 基礎となる概念 Composableベース Activity/Fragmentベース 定義方法 Kotlinコード (NavHost, composabe()) XML (Navigation Graph) その他の特徴 Jetpack Composeとの 高い親和性 定義をUIで確認可能

画面遷移 > YouTube Fragments in Compose 引用：https://www.youtube.com/watch?v=DZJV-ZKQ634

想定される課題 ● Navigation Composeへの移行前にロジックの整理が必要 ● 異なる画面遷移システム間での操作の複雑化 ● データの受け渡しの複雑化 など 画面遷移 FragmentTransaction使用のケース

パフォーマンス チューニング

パフォーマンスチューニング 引用：https://developer.android.com/develop/ui/compose/performance

パフォーマンスチューニング > Codelabs Practical performance problem solving in Jetpack Compose このコードラボで学べる・体験できること ● System traceとCompositionのtraceでパ フォーマンスの問題を特定する方法 ● スムーズにレンダリングできる、パフォーマ ンスの高い Compose アプリを作成する方 法 など 引用：https://developer.android.com/codelabs/jetpack-compose-performance

まとめ

まとめ ● Jetpack Composeに関する基礎から実践まで多くの情報ソース・学 習コンテンツが提供されている ● Codelab、動画、コードスニペットなど手を動かしながら情報をイン プットするコンテンツも多数 ● 業務フェーズにあわせて、各種コンテンツを選択する

ご清聴 ありがとうございました

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

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