【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康

「DevFest & Android Dev Summit Japan 2022」でのLT登壇資料です

1. チームで導入する Jetpack Compose 小林 克麻 株式会社おいしい健康 Android エンジニア
2. 小林 克麻 (@kako_351) 株式会社おいしい健康 Android エンジニア 「おいしい健康 Android アプリ」の開発をリ リース時から今まで担当してきました。今回の 導入事例は「おいしい健康 Android アプリ」 での話をします。 自己紹介
5. Contents 01 02 03 04 05 弊社の Jetpack Compose 導入状況 導入の進め方 メリット 課題と対応 今後の TRY
6. 弊社の Jetpack Compose 導入状況 「おいしい健康 Android アプリ」はリリースして 3 年が経ちました。弊社の Androidチーム では、Jetpack Compose がリリースされてから早いタイミングで導入してきたのでその事 例をご紹介します。
7. 導入から現在までの使用につ いて おいしい健康では Jetpack Compose を 2021 年 11 月から導入を開始しまし た。導入時点での最新バージョンは 1.0.1。 Jetpack Compose がリリースさ れてから早いタイミングで導入をしまし た。 導入から約 1 年経ちましたが、その間 Jetpack Compose を使用し続けてきま した。現在ではバージョン 1.3.0 を使用し ています。新規で画面を実装するときは 基本的に Jetpack Compose を使用して います。 導入時点 現在
8. おいしい健康の画面全体に対するJetpack Compose 使用率は 29.55% (約 30%)。導入箇所ですが、ホーム画面に 部分的に導入したり、リスト画面すべてを Jetpack Compose で実装したりと積極的 に使用してきました。 Jetpack Compose の割合 30% Jetpack Compose の割合
9. 導入の理由 導入当時チームメンバー全員 が使いたい意思を持ち合わせ おり、メンバーの意向が揃って いました。 また、Jetpack Compose によ り開発スピードの向上も期待し ていました。 サポートが minSDK 21 以上で あったり、Android View や Fragment との相互運用可能 であったり、既存アプリへの導 入がしやすく既存の実装が障 壁となることはありません。 モチベーション 導入のしやすさ AndroidView のバグの中には OS のバージョンに依存するも のが存在していました。 Jetpack Compose では OS に依存しないかたちで View を 提供可能なため、OS バージョ ン依存のバグがなくなることを 期待していました。 バグの減少
10. 導入の進め方 既存アプリにも導入しやすい Jetpack Compose ですが、プロダクトに導入する上では考 慮すべきことや懸念点があると思います。おいしい健康ではどのように導入を進めてきたの か、その事例をご紹介します。
11. おいしい健康には「買い物リスト」という機能 が存在しますが、初めてJetpack Compose を導入した画面になります。 既存機能の一部を Jetpack Compose に 置き換えることも検討しましたが、リプレイス よりも新機能の開発で使用する方が進めや すいと考えました。 新機能の開発時に初導入
12. Jetpack Compose を使用する ことにこだわりすぎないことも大 事なことだと考えてきました。 Jetpack Compose をあえて使 用しなかった一例をご紹介しま す。 実装の悩みを ISSUE 化 Jetpack Compose を チームに浸透させていく チームで Jetpack Compose の Codelab Pathway に取り組 み知見の共有・学習してチーム 全体の Jetpack Compose の 理解を底上げしました。 メンバーが実装時に悩んだこと を記載する場所としてGithub の ISSUE を用意しました。 Codelab 会 無理に使わない
13. チームで Jetpack Compose Codelab Pathway に取り組みました。 Codelab 中にお互いに質問したり疑問を 一緒に解決したり、メンバー全員で知見を 共有・学習できた時間となりました。 この Codelab がとても手厚く Jetpack Compose を学習できるようになっていて、 Jetpack Compose の学習を進めていたメ ンバーとそうでないメンバーの知識の差を 埋めることができました。 Codelab 会
14. Jetpack Compose を早いタイミングで導 入したこともあり実装時に何がベストか悩む ことがありました。 メンバーが実装時に悩んだことを共有・管 理する場として Github の ISSUE を活用し ました。 知見や参考資料を共有したり、議論したり など悩みつつもチームで進めていきまし た。 実装の悩みを ISSUE 化
15. Jetpack Compose の使用が難しい場合 には、AndroidView で実装する方針をとり ました。 例えば、初期のころは TextField の日本語 入力において入力テキストの削除が削除ボ タン長押しで削除できない問題があったた め、AndroidView の EditText を利用しま した。 Jetpack Compose から AndroidView を 呼べる相互運用のメリットの恩恵が受けら れたケースでもあると感じています。 無理に使わない
16. Jetpack Compose をチームで取り組み導入を進めてきた中で感じたメリットを ご紹介します。 導入して感じたメリット
17. メリット 同じ実装でも AndroidView と 比較すると少ないコードで実装 できます。コードの少なさはシン プルであり、バグのリスクを軽減 できます。 Jetpack Compose はアニメー ションの実装も簡単です。動きを つけることでよりリッチなアプリを 実現できます。 コード量の削減 アニメーション デバッグを効率的に行える開発 ツールが揃っています。便利な 機能が備わっているので一例を ご紹介します。 強力な開発ツール
18. リストの画面を実装した場合、従来の RecyclerView と Jetpack Compose で比 較したところ大幅にコードの削減ができま した。 コード量の削減
19. ShoppingListAdapter.kt class ShoppingListAdapter(private val data: List<ShoppingItem>): RecyclerView.Adapter<ShoppingListAdapter.ViewHolder>() { class ViewHolder(view: View): RecyclerView.ViewHolder(view){} override fun getItemCount(): Int = data.size override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { // ... return ViewHolder(view) } override fun onBindViewHolder(holder: ViewHolder, position: Int) } ShoppingListFragment.kt val adapter = ShoppingListAdapter(data) val recyclerView: RecyclerView = findViewById(R.id.recycler_view) recyclerView.adapter = adapter recyclerView.layoutManager = LinearLayoutManager(requireContext(), RecyclerView.VERTICAL, false)
20. ShoppingList.kt @Composable fun ShoppingList(data: List<ShoppingItem>) { LazyColumn { items(data) { ShoppingListItem(it) } } } @Composable fun ShoppingListItem(item: ShoppingItem) { // ... }
21. Jetpack Compose はアニメーションの実 装も少ないコードで実現できます。 献立をブックマークする機能があり、ブック マーク時にカード全体がアニメーションしま す。このアニメーションも Jetpack Compose で実装しています。 アニメーション
22. RecommendedMenuCard.kt var visible by remember { mutableStateOf(true) } AnimatedVisibility( visible = visible, exit = scaleOut( targetScale = 0.2f, ) + slideOutVertically { with(density) { +200.dp.roundToPx() } } + fadeOut( animationSpec = tween(delayMillis = 200), ), )
23. デバッグを効率的に行える開発ツールが 揃っています。特に Preview が優秀で複 数デバイスの Preview や、実機 Preview、 インタラクティブモードなど強力なツールが 揃っています。 インタラクティブモードでは Android Studio 上で Composable の挙動を確認 できます。アプリを立ち上げる必要がなくデ バッグを効率的に行えます。 強力な開発ツール
24. Jetpack Compose を導入するメリットを紹介しましたが、今度はチームで取り組んだ中で見え てきた課題とその課題にどのように対応してきたのか事例をご紹介します。 課題と対応
25. 人によって Composable の粒度が異なっ ていました。 特別問題を引き起こすケースはありません でしたが、実装方針が人に依存していまし た。 粒度が揃わない 他社様のブログなどを参考に Atomic デ ザインを採用してみました。 これにより粒度がある程度揃いましたが、 Atomic デザインに限らずチームとしての 方針を立てておくとよかったなと思ってい ます。 Atomic デザイン採用
26. Preview は非常に便利なツールではある のですが、実際のアプリのビルドの時間が 影響するため Preview が遅い問題があり ました。 Preview 表示が遅い 本体のアプリとは別に Preview 用のアプリ ケーションモジュールを作成しました。 Preview はそのアプリケーションモジュー ル内で行い Preview の高速化を図りまし た。 Preview 用アプリ
27. 本体アプリの Feature モジュールでは89 秒、Preview 用アプリケーションモジュール では 11 秒という結果になり約87% 時間が 短縮しました。 Preview 時間計測 87% Preview 時間短縮
28. Atomic デザインを採用しましたが、 チームに合わせた方針が必要だと感じ ています。 TwitterCompose ルールや公開されて いるリポジトリを参考にしつつ、チームに 合わせてカスタマイズして導入すること を検討しています。 今後の Try 実装タスクの中で Jetpack Compose に 置き換えられそうなコンポーネントはつい でに置き換えるという方針で徐々に Jetpack Compose 化を今後もすすめて いく予定です。 チームで実装方針を作る 既存画面への導入について
29. 「おいしい健康」では Android エンジニア を募集しています。 Jetpack Compose を使いたい、導入の詳 しい話を聞きたいと言う方は右の QR コード からカジュアル面談お待ちしております。 [宣伝] Android エンジニア 募集しています
30. ご清聴ありがとう ございました
31. Thank you!