チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver

Transcript

1. 【YUMEMI.grow 】あの素晴らしいLTをもう一度・2023
   2023/03/22 [email protected]おいしい健康
   チームで導入する
   Jetpack Compose
   

   View Slide

2. 自己紹介
   kako351 / @kako_351
   おいしい健康 Androidエンジニア
   仕事
   ● バイク（ハンターカブ）
   ● ギター
   ● コーヒー自家焙煎
   趣味
   2
   再演理由
   スライド冒頭の数ページが映像に映っていなかったため
   （再演の機会ありがとうございます...!）
   

   View Slide

3. 本日話す内容 01
   02
   03
   04
   05
   弊社サービス紹介
   Jetpack Compose導入状況
   導入の進め方
   メリット
   課題と対応
   

   View Slide

4. View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. メリット
    同じ実装でもAndroidViewと比
    較すると少ないコードで実装で
    きます。コードの少なさはシン
    プルであり、バグのリスクを軽
    減できます。
    Jetpack Composeはアニメー
    ションの実装も簡単です。動き
    をつけることでよりリッチなアプ
    リを実現できます。
    コード量の削減 アニメーション
    デバッグを効率的に行える開
    発ツールが揃っています。特
    にPreviewが優秀で複数デバ
    イスのPreviewや、実機
    Preview、インタラクティブモー
    ドなど強力なツールが揃ってい
    ます。
    強力な開発ツール
    

    View Slide

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

    View Slide

18. 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

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

    View Slide

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

    View Slide

21. 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

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

    View Slide

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

    View Slide

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

    View Slide

25. Previewは非常に便利なツールではある
    のですが、Featureモジュールだと
    Previewが遅い問題がありました。
    （依存関係に寄るものだと考えています）
    Preview表示が遅い
    Composableモジュール（Composable置
    き場）を作成しました。
    Previewはそのモジュール内で行い
    Previewの高速化を図りました。
    Composable
    モジュールの作成
    

    View Slide

26. ● Jetpack Composeは新規画面の実装時に初導入
    ● チームへのCompose浸透のため3つの取り組みをした
    ○ Codelab会
    ○ 実装の悩みのIssue管理・共有
    ○ Composeを無理に使わない
    ● メリット
    ○ コードの削減
    ○ アニメーションの実装が簡潔
    ○ 開発ツールが強力
    ● 課題と対応
    ○ Composableの単位が揃わない
    ■ チームで方針を作る
    ○ Previewが遅い
    ■ Composableモジュールの作成
    まとめ
    

    View Slide

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

    View Slide

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

    View Slide