Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

Copyright © NIFTY Corporation All Rights Reserved.
 About Me
 2
 山田 良介 会員システムグループ 第1開発チーム ● @search 開発運用 / Androidアプリ全般 開発補助 ● マイ ニフティ チーム内テックリード

Slide 3

Slide 3 text

Copyright © NIFTY Corporation All Rights Reserved.
 マイ ニフティ
 3
 「気になる」をすばやく確認 ニフティ会員様向けアプリ 料金・ポイント確認などよく利用する機能を提供 接続回線開通前の状況確認も iOS版 2021年12月リリース Android版 2022年3月リリース

Slide 4

Slide 4 text

Copyright © NIFTY Corporation All Rights Reserved.
 Android版 実装前の社内課題
 4
 10年前から変わらない基本設計 主なAndroid開発部隊が子会社へ分離 Android開発自体が後回しに 最新の技術標準を積極的に取り入れ 社内アプリの足がかりとしたい

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Copyright © NIFTY Corporation All Rights Reserved.
 Jetpack Compose
 6
 ● 2021年に登場したばかりの宣言的UIツールキット ● UIにXMLを使わず、全てKotlinの関数で定義 ● 状態に応じたUI表示を定義するだけで良い ○ 差分更新はComposeが自動的に行う

Slide 7

Slide 7 text

良かったこと


Slide 8

Slide 8 text

Copyright © NIFTY Corporation All Rights Reserved.
 良かったこと
 8
 ● UIコーディングが爆速 ○ 記述がシンプル ○ レイアウトのネストの深さを気にする必要がない ○ リスト部分のコード量が激減 ● Reactに近い開発体験 ○ 書き味がほぼReact(Hooks) ○ Storybookのように使っていけるPreview ● 公式ドキュメントの充実 ○ Pathway・公式サンプルで十分な知識が得られる

Slide 9

Slide 9 text

Copyright © NIFTY Corporation All Rights Reserved.
 例: リストの場合
 9
 Android View Layout XML RecyclerView.Adapter

Slide 10

Slide 10 text

Copyright © NIFTY Corporation All Rights Reserved.
 例: リストの場合
 10
 Compose リスト要素Composable リストComposable

Slide 11

Slide 11 text

Copyright © NIFTY Corporation All Rights Reserved.
 プレビューも容易
 11


Slide 12

Slide 12 text

Copyright © NIFTY Corporation All Rights Reserved.
 考慮事項
 12
 ● コーディングルールは決めておいた方が良い ○ classでない分、個人による差異が出がち ○ 例: ■ ディレクトリ構造・命名規則 ■ 引数順 ■ プレビューを行う単位 ● Reactに慣れておくとベター ○ コンポーネント分割などの参考に

Slide 13

Slide 13 text

Copyright © NIFTY Corporation All Rights Reserved.
 考慮事項
 13
 ● Accompanistでの補助が現状は必要 ○ https://github.com/google/accompanist ○ 公式composeライブラリで足りない機能を補う ○ 例: ■ Pager (ViewPager) ■ Swipe to Refresh (SwipeRefreshLayout) ■ Navigation Animation

Slide 14

Slide 14 text

微妙なところ


Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Copyright © NIFTY Corporation All Rights Reserved.
 例
 16
 1画面移動するだけの
 シンプルな画面遷移


Slide 17

Slide 17 text

Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 17
 Jetpack Navigation Navigation XML 遷移コード

Slide 18

Slide 18 text

Copyright © NIFTY Corporation All Rights Reserved.
 18
 Jetpack Navigation 自動生成クラスで遷移先を担保 ● ビルド時に安全性が担保される

Slide 19

Slide 19 text

Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 19
 Compose Navigation ナビゲーション用Composable 遷移コード

Slide 20

Slide 20 text

Copyright © NIFTY Corporation All Rights Reserved.
 画面遷移(Navigation)
 20
 Compose Navigation 遷移先を文字列で指定 ● ビルド時の保証はない ● リファクタリングに弱い

Slide 21

Slide 21 text

Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 21
 Jetpack Navigation Navigation XML 遷移コード

Slide 22

Slide 22 text

Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 22
 XMLで遷移Actionに対して引数を定義 ● 自動生成クラスで型安全性が担保される ● 実装としてはBundle Jetpack Navigation

Slide 23

Slide 23 text

Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 23
 Compose Navigation ナビゲーション用Composable 遷移コード

Slide 24

Slide 24 text

Copyright © NIFTY Corporation All Rights Reserved.
 遷移時の引数
 24
 Compose Navigation 画面に対してURL文字列で指定 ● ビルド時に型安全性が担保されない ● シリアライズ・デシリアライズを自前で行う必要あり ○ URLエスケープ ○ バイナリのBASE64変換

Slide 25

Slide 25 text

Copyright © NIFTY Corporation All Rights Reserved.
 遷移アニメーション
 25
 Jetpack Navigation Compose Navigation * Accompanist使用 


Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Copyright © NIFTY Corporation All Rights Reserved.