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
   

   View Slide

2. About me
   mochico（@_mochicon_）
   Android / Kotlin / Java / Jetpack Compose
   Techbooster / 技術書典
   

   View Slide

3. What is Jetpack Compose
   

   View Slide

4. Jetpack Composeを使ったUI構築の特徴
   • 宣⾔的UIツールキット
   • Functionで定義する
   • すべてKotlinで記述する
   • 状態が変わるごとにすべてのUIの更新を⾏
   う
   • 変更点のみを再描画する再コンポーズに描
   画制御を任せてどのようなデータに応じて
   どのような表⽰をするのかのみ宣⾔する
   

   View Slide

5. Compose Preview
   

   View Slide

6. Compose Previewを表⽰する
   

   View Slide

7. @Previewアノテーションをつける
   

   View Slide

8. Preview画⾯を開く
   

   View Slide

9. Preivewにデータを表⽰する
   

   View Slide

10. プレビュー表⽰⽤のデータを準備する
    • Composableの外側からデータを
    渡せるようにする
    

    View Slide

11. ⽅法1: プレビュー⽤のComposableを⽤意する
    • プレビュー⽤のデータを渡して対象
    のComposableを呼び出すだけの
    Composableを作る
    

    View Slide

12. ⽅法2: PreviewParameterを使う
    

    View Slide

13. ⽅法2: PreviewParameterを使う
    

    View Slide

14. プレビューでデータを使う時の注意点
    • 安易にプレビュー⽤のデータをパッケージにvalなどで定義するとコンパ
    イル後のアプリに残る
    • PreviewProvider経由などのデータはfunctionで定義されるため呼び出し
    の起こらないアプリ本体ではShrink時に削除される
    

    View Slide

15. Previewで
    さまざまな⾒た⽬に対応する
    

    View Slide

16. Previewの表⽰を変更する
    • サムネイル画像とタイトル、説明テキ
    ストをもつカードUI
    

    View Slide

17. Previewの表⽰を変更する
    • Previewの⾒た⽬はアノテー
    ションのパラメータで設定する
    

    View Slide

18. Previewの表⽰を変更する
    

    View Slide

19. Color Blindness Modes
    

    View Slide

20. 様々な状態に対応する
    • Locale
    • API Level
    • Device model
    • 画⾯サイズ
    • フォントサイズ
    • UIモード
    • ⾊覚異常
    

    View Slide

21. DeployとInteractive Mode
    

    View Slide

22. より実践的なPreviewの利⽤
    ―画⾯全体をPreviewする
    

    View Slide

23. MVVMアーキテクチャに沿ったアプリ
    

    View Slide

24. • Dummy: 実際には使われない⽳埋めのためのオブジェクト
    • Fake: 実際に動作するが本番とは異なる実装をもつオブジェクト。UIのテ
    ストにも使われる
    • Stubs: レスポンスを返さない関数やオブジェクト
    • Spies: 呼び出され⽅によって呼び出しを記録するStub
    • Mocks: 期待値を返却する空実装
    Test Double
    

    View Slide

25. MVVMアーキテクチャに沿ったアプリ
    

    View Slide

26. State / ViewModel interface
    

    View Slide

27. Screen composable
    

    View Slide

28. FakeViewModelを実装する
    

    View Slide

29. フェイクのViewModelで画⾯全体をPreviewする
    

    View Slide

30. フェイクを使ったテスト戦略
    • プレビューだけでなくUnit Testでも再利⽤できる
    • Unit Testで実際に動作するオブジェクトを使ってテストできる
    • インターフェースの呼び出し回数の検証や関数単位での戻り値の偽装・確
    認にはモックを使⽤する
    • フェイクを使うことで実際の動作に近い形でプレビューできるが、より堅
    牢な開発のためにはピクセルレベルでテストできる画像⽐較や、バックエ
    ンドへのアクセスを含めたE2Eも併⽤するとよい
    

    View Slide

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
    

    View Slide

32. まとめ
    

    View Slide

33. Compose Previewを使う利点
    • 開発初期からCompose Previewを使ってさまざまな環境に対応したUIを構築できる
    • Previewを実装しやすいインターフェース、パーツ単位を⼼がけることで設計がき
    れいになる
    • 画⾯全体のプレビューではフェイクの実装を使うことで本番に近い形で確認しなが
    ら実装できる
    • 実際に動くモデルとプレビューをセットで共有することでチームで堅牢なUIを作れ
    る
    

    View Slide

34. 今後の課題
    • 実装コードの近くにフェイクがあるため本番のアプリに混⼊する可能性
    がある
    • より複雑な画⾯単位でのプレビューをどうするか
    • フェイクデータの管理と更新
    • フェイクを実装する⼿間
    

    View Slide

35. Let’s Preview! Jetpack Compose
    

    View Slide

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
    

    View Slide