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

Transcript

1. プレビューファーストUI開発 2024/01/19 Shibuya.apk 46 mitohato14
2. 自己紹介 名前　Miyazato Hayato (mito) SNS　mitohato14 所属　合同会社DMM.com 仕事 ・DMM PointClubアプリ開発 ・社内SDKの開発 ・社内勉強会
4. サービス LP：https://lp.pointclub.dmm.com/ DMMポイントをお 得に貯めて 賢く管理 ! カジュアルゲームで 効率的に ポイントを稼げる ! FEATURE FEATURE DMMの お得な情報が 届く! FEATURE 2 サービスコンセプト
5. Web （iOS・Android） プラットフォーム 5
6. ポイントクラブのUI開発の悩み
7. UI開発の悩み ・状態やパターンが複雑な画面で実装漏れが発生する ・実装の見積もりが甘く、実装が伸びがち ・残りUI層のみになって考慮漏れ発覚 ・UI層で扱うデータがAPIからそのまま
8. プレビューを活用した開発を
9. プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
10. プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
11. プレビュー機能 確認したいパターンが多いと......
12. プレビュー機能 確認したいパターンが多いと......
13. 😇
14. PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableのファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
15. PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
16. PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
17. 😎
18. プレビューファーストなUI開発
19. プレビューファーストUI開発 まず、プレビューを定義する PreviewParameterProviderで各パターンの定義 最後にComposable実装
20. 開発の流れ 1. UIコンポーネントごとに分割する 2. 利用する値を1つのクラスにする(今回はUiModel) 3. パターンに応じたインスタンスでProvider定義 4. Preview定義 5. Composable定義
21. UIコンポーネントに分割 画面をある程度のまとまりに分割 利用する値を一つのクラスにまとめられる程度
22. UIコンポーネントに分割
23. UIコンポーネントに分割
24. UIコンポーネントに分割 ←CampaignComponent ↓PriceComponent ↓ContentComponent
25. 空のComposableとUiModelの定義 UIコンポーネントに適したComposable名とUIModelの定義 Composableの中身は後で
26. 空のComposableとUiModelの定義
27. 空のComposableとUiModelの定義
28. 空のComposableとUiModelの定義
29. PreviewParameterProvider定義 UiModelを状態パターンごとにインスタンス化 Providerの作成
30. PreviewParameterProvider定義
31. PreviewParameterProvider定義
32. PreviewParameterProvider定義
33. Preview Composableの定義 空のComposableとProviderの繋ぎこみ まだ表示されない
34. Preview Composableの定義
35. Preview Composableの定義
36. Preview Composableの定義
37. PR作成 Providerとプレビュー定義でPR作成 PR差分を小さく パターン定義の過不足を注視
38. PR作成
39. Composableの実装 パターンに応じた表示ができるように プレビューを確認しながらやるだけ
40. プレビューの確認
41. プレビューの確認
42. プレビューの確認
43. 利点 ・パターン別確認でUIの実装漏れを防ぐ ・作業・PR分担ができる ・API接続してなくてもUI開発できる ・パターンごとのデバッグがしやすい ・デザイナーさんとの確認がしやすい ・Composableが見やすく
44. 懸念点 ・Composableに合わせたクラス作成が少し面倒 ・分割する基準が難しい ・多くの値も利用したUI表現が難しい ・プレビュー描画が重い
45. まとめ ・PreviewParameterProviderを利用したプレビューファースト ・UIパターンの先定義で実装漏れ防止 ・いつでもどのComposableからでも実装できる ・表現が難しい場合がある ・分割しすぎると面倒に感じてしまう
46. 参考 https://developer.android.com/jetpack/compose/tooling/preview s https://developer.android.com/reference/kotlin/androidx/compo se/ui/tooling/preview/PreviewParameterProvider