プレビューファーストUI開発

Slide 1

Slide 1 text

プレビューファーストUI開発 2024/01/19 Shibuya.apk 46 mitohato14

Slide 2

Slide 2 text

自己紹介名前　Miyazato Hayato (mito) SNS　mitohato14 所属　合同会社DMM.com 仕事・DMM PointClubアプリ開発・社内SDKの開発・社内勉強会

Slide 3

Slide 3 text

Slide 4

Slide 4 text

サービス LP：https://lp.pointclub.dmm.com/ DMMポイントをお得に貯めて賢く管理 ! カジュアルゲームで効率的にポイントを稼げる ! FEATURE FEATURE DMMのお得な情報が届く! FEATURE 2 サービスコンセプト

Slide 5

Slide 5 text

Web （iOS・Android）プラットフォーム 5

Slide 6

Slide 6 text

ポイントクラブのUI開発の悩み

Slide 7

Slide 7 text

UI開発の悩み・状態やパターンが複雑な画面で実装漏れが発生する・実装の見積もりが甘く、実装が伸びがち・残りUI層のみになって考慮漏れ発覚・UI層で扱うデータがAPIからそのまま

Slide 8

Slide 8 text

プレビューを活用した開発を

Slide 9

Slide 9 text

プレビュー機能 Composableの見た目を様々なパターンで確認コードの修正がリアルタイム反映簡単な操作も

Slide 10

Slide 10 text

プレビュー機能 Composableの見た目を様々なパターンで確認コードの修正がリアルタイム反映簡単な操作も

Slide 11

Slide 11 text

プレビュー機能確認したいパターンが多いと......

Slide 12

Slide 12 text

プレビュー機能確認したいパターンが多いと......

Slide 13

Slide 13 text

😇

Slide 14

Slide 14 text

PreviewParameterProvider プレビュー用機能大規模なデータセットをプレビューに利用するために利用 Composableのファイルが見やすくプレビューに提供できるオブジェクトの型は1種類

Slide 15

Slide 15 text

PreviewParameterProvider プレビュー用機能大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすくプレビューに提供できるオブジェクトの型は1種類

Slide 16

Slide 16 text

Slide 17

Slide 17 text

😎

Slide 18

Slide 18 text

プレビューファーストなUI開発

Slide 19

Slide 19 text

プレビューファーストUI開発まず、プレビューを定義する PreviewParameterProviderで各パターンの定義最後にComposable実装

Slide 20

Slide 20 text

開発の流れ 1. UIコンポーネントごとに分割する 2. 利用する値を1つのクラスにする(今回はUiModel) 3. パターンに応じたインスタンスでProvider定義 4. Preview定義 5. Composable定義

Slide 21

Slide 21 text

UIコンポーネントに分割画面をある程度のまとまりに分割利用する値を一つのクラスにまとめられる程度

Slide 22

Slide 22 text

UIコンポーネントに分割

Slide 23

Slide 23 text

UIコンポーネントに分割

Slide 24

Slide 24 text

UIコンポーネントに分割 ←CampaignComponent ↓PriceComponent ↓ContentComponent

Slide 25

Slide 25 text

空のComposableとUiModelの定義 UIコンポーネントに適したComposable名とUIModelの定義 Composableの中身は後で

Slide 26

Slide 26 text

空のComposableとUiModelの定義

Slide 27

Slide 27 text

空のComposableとUiModelの定義

Slide 28

Slide 28 text

空のComposableとUiModelの定義

Slide 29

Slide 29 text

PreviewParameterProvider定義 UiModelを状態パターンごとにインスタンス化 Providerの作成

Slide 30

Slide 30 text

PreviewParameterProvider定義

Slide 31

Slide 31 text

PreviewParameterProvider定義

Slide 32

Slide 32 text

PreviewParameterProvider定義

Slide 33

Slide 33 text

Preview Composableの定義空のComposableとProviderの繋ぎこみまだ表示されない

Slide 34

Slide 34 text

Preview Composableの定義

Slide 35

Slide 35 text

Preview Composableの定義

Slide 36

Slide 36 text

Preview Composableの定義

Slide 37

Slide 37 text

PR作成 Providerとプレビュー定義でPR作成 PR差分を小さくパターン定義の過不足を注視

Slide 38

Slide 38 text

PR作成

Slide 39

Slide 39 text

Composableの実装パターンに応じた表示ができるようにプレビューを確認しながらやるだけ

Slide 40

Slide 40 text

プレビューの確認

Slide 41

Slide 41 text

プレビューの確認

Slide 42

Slide 42 text

プレビューの確認

Slide 43

Slide 43 text

利点・パターン別確認でUIの実装漏れを防ぐ・作業・PR分担ができる・API接続してなくてもUI開発できる・パターンごとのデバッグがしやすい・デザイナーさんとの確認がしやすい・Composableが見やすく

Slide 44

Slide 44 text

懸念点・Composableに合わせたクラス作成が少し面倒・分割する基準が難しい・多くの値も利用したUI表現が難しい・プレビュー描画が重い

Slide 45

Slide 45 text

まとめ・PreviewParameterProviderを利用したプレビューファースト・UIパターンの先定義で実装漏れ防止・いつでもどのComposableからでも実装できる・表現が難しい場合がある・分割しすぎると面倒に感じてしまう

Slide 46

Slide 46 text

参考 https://developer.android.com/jetpack/compose/tooling/preview s https://developer.android.com/reference/kotlin/androidx/compo se/ui/tooling/preview/PreviewParameterProvider