Jetpack Composeを導入して 見えた利点と課題

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
 Jetpack Composeを導入して 見えた利点と課題
 山田良介
 2022/09/26

2. Copyright © NIFTY Corporation All Rights Reserved.
 About Me
 2
 山田 良介 会員システムグループ 第1開発チーム • @search 開発運用 / Androidアプリ全般 開発補助 • マイ ニフティ チーム内テックリード
3. Copyright © NIFTY Corporation All Rights Reserved.
 マイ ニフティ
 3
 「気になる」をすばやく確認 ニフティ会員様向けアプリ 料金・ポイント確認などよく利用する機能を提供 接続回線開通前の状況確認も iOS版 2021年12月リリース Android版 2022年3月リリース
4. Copyright © NIFTY Corporation All Rights Reserved.
 Android版 実装前の社内課題
 4
 10年前から変わらない基本設計 主なAndroid開発部隊が子会社へ分離 Android開発自体が後回しに 最新の技術標準を積極的に取り入れ 社内アプリの足がかりとしたい
5. Copyright © NIFTY Corporation All Rights Reserved.
 主な技術スタック
 5
 従来 マイ ニフティ 言語 Java Kotlin UI View XML Jetpack Compose 画面遷移 FragmentTransaction Jetpack Compose Navigation 非同期処理 Volley Kotlin Coroutines / Flow / Retrofit JSON処理 Gson Kotlinx Serialization ローカル永続化 preference / sqlite DataStore / Room DI なし Hilt
6. Copyright © NIFTY Corporation All Rights Reserved.
 Jetpack Compose
 6
 • 2021年に登場したばかりの宣言的UIツールキット • UIにXMLを使わず、全てKotlinの関数で定義 • 状態に応じたUI表示を定義するだけで良い ◦ 差分更新はComposeが自動的に行う
7. 良かったこと

8. Copyright © NIFTY Corporation All Rights Reserved.
 良かったこと
 8
 • UIコーディングが爆速 ◦ 記述がシンプル ◦ レイアウトのネストの深さを気にする必要がない ◦ リスト部分のコード量が激減 • Reactに近い開発体験 ◦ 書き味がほぼReact(Hooks) ◦ Storybookのように使っていけるPreview • 公式ドキュメントの充実 ◦ Pathway・公式サンプルで十分な知識が得られる
9. Copyright © NIFTY Corporation All Rights Reserved.
 例: リストの場合
 9
 Android View Layout XML RecyclerView.Adapter
10. Copyright © NIFTY Corporation All Rights Reserved.
 例: リストの場合
 10
 Compose リスト要素Composable リストComposable
11. Copyright © NIFTY Corporation All Rights Reserved.
 プレビューも容易
 11

12. Copyright © NIFTY Corporation All Rights Reserved.
 考慮事項
 12
 • コーディングルールは決めておいた方が良い ◦ classでない分、個人による差異が出がち ◦ 例: ▪ ディレクトリ構造・命名規則 ▪ 引数順 ▪ プレビューを行う単位 • Reactに慣れておくとベター ◦ コンポーネント分割などの参考に
13. Copyright © NIFTY Corporation All Rights Reserved.
 考慮事項
 13
 • Accompanistでの補助が現状は必要 ◦ https://github.com/google/accompanist ◦ 公式composeライブラリで足りない機能を補う ◦ 例: ▪ Pager (ViewPager) ▪ Swipe to Refresh (SwipeRefreshLayout) ▪ Navigation Animation
14. 微妙なところ

15. Copyright © NIFTY Corporation All Rights Reserved.
 微妙なところ
 15
 • 画面遷移(Navigation)が辛い ◦ すべてがstring ◦ 遷移アニメーションが不自然 • AppBarの取り扱いが難しい ◦ ページ側からAppBarを操作できない • Viewが混じると辛い ◦ 例: Nested Scroll
16. Copyright © NIFTY Corporation All Rights Reserved.
 例
 16
 1画面移動するだけの
 シンプルな画面遷移

17. Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 17
 Jetpack Navigation Navigation XML 遷移コード
18. Copyright © NIFTY Corporation All Rights Reserved.
 18
 Jetpack Navigation 自動生成クラスで遷移先を担保 • ビルド時に安全性が担保される
19. Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 19
 Compose Navigation ナビゲーション用Composable 遷移コード
20. Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 20
 Compose Navigation 遷移先を文字列で指定 • ビルド時の保証はない • リファクタリングに弱い
21. Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 21
 Jetpack Navigation Navigation XML 遷移コード
22. Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 22
 XMLで遷移Actionに対して引数を定義 • 自動生成クラスで型安全性が担保される • 実装としてはBundle Jetpack Navigation
23. Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 23
 Compose Navigation ナビゲーション用Composable 遷移コード
24. Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 24
 Compose Navigation 画面に対してURL文字列で指定 • ビルド時に型安全性が担保されない • シリアライズ・デシリアライズを自前で行う必要あり ◦ URLエスケープ ◦ バイナリのBASE64変換
25. Copyright © NIFTY Corporation All Rights Reserved.
 遷移アニメーション
 25
 Jetpack Navigation Compose Navigation ＊ Accompanist使用 

26. Copyright © NIFTY Corporation All Rights Reserved.
 まとめ
 26
 • Jetpack Composeは開発速度向上に効果あり ◦ コード量(特にリスト)の低減 ◦ 新人の入りやすさ • Navigation周りには正直難あり ◦ 画面遷移は従来通りActivityとFragmentで行うのも一手 ◦ 無理にFull Jetpack Composeにする必要はない
27. Copyright © NIFTY Corporation All Rights Reserved.