Title : Let's Preview！ Jetpack Compose

2021/10/20 DroidKaigi2021
https://droidkaigi.jp/2021/timetable?day=2

Jetpack ComposeによるUIをAndroid Studioに組み込まれたPreview機能を使ってスムーズにクオリティ高く構築するプラクティスを紹介します。

Summary :
・Jetpack Composeを使ったUI構築の特徴
・Compose Previewの基本的な使い方
・Previewでデプロイなしに多端末対応をスムーズにする
・複雑なデータ・画面に対応したプレビューのプラクティス
・Previewを使いこなして堅牢なUIを構築する - テストとUI構築

Transcript

1. Let’s Preview! Jetpack Compose @mochico
2. About me mochico（@_mochicon_） Android / Kotlin / Java / Jetpack Compose Techbooster / 技術書典
3. What is Jetpack Compose
4. Jetpack Composeを使ったUI構築の特徴 • 宣⾔的UIツールキット • Functionで定義する • すべてKotlinで記述する • 状態が変わるごとにすべてのUIの更新を⾏ う • 変更点のみを再描画する再コンポーズに描 画制御を任せてどのようなデータに応じて どのような表⽰をするのかのみ宣⾔する
5. Compose Preview
6. Compose Previewを表⽰する
7. @Previewアノテーションをつける
8. Preview画⾯を開く
9. Preivewにデータを表⽰する
10. プレビュー表⽰⽤のデータを準備する • Composableの外側からデータを 渡せるようにする
11. ⽅法1: プレビュー⽤のComposableを⽤意する • プレビュー⽤のデータを渡して対象 のComposableを呼び出すだけの Composableを作る
12. ⽅法2: PreviewParameterを使う
13. ⽅法2: PreviewParameterを使う
14. プレビューでデータを使う時の注意点 • 安易にプレビュー⽤のデータをパッケージにvalなどで定義するとコンパ イル後のアプリに残る • PreviewProvider経由などのデータはfunctionで定義されるため呼び出し の起こらないアプリ本体ではShrink時に削除される
15. Previewで さまざまな⾒た⽬に対応する
16. Previewの表⽰を変更する • サムネイル画像とタイトル、説明テキ ストをもつカードUI
17. Previewの表⽰を変更する • Previewの⾒た⽬はアノテー ションのパラメータで設定する
18. Previewの表⽰を変更する
19. Color Blindness Modes
20. 様々な状態に対応する • Locale • API Level • Device model • 画⾯サイズ • フォントサイズ • UIモード • ⾊覚異常
21. DeployとInteractive Mode
22. より実践的なPreviewの利⽤ ―画⾯全体をPreviewする
23. MVVMアーキテクチャに沿ったアプリ
24. • Dummy: 実際には使われない⽳埋めのためのオブジェクト • Fake: 実際に動作するが本番とは異なる実装をもつオブジェクト。UIのテ ストにも使われる • Stubs: レスポンスを返さない関数やオブジェクト • Spies: 呼び出され⽅によって呼び出しを記録するStub • Mocks: 期待値を返却する空実装 Test Double
25. MVVMアーキテクチャに沿ったアプリ
26. State / ViewModel interface
27. Screen composable
28. FakeViewModelを実装する
29. フェイクのViewModelで画⾯全体をPreviewする
30. フェイクを使ったテスト戦略 • プレビューだけでなくUnit Testでも再利⽤できる • Unit Testで実際に動作するオブジェクトを使ってテストできる • インターフェースの呼び出し回数の検証や関数単位での戻り値の偽装・確 認にはモックを使⽤する • フェイクを使うことで実際の動作に近い形でプレビューできるが、より堅 牢な開発のためにはピクセルレベルでテストできる画像⽐較や、バックエ ンドへのアクセスを含めたE2Eも併⽤するとよい
31. ex. DroidKaigi2021アプリのViewModelとフェイク • CompositionLocalProvider を使って限定され たPreview⽤のComposableのスコープで ViewModelのproviderを上書きしフェイクの ViewModelを提供する • Unit testでフェイクの実装と本番の実装をパラ メータとして同時にテストし、フェイクの信頼 性を⾼める • → 信頼性の⾼いフェイクを実装時からプレ ビューで利⽤することで整合性をテストしなが ら開発できる https://github.com/DroidKaigi/conference-app-2021#how-to-make-fakes-viewmodel-reliable
32. まとめ
33. Compose Previewを使う利点 • 開発初期からCompose Previewを使ってさまざまな環境に対応したUIを構築できる • Previewを実装しやすいインターフェース、パーツ単位を⼼がけることで設計がき れいになる • 画⾯全体のプレビューではフェイクの実装を使うことで本番に近い形で確認しなが ら実装できる • 実際に動くモデルとプレビューをセットで共有することでチームで堅牢なUIを作れ る
34. 今後の課題 • 実装コードの近くにフェイクがあるため本番のアプリに混⼊する可能性 がある • より複雑な画⾯単位でのプレビューをどうするか • フェイクデータの管理と更新 • フェイクを実装する⼿間
35. Let’s Preview! Jetpack Compose
36. References • Jetpack Compose | Android Developers https://developer.android.com/ jetpack/compose • Mocks Aren't Stubs https://martinfowler.com/articles/mocksArentStubs.html • GitHub - DroidKaigi/conference-app-2021: The Official App for DroidKaigi 2021 https://github.com/DroidKaigi/conference-app-2021 • Compose tooling | Jetpack Compose | Android Developers https:// developer.android.com/jetpack/compose/tooling