ZOZOTOWN Androidチームが Jetpack Compose導入に取り組む理由

Transcript

1. ZOZOTOWN Androidチームが
 Jetpack Compose導入に取り組む理由
 株式会社ZOZOテクノロジーズ
 ZOZOTOWN本部 ZOZOアプリ部 Androidチーム
 リーダー 山田 祐介
 
 
 Copyright © ZOZO Technologies, Inc. 2021/08/05(Thu)
 Android Meetup【ZOZOテクノロジーズ × サイバーエージェント × GMOペパボ】

2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 ZOZOTOWN本部 ZOZOアプリ部 Androidチーム
 リーダー 山田 祐介
 2015年に現在の株式会社ZOZOテクノロジーズに入社。
 2019年からAndroidチームリーダーを担当。現在8名のメンバー に支えられながらリーダーとして奮闘中！
 
 
 
 2
3. © ZOZO Technologies, Inc. https://zozo.jp/
 3 • 日本最大級のファッション通販サイト
 • 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに2021年3月 末時点）
 • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載
 • コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など

4. © ZOZO Technologies, Inc. 本スライドを通して伝えたいこと
 Jetpack Composeは色んな課題をきっと解 決してくれる！みんな学ぼう！
 
 
 4 スライド内容の要約
 ZOZOTOWN AndroidのUI実装に関する課題とComposeの特性を交えながら、
 なぜZOZOTOWN AndroidチームがJetpack Compose導入に取り組んでいるのかを紹介

5. © ZOZO Technologies, Inc. 5 アジェンダ
 • Jetpack Composeとの出会い • ZOZOTOWN Androidが抱えるUI実装の課題 • チームが注目したJetpack Composeの特性 • まとめ
6. © ZOZO Technologies, Inc. Jetpack Composeとの出会い
 6
7. © ZOZO Technologies, Inc. Jetpack Composeとの出会い
 Codelab会
 • ZOZOTOWN Androidチーム内の取り組み（テックブログで紹介しています）
 • メンバーが興味ある、またはプロダクトに必要になりそうな技術についての勉強会
 • Composeの前はExoPlayer、DaggerHilt、Coroutineなどを実施
 • Composeに関してはPathwaysがあったのでそれに沿って実施
 
 7
8. © ZOZO Technologies, Inc. Jetpack Composeとの出会い
 Jetpack Compose Pathways
 8 • Composeに関する記事や動画、コードラボが集約・整理されている
 • チームでの取り組みは2021/4/15から開始
 （2021/7末時点で６,Layouts in Jetpack Compose）
 • 進めていく中でZOZOTOWNの課題解決へのつながりを発見
 
 https://developer.android.com/courses/pathways/compose
 

9. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 9
10. © ZOZO Technologies, Inc. 10 ZOZOTOWN Androidが抱えるUI実装の課題
 • Viewの状態管理が複雑 • Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
11. © ZOZO Technologies, Inc. 11 ZOZOTOWN Androidが抱えるUI実装の課題
 • Viewの状態管理が複雑 • Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
12. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 Viewの状態管理が複雑
 12 • １つの画面を複数のカスタムViewで構成している
 • カスタムViewの状態変化（データの更新）は、いくつかのタイミングで行われる
 ◦ 初期化時、通信のレスポンス取得後、関連するUIの変更時、Fragmentの再生成時、etc.
 • 古くから存在し、機能も多い画面は、リファクタリングが進んでいないのでさらに複雑に

13. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 例：検索画面
 13 • アプリの核となる画面、機能追加も頻繁に実施
 • レガシーコードが残り続けている（Fragmentの行数3000行超え）
 • 検索条件として設定できるパラメータは30種類以上
 • 各Viewが複数の状態を持ち、またそれらが関連を持っている

14. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 例：検索画面
 14 • アプリの核となる画面、機能追加も頻繁に実施
 • レガシーコードが残り続けている（Fragmentの行数3000行超え）
 • 検索条件として設定できるパラメータは30種類以上
 • 各Viewが複数の状態を持ち、またそれらが関連を持っている
 

15. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 15 例：新品/古着の切り替え
 • 「カラーをまとめる」表示が変わる
 • 並び順が「あなたにおすすめ順」と「人気順」
 
 これらは通信結果で制御しているが、
 バックスタックからの復元では通信は走らないため、別でロ ジックを用意
 
 -> バグの温床になりつつある

16. © ZOZO Technologies, Inc. 16 ZOZOTOWN Androidが抱えるUI実装の課題
 • Viewの状態管理が複雑 • Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
17. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 Viewのパフォーマンスに警告
 17 • アプリの核となる商品画面で発生
 • Android Lintで警告（80以上のViewはパフォーマンスに悪い）
 • パフォーマンス改善のためにRecyclerView化を検討

18. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 Viewのパフォーマンスに警告
 18 • アプリの核となる商品画面で発生
 • Android Lintで警告（80以上のViewはパフォーマンスに悪い）
 • パフォーマンス改善のためにRecyclerView化を検討
 ◦ 一定の塊ごとにカスタムView化
 ◦ それぞれ別のViewTypeを定義
 ◦ Viewの使い回しではなく、必要になるまで生成しない特性を利用

19. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 19 ViewTypeの管理はあまりしたくない
 RecyclerView.AdapterのgetItemCount()やgetItemViewType()、onBindViewHolder()などをそれぞれ整合性が あうように実装しなければいけない
 ViewType対策
 ConcatAdapterやEpoxyでの実装を検討
 ※Epoxyはすでにホーム画面で実績あり
 パフォーマンス改善のより良い方法を探していた

20. © ZOZO Technologies, Inc. 20 ZOZOTOWN Androidが抱えるUI実装の課題
 • Viewの状態管理が複雑 • Viewのパフォーマンスに警告 • Viewの状態考慮漏れ
21. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 Viewの状態考慮漏れ
 21 • アプリの核となる商品画面でよく発生
 • 状態の変化は少ないものの、パターンが多いのが原因
 • テストも書けていないためレビューやQAで発覚する

22. © ZOZO Technologies, Inc. ZOZOTOWN Androidが抱えるUI実装の課題
 
 
 22 実際にあった考慮漏れ：
 
 • 同じプログラムだがそれぞれ違う商品の値段まわりの表示
 • 即日配送のViewにmargin_bottomを設定して実装していたため、即日配送のViewが表示されない商品で デザイン崩れが発生
 -> パターンが多いため考慮漏れのリスクも高くなっている
 
 ↑こちらがデザイン崩れ
23. © ZOZO Technologies, Inc. 23 ZOZOTOWN Androidが抱えるUI実装の課題
 • Viewの状態管理が複雑 ◦ 特に検索画面は各Viewの状態が複数あり、それが変化するタイミングも複数ある • Viewのパフォーマンスに警告 ◦ 商品画面にてAndroid Lintから警告 • Viewの状態考慮漏れ ◦ 特に商品画面のパターンを開発時に網羅しにくくなっている
24. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 24
25. © ZOZO Technologies, Inc. 25 チームが注目したJetpack Composeの特性
 • 宣言的UI • パフォーマンスの最適化 • 便利なプレビュー機能
26. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 宣言的UI
 
 26 • 状態をUIに変換するという考え方
 • UI生成後に中身は更新することができない、更新させるにはUIを再生成する
 
 ※What's new in Jetpack Composeの動画2:40あたりからそのような話をしています
 https://youtu.be/7Mf2175h3RQ?t=162
 
 

27. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 27 状態:1 UI:1 状態をUIに変換 UI:1 UI:2 UI生成後は中身は変化しない 状態:2 UI:2 UIは変化しないので、新しい状態からUIを再生成 状態がデータで、UIがComposable関数が生成するもの
28. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 28 Composeの思想より抜粋 名前のリストを引数に名前の数だけ 「Hello 名前」を表示する • 前のスライドでいう「状態」はnamesパラメータ
 • 「UI」はComposable関数が生成するもの（戻り値がないのに注目）
 • Composable関数内で生成されたUIを変えるには引数を変えるしかない

29. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 29 Composeの思想より抜粋 グレーの四角がComposable関数。 最上位からデータを渡していく • データの一元化が可能
 • 一元化してもパフォーマンスは最適化される

30. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 30 Composeの思想より抜粋 グレーの四角がComposable関数。 最上位からデータを渡していく • データの一元化が可能
 • 一元化してもパフォーマンスは最適化される
 ◦ 状態の変更があるComposable関数のみ再実行される
 -> 検証
31. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 31 • ３つの名前（yamada,takahashi,suzuki）に挨拶をする
 • ボタンを押すとyamadaがyusukeに変わる

32. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 32 • 他のComposable関数はこのような感じ
 • ThreeGreetingはGreetingを３回実行
 • Greetingは挨拶の表示とログ出力
 • NameChangerは引数のラムダを実行するボタン

33. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 33 実行結果（画面）
 
 
 実行結果（ログ）
 
 
 • 名前のリストを作り直しているが、ボタンを押した後のログはyusukeのみ
 • 変化していないtakahashiとsuzukiは再生成（再コンポーズ）されていない
 • 差分更新を実装側は考えなくていい

34. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 34 課題：検索画面の各Viewの状態が複数あり、その変化・復元を意識しなければならない
 Composeに移行すれば
 • 検索画面の各Viewの状態管理を一元化可能
 • 一元化したものを正しく更新・維持すればいい
 ◦ その更新のタイミングを気にする必要がない
 
 
 ※Composeでなくても一元化は可能だが思想として明確になっているほうがメンバー全員が共 通認識を持ちやすい

35. © ZOZO Technologies, Inc. 結果：バグが減り、開発スピードも上がりそう！
 35 チームが注目したJetpack Composeの特性
 
 

