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

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

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

No content

No content

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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