チームでJetpack Composeを導入してみた

Transcript

1. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 チームでJetpack Composeを導入してみた 株式会社アンドパッド 開発本部 SWE 橋詰 篤志 2022.06.30
2. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 自己紹介 橋詰 篤志 / Atsushi Hashizume 職種：Androidエンジニア / 開発部SWE 　　 （担当プロダクト：施工管理アプリ） 入社：2021年10月 出身：三重県 ⛩🐃🏎 好き：写真📸、スキューバダイビング🤿 写真いれる
3. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ANDPAD?
4. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 アンドパッドについて
5. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 アンドパッドについて（サービス概要）
6. 企業・プロダクト概要 • テキスト
7. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 本日お話すること 　　対象Audience：これからJetpack Composeの導入を検討している方 目的 ◦ 導入の進め方の参考にしていただく ◦ Composeを使うとどんな実装になるのかイメージしていただく ４月からComposeの導入検討を開始（チームメンバー全員Composeは初めて）、今月一 部の画面を書き換えてリリース。導入の進め方、アーキテクチャ、得られた知見などを 共有します。
8. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 導入のきっかけ Jetpack Compose流行ってる！？ 面白そう！触ってみたい！
9. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 導入のきっかけ • とりあえず使ってみよう 簡単な画面をComposeで書き換えてみることにした （RecyclerViewでお知らせリストを表示する画面） • 工数の確保は？ ◦ 20%ルール内の範囲で着手 ◦ 日頃からPM含めチーム内でのコミュニケーションは 密、新しい取り組みに対する理解があるチーム
10. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 学習の方法 • 「お知らせ」画面をみんなでリレー形式で実装 • 週1-2回、毎回発表担当を決めてやったことを共有 ◦ リスト表示してみる ◦ UI作り込む ◦ UiState作ってみる ◦ ViewModelとつなげてみる ◦ スクロールで追加読み込み ◦ ユニットテスト書く ◦ … • 良かった点 ◦ 個人の負担が軽い ◦ メンバー全員が手を動かして参加できる ◦ 自分も書いたコードなので、他の人の担当回でも理解しやすい
11. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 学習の方法：充実の公式ドキュメント • 公式ドキュメント https://developer.android.com/jetpack/compose • Jetpack Pathway https://developer.android.com/courses/pathways/compose • Jetnews sample ←すごく役に立った！ https://github.com/android/compose-samples/tree/master/JetNews 必要なドキュメントは各自で読む
12. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 Jetpack Composeの特徴 • 宣言的UI ◦ 状態をUIに変換する ◦ UI生成後に中身を更新することはできない、更新するには状態を更新 • 導入のしやすさ（既存実装と共存出来る） ◦ アプリ全体でなく一部のActivityだけ置き換え可能 ◦ さらに画面の一部だけComposeで実装することも可能
13. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた
14. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた • 対象：会社からのお知らせ画面 • 機能：会社からのお知らせリストを取得して表示する List Empty Error
15. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：アーキテクチャ 公式ドキュメントのとおり！ • ViewModel • ViewModelState • UiState • Ui elements(Composable) https://developer.android.com/jetpack/guide/ui-layer
16. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：アーキテクチャ 　　　　　　ViewModel ViewModel State UI State UI elements (Compose) events Data Layer 更新 変換 Application data UI Layer
17. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：UiState UIの状態を定義 お知らせなし お知らせあり エラー お知らせ あり お知らせ なし エラー
18. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：ViewModel Actionを実行して ViewModelState を更新する ViewModelState UiState actions
19. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：ViewModelState ViewModelの状態を保持 UiStateに変換 ViewModelの状態
20. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：Activity setContent で Composable 配置、ViewModelが提供する UiState を渡す
21. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみた：Composable
22. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 良かった点・苦労した点
23. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 実装してみて良かった点 良かった点 • 役割分担明確で開発しやすい ◦ ViewModel / ViewModelState / UiState / Composable ◦ 書きやすいし、バグの混入も少なそう • LazyColumn便利（RecyclerViewの代替） • プレビュー便利 • ユニットテスト書きやすい • 実行時のパフォーマンスも問題ない（RecyclerViewよりLazyColumnの方が高速？） • SwiftUIやってた人は馴染みやすい（宣言的UI）
24. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 良かった点：LazyColumn便利 LazyColumnでリスト表示、RecyclerViewの実装しなくていい！ Adapterがいらない notifyDataSetChangedも不要 実装楽になる バグも入りにくくなる
25. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 良かった点：LayzColumn（stickerヘッダー付きLazyColumn） groupByでグループ化 Stickyヘッダー付きLazyColumnの実装も簡単 できたmapをforEachで回しつつ、 stickyHeaderとitemsを描画 （ViewTypeとか不要） （↓会社毎にヘッダ挿入）
26. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 良かった点：プレビュー機能便利 レイアウトの確認めっちゃはかどる AndroidStudio上で確認できる @Preview アノテーション付ける
27. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 良かった点：ユニットテスト書きやすい ComposeのテストはUiStateを渡し、その通りに表示出来ているか確認すればOK 役割分担が明確なのでViewModel等の ユニットテストも書きやすい onNodeWithText(), onNodeWithTag() で要素を取り出して .assertIsDisplayed(), .assertDoesNotExist() で確認
28. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 苦労した点 苦労した点 • (Intel Macだと)プレビューが重いかも → M1/M2にしたら改善する？？ • 最初は既存実装を活かしてLiveDataでViewModelの状態を公開していたが、うまく行かな かった → StateFlowにして解決 • dimensionからフォントサイズ取ると sp 指定がそのまま使えない （spで定義したのにdpで取れる） • swipe refreshが標準ではなく accompanist-swiperefresh を使った https://github.com/google/accompanist
29. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 まとめ • メリット多い、開発効率・品質上がりそう！ ◦ 各モジュールの役割明確、シンプルに書ける、強力なプレビュー機 能、バグの混入も少なそう • 空き時間で検討を進めて2ヶ月くらいで導入できた • 宣言的UIの実装楽しい、少ないコードで直感的、新たな体験（新鮮）、ス トレス少ない 今後やりたいこと - UI部品共通化、デザインシステム導入 積極的に使っていくぞ！ 💪
30. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 株式会社 アンドパッド