Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kako351
December 16, 2022

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

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

kako351

December 16, 2022
Tweet

More Decks by kako351

Other Decks in Programming

Transcript

  1. チームで導入する
    Jetpack Compose
    小林 克麻
    株式会社おいしい健康
    Android エンジニア

    View Slide

  2. 小林 克麻 (@kako_351)
    株式会社おいしい健康
    Android エンジニア
    「おいしい健康 Android アプリ」の開発をリ
    リース時から今まで担当してきました。今回の
    導入事例は「おいしい健康 Android アプリ」
    での話をします。
    自己紹介

    View Slide

  3. View Slide

  4. View Slide

  5. Contents 01
    02
    03
    04
    05
    弊社の Jetpack Compose 導入状況
    導入の進め方
    メリット
    課題と対応
    今後の TRY

    View Slide

  6. 弊社の Jetpack Compose
    導入状況
    「おいしい健康 Android アプリ」はリリースして 3 年が経ちました。弊社の Androidチーム
    では、Jetpack Compose がリリースされてから早いタイミングで導入してきたのでその事
    例をご紹介します。

    View Slide

  7. 導入から現在までの使用につ
    いて
    おいしい健康では Jetpack Compose
    を 2021 年 11 月から導入を開始しまし
    た。導入時点での最新バージョンは
    1.0.1。 Jetpack Compose がリリースさ
    れてから早いタイミングで導入をしまし
    た。
    導入から約 1 年経ちましたが、その間
    Jetpack Compose を使用し続けてきま
    した。現在ではバージョン 1.3.0 を使用し
    ています。新規で画面を実装するときは
    基本的に Jetpack Compose を使用して
    います。
    導入時点 現在

    View Slide

  8. おいしい健康の画面全体に対するJetpack
    Compose 使用率は 29.55%
    (約 30%)。導入箇所ですが、ホーム画面に
    部分的に導入したり、リスト画面すべてを
    Jetpack Compose で実装したりと積極的
    に使用してきました。
    Jetpack Compose
    の割合
    30%
    Jetpack Compose の割合

    View Slide

  9. 導入の理由
    導入当時チームメンバー全員
    が使いたい意思を持ち合わせ
    おり、メンバーの意向が揃って
    いました。
    また、Jetpack Compose によ
    り開発スピードの向上も期待し
    ていました。
    サポートが minSDK 21 以上で
    あったり、Android View や
    Fragment との相互運用可能
    であったり、既存アプリへの導
    入がしやすく既存の実装が障
    壁となることはありません。
    モチベーション 導入のしやすさ
    AndroidView のバグの中には
    OS のバージョンに依存するも
    のが存在していました。
    Jetpack Compose では OS
    に依存しないかたちで View を
    提供可能なため、OS バージョ
    ン依存のバグがなくなることを
    期待していました。
    バグの減少

    View Slide

  10. 導入の進め方
    既存アプリにも導入しやすい Jetpack Compose ですが、プロダクトに導入する上では考
    慮すべきことや懸念点があると思います。おいしい健康ではどのように導入を進めてきたの
    か、その事例をご紹介します。

    View Slide

  11. おいしい健康には「買い物リスト」という機能
    が存在しますが、初めてJetpack
    Compose を導入した画面になります。
    既存機能の一部を Jetpack Compose に
    置き換えることも検討しましたが、リプレイス
    よりも新機能の開発で使用する方が進めや
    すいと考えました。
    新機能の開発時に初導入

    View Slide

  12. Jetpack Compose を使用する
    ことにこだわりすぎないことも大
    事なことだと考えてきました。
    Jetpack Compose をあえて使
    用しなかった一例をご紹介しま
    す。
    実装の悩みを ISSUE 化
    Jetpack Compose を
    チームに浸透させていく
    チームで Jetpack Compose
    の Codelab Pathway に取り組
    み知見の共有・学習してチーム
    全体の Jetpack Compose の
    理解を底上げしました。
    メンバーが実装時に悩んだこと
    を記載する場所としてGithub
    の ISSUE を用意しました。
    Codelab 会 無理に使わない

    View Slide

  13. チームで Jetpack Compose Codelab
    Pathway に取り組みました。
    Codelab 中にお互いに質問したり疑問を
    一緒に解決したり、メンバー全員で知見を
    共有・学習できた時間となりました。
    この Codelab がとても手厚く Jetpack
    Compose を学習できるようになっていて、
    Jetpack Compose の学習を進めていたメ
    ンバーとそうでないメンバーの知識の差を
    埋めることができました。
    Codelab 会

    View Slide

  14. Jetpack Compose を早いタイミングで導
    入したこともあり実装時に何がベストか悩む
    ことがありました。
    メンバーが実装時に悩んだことを共有・管
    理する場として Github の ISSUE を活用し
    ました。
    知見や参考資料を共有したり、議論したり
    など悩みつつもチームで進めていきまし
    た。
    実装の悩みを
    ISSUE 化

    View Slide

  15. Jetpack Compose の使用が難しい場合
    には、AndroidView で実装する方針をとり
    ました。
    例えば、初期のころは TextField の日本語
    入力において入力テキストの削除が削除ボ
    タン長押しで削除できない問題があったた
    め、AndroidView の EditText を利用しま
    した。
    Jetpack Compose から AndroidView を
    呼べる相互運用のメリットの恩恵が受けら
    れたケースでもあると感じています。
    無理に使わない

    View Slide

  16. Jetpack Compose をチームで取り組み導入を進めてきた中で感じたメリットを
    ご紹介します。
    導入して感じたメリット

    View Slide

  17. メリット
    同じ実装でも AndroidView と
    比較すると少ないコードで実装
    できます。コードの少なさはシン
    プルであり、バグのリスクを軽減
    できます。
    Jetpack Compose はアニメー
    ションの実装も簡単です。動きを
    つけることでよりリッチなアプリを
    実現できます。
    コード量の削減 アニメーション
    デバッグを効率的に行える開発
    ツールが揃っています。便利な
    機能が備わっているので一例を
    ご紹介します。
    強力な開発ツール

    View Slide

  18. リストの画面を実装した場合、従来の
    RecyclerView と Jetpack Compose で比
    較したところ大幅にコードの削減ができま
    した。
    コード量の削減

    View Slide

  19. ShoppingListAdapter.kt
    class ShoppingListAdapter(private val data: List):
    RecyclerView.Adapter() {
    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)

    View Slide

  20. ShoppingList.kt
    @Composable
    fun ShoppingList(data: List) {
    LazyColumn {
    items(data) {
    ShoppingListItem(it)
    }
    }
    }
    @Composable
    fun ShoppingListItem(item: ShoppingItem) {
    // ...
    }

    View Slide

  21. Jetpack Compose はアニメーションの実
    装も少ないコードで実現できます。
    献立をブックマークする機能があり、ブック
    マーク時にカード全体がアニメーションしま
    す。このアニメーションも Jetpack
    Compose で実装しています。
    アニメーション

    View Slide

  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),
    ),
    )

    View Slide

  23. デバッグを効率的に行える開発ツールが
    揃っています。特に Preview が優秀で複
    数デバイスの Preview や、実機 Preview、
    インタラクティブモードなど強力なツールが
    揃っています。
    インタラクティブモードでは Android
    Studio 上で Composable の挙動を確認
    できます。アプリを立ち上げる必要がなくデ
    バッグを効率的に行えます。
    強力な開発ツール

    View Slide

  24. Jetpack Compose を導入するメリットを紹介しましたが、今度はチームで取り組んだ中で見え
    てきた課題とその課題にどのように対応してきたのか事例をご紹介します。
    課題と対応

    View Slide

  25. 人によって Composable の粒度が異なっ
    ていました。
    特別問題を引き起こすケースはありません
    でしたが、実装方針が人に依存していまし
    た。
    粒度が揃わない
    他社様のブログなどを参考に Atomic デ
    ザインを採用してみました。
    これにより粒度がある程度揃いましたが、
    Atomic デザインに限らずチームとしての
    方針を立てておくとよかったなと思ってい
    ます。
    Atomic デザイン採用

    View Slide

  26. Preview は非常に便利なツールではある
    のですが、実際のアプリのビルドの時間が
    影響するため Preview が遅い問題があり
    ました。
    Preview 表示が遅い
    本体のアプリとは別に Preview 用のアプリ
    ケーションモジュールを作成しました。
    Preview はそのアプリケーションモジュー
    ル内で行い Preview の高速化を図りまし
    た。
    Preview 用アプリ

    View Slide

  27. 本体アプリの Feature モジュールでは89
    秒、Preview 用アプリケーションモジュール
    では 11 秒という結果になり約87% 時間が
    短縮しました。
    Preview 時間計測
    87%
    Preview 時間短縮

    View Slide

  28. Atomic デザインを採用しましたが、
    チームに合わせた方針が必要だと感じ
    ています。
    TwitterCompose ルールや公開されて
    いるリポジトリを参考にしつつ、チームに
    合わせてカスタマイズして導入すること
    を検討しています。
    今後の Try
    実装タスクの中で Jetpack Compose に
    置き換えられそうなコンポーネントはつい
    でに置き換えるという方針で徐々に
    Jetpack Compose 化を今後もすすめて
    いく予定です。
    チームで実装方針を作る 既存画面への導入について

    View Slide

  29. 「おいしい健康」では Android エンジニア
    を募集しています。
    Jetpack Compose を使いたい、導入の詳
    しい話を聞きたいと言う方は右の QR コード
    からカジュアル面談お待ちしております。
    [宣伝]
    Android エンジニア
    募集しています

    View Slide

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

    View Slide

  31. Thank you!

    View Slide