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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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月出身：三重県 ⛩🐃🏎 好き：写真📸、スキューバダイビング🤿 写真いれる

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

企業・プロダクト概要 ● テキスト

Slide 7

Slide 7 text

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は初めて）、今月一部の画面を書き換えてリリース。導入の進め方、アーキテクチャ、得られた知見などを共有します。

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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含めチーム内でのコミュニケーションは密、新しい取り組みに対する理解があるチーム

Slide 10

Slide 10 text

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とつなげてみる ○ スクロールで追加読み込み ○ ユニットテスト書く ○ … ● 良かった点 ○ 個人の負担が軽い ○ メンバー全員が手を動かして参加できる ○ 自分も書いたコードなので、他の人の担当回でも理解しやすい

Slide 11

Slide 11 text

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 必要なドキュメントは各自で読む

Slide 12

Slide 12 text

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で実装することも可能

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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）

Slide 24

Slide 24 text

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も不要実装楽になるバグも入りにくくなる

Slide 25

Slide 25 text

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とか不要）（↓会社毎にヘッダ挿入）

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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() で確認

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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部品共通化、デザインシステム導入積極的に使っていくぞ！ 💪