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

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

kako351
March 22, 2023

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

kako351

March 22, 2023
Tweet

More Decks by kako351

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide