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. 自己紹介 kako351 / @kako_351 おいしい健康 Androidエンジニア 仕事 • バイク(ハンターカブ) •

    ギター • コーヒー自家焙煎 趣味 2 再演理由 スライド冒頭の数ページが映像に映っていなかったため (再演の機会ありがとうございます...!)
  2. 弊社のJetpack Compose 導入状況 おいしい健康ではJetpack Compose を2021年11月から導入を開始しまし た。導入時点での最新バージョンは 1.0.1 。Jetpack Composeがリリースさ

    れてから早いタイミングで導入をしまし た。 導入から約1年経ちましたが、その間 Jetpack Composeを使用し続けてきま した。現在ではバージョン 1.3.0を使用し ています。新規で画面を実装するときは 基本的にJetpack Composeを使用して います。 導入時点 現在
  3. 導入の理由 導入当時チームメンバー全員 が使いたい意思を持ち合わせ おり、メンバーの意向が揃って いました。 また、Jetpack Composeによ り開発スピードの向上も期待し ていました。 サポートがminSDK

    21以上で あったり、Android Viewや Fragmentとの相互運用可能で あったり、既存アプリへの導入 がしやすく既存の実装が障壁 となることはありません。 モチベーション 導入のしやすさ AndroidViewのバグの中には OSのバージョンに依存するも のが存在していました。 Jetpack ComposeではOSに 依存しないかたちで Viewを提 供可能なため、OSバージョン 依存のバグがなくなることを期 待していました。 バグの減少
  4. Jetpack Composeを使用する ことにこだわりすぎないことも 大事なことだと考えてきまし た。Jetpack Composeをあえ て使用しなかった一例をご紹 介します。 実装の悩みをISSUE化 Jetpack

    Composeを チームに浸透させていく チームでJetpack Compose のCodelab Pathwayに取り組 み知見の共有・学習してチー ム全体のJetpack Compose の理解を底上げしました。 メンバーが実装時に悩んだこと を記載する場所として Github のISSUEを用意しました。 Codelab会 無理に使わない
  5. メリット 同じ実装でもAndroidViewと比 較すると少ないコードで実装で きます。コードの少なさはシン プルであり、バグのリスクを軽 減できます。 Jetpack Composeはアニメー ションの実装も簡単です。動き をつけることでよりリッチなアプ

    リを実現できます。 コード量の削減 アニメーション デバッグを効率的に行える開 発ツールが揃っています。特 にPreviewが優秀で複数デバ イスのPreviewや、実機 Preview、インタラクティブモー ドなど強力なツールが揃ってい ます。 強力な開発ツール
  6. 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)
  7. ShoppingList.kt @Composable fun ShoppingList(data: List<ShoppingItem>) { LazyColumn { items(data) {

    ShoppingListItem(it) } } } @Composable fun ShoppingListItem(item: ShoppingItem) { // ... }
  8. 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), ), )
  9. • Jetpack Composeは新規画面の実装時に初導入 • チームへのCompose浸透のため3つの取り組みをした ◦ Codelab会 ◦ 実装の悩みのIssue管理・共有 ◦

    Composeを無理に使わない • メリット ◦ コードの削減 ◦ アニメーションの実装が簡潔 ◦ 開発ツールが強力 • 課題と対応 ◦ Composableの単位が揃わない ▪ チームで方針を作る ◦ Previewが遅い ▪ Composableモジュールの作成 まとめ