36. © ZOZO Technologies, Inc. 36 チームが注目したJetpack Composeの特性
 • 宣言的UI • パフォーマンスの最適化 • 便利なプレビュー機能
37. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 パフォーマンスの最適化
 
 37 • Composeの思想に内容がまとまっている
 • 前のスライドの内容も「再コンポーズは可能な限りスキップする」として記載されている
 • さらに気になる内容が「コンポーズ可能な関数は並行して実行できる」に記載されている
 
 

38. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 38 コンポーズ可能な関数は並行して実行できる
 記載内容抜粋
 >Compose は複数のコアを活用し、画面上にないコンポーズ可能な関数を、より低い優先度で実行します。
 >この最適化は、コンポーズ可能な関数がバックグラウンド スレッドのプール内で実行される可能性があること を意味します。
 

39. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 LazyColumnの存在
 
 39 • RecyclerViewのCompose版
 • Adapterのようなものは無い
 • 各Composeを画面内に表示される直前で生成する

40. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 40 LazyColumnの存在
 itemsを分けるだけでRecyclerViewでいうViewTypeの実装が実現可能

41. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 41 課題：商品画面のパフォーマンス警告を改善しなければならない
 Composeに移行すれば
 • 並列実行でのパフォーマンス最適化
 ◦ ユーザーがより早く画面を操作できるようになる
 • LazyColumnを利用すればRecyclerView化がより簡単に実現できそう
 

42. © ZOZO Technologies, Inc. 結果：画面の起動速度が向上しそう！
 （パフォーマンスが向上しそう！）
 42 チームが注目したJetpack Composeの特性
 
 

43. © ZOZO Technologies, Inc. 43 チームが注目したJetpack Composeの特性
 • 宣言的UI • パフォーマンスの最適化 • 便利なプレビュー機能
44. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 便利なプレビュー機能
 
 44 • @PreviewをComposable関数につけるだけでアプリをビルドしなくても確認可能
 • １つのファイル内に複数のプレビューを用意することも可能
 

45. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 45 Preview機能の紹介
 最大２行まで文章を表示しそれ以上は...にするComposable関数とそのプレビュー

46. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 46 Preview機能の紹介
 @Previewをつけた関数を増やすだけで複数のパターンを一度に目視可能

47. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 47 maxLinesを３に増やしてみる
 プレビューも同時に更新される

48. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 48 課題：商品画面のパターンを開発時に網羅しなければならない
 Composeに移行すれば
 • Previewをたくさん用意することでパターンの確認がしやすくなる
 • デザイン実装のコードレビューも捗りそう

49. © ZOZO Technologies, Inc. 結果：デザイン実装時の網羅性が向上しそう
 49 チームが注目したJetpack Composeの特性
 
 

50. © ZOZO Technologies, Inc. 50 チームが注目したJetpack Composeの特性
 • 宣言的UI ◦ Viewで複雑になっている状態管理がスッキリできそう • パフォーマンスの最適化 ◦ Viewが多い画面も複数スレッドの活用で高速化できそう ◦ RecyclerViewのような実装も簡単に実現しやすそう • 便利なプレビュー機能 ◦ 色々な状態も簡単に再現・確認ができ開発効率があがりそう
51. © ZOZO Technologies, Inc. チームが注目したJetpack Composeの特性
 
 
 他にもいろいろ
 
 51 メンバーからでた今日解説できなかった意見（Composeの良さそうなところ）
 
 • テストが書きやすい
 • Composeを使うことでUIの実装が楽になる(と考えている)→開発のスピードがあがる
 • 既存のZOZOTOWNではJetpack標準のアーキテクチャを採用していたため、Composeが導入しやすかった
 • Swift UIやFlutter, ReactNativeなど、モバイル界隈では宣言的UIに移行が進んでいるので検討する価値があった （チーム内にはReact経験者もいた）
 • チームのモチベーションがあがる→生産性の向上が期待できる

52. © ZOZO Technologies, Inc. まとめ
 
 
• Jetpack Composeは、ZOZOTOWN Androidの課題を解決する糸口だった
 • Composeの思想を理解して実装するととても良さそう
 ◦ バグが減り、開発スピードが向上しそう
 ◦ 描画パフォーマンスが向上しそう
 • Preview機能の活用で網羅性が向上しそう
 • Jetpack Composeは色んな課題をきっと解決してくれる！みんな学ぼう！
 ◦ 学習はJetpack Compose Pathwaysがおすすめ
 52
53. © ZOZO Technologies, Inc. Happy composing!
 53
54. © ZOZO Technologies, Inc. 最後に
 
 
ZOZOテクノロジーズではAndroidエンジニアの採用を積極的に行っています。
 本スライドの話や会社について少しでも興味を持っていただけましたら以下のURLからご応募く ださい。
 本スライド作成者がカジュアル面談をさせていただきます
 
 https://hrmos.co/pages/zozotech/jobs/0000194
 54