Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
プレビューファーストUI開発
Search
mitohato14
January 19, 2024
1
460
プレビューファーストUI開発
mitohato14
January 19, 2024
Tweet
Share
More Decks by mitohato14
See All by mitohato14
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
2
970
アプリの復旧を早くしたい!
mitohato14
0
100
事業開発とコミュニティ活動
mitohato14
0
46
新米テックリードの試行錯誤.pdf
mitohato14
0
500
JetpackCompose Slot APIs
mitohato14
0
850
Start Jetpack Compose.pdf
mitohato14
0
370
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
KATA
mclloyd
30
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
4 Signs Your Business is Dying
shpigford
184
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Transcript
プレビューファーストUI開発 2024/01/19 Shibuya.apk 46 mitohato14
自己紹介 名前 Miyazato Hayato (mito) SNS mitohato14 所属 合同会社DMM.com 仕事 ・DMM PointClubアプリ開発 ・社内SDKの開発
・社内勉強会
1
サービス LP:https://lp.pointclub.dmm.com/ DMMポイントをお 得に貯めて 賢く管理 ! カジュアルゲームで 効率的に ポイントを稼げる !
FEATURE FEATURE DMMの お得な情報が 届く! FEATURE 2 サービスコンセプト
Web (iOS・Android) プラットフォーム 5
ポイントクラブのUI開発の悩み
UI開発の悩み ・状態やパターンが複雑な画面で実装漏れが発生する ・実装の見積もりが甘く、実装が伸びがち ・残りUI層のみになって考慮漏れ発覚 ・UI層で扱うデータがAPIからそのまま
プレビューを活用した開発を
プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
プレビュー機能 確認したいパターンが多いと......
プレビュー機能 確認したいパターンが多いと......
😇
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableのファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
😎
プレビューファーストなUI開発
プレビューファーストUI開発 まず、プレビューを定義する PreviewParameterProviderで各パターンの定義 最後にComposable実装
開発の流れ 1. UIコンポーネントごとに分割する 2. 利用する値を1つのクラスにする(今回はUiModel) 3. パターンに応じたインスタンスでProvider定義 4. Preview定義 5.
Composable定義
UIコンポーネントに分割 画面をある程度のまとまりに分割 利用する値を一つのクラスにまとめられる程度
UIコンポーネントに分割
UIコンポーネントに分割
UIコンポーネントに分割 ←CampaignComponent ↓PriceComponent ↓ContentComponent
空のComposableとUiModelの定義 UIコンポーネントに適したComposable名とUIModelの定義 Composableの中身は後で
空のComposableとUiModelの定義
空のComposableとUiModelの定義
空のComposableとUiModelの定義
PreviewParameterProvider定義 UiModelを状態パターンごとにインスタンス化 Providerの作成
PreviewParameterProvider定義
PreviewParameterProvider定義
PreviewParameterProvider定義
Preview Composableの定義 空のComposableとProviderの繋ぎこみ まだ表示されない
Preview Composableの定義
Preview Composableの定義
Preview Composableの定義
PR作成 Providerとプレビュー定義でPR作成 PR差分を小さく パターン定義の過不足を注視
PR作成
Composableの実装 パターンに応じた表示ができるように プレビューを確認しながらやるだけ
プレビューの確認
プレビューの確認
プレビューの確認
利点 ・パターン別確認でUIの実装漏れを防ぐ ・作業・PR分担ができる ・API接続してなくてもUI開発できる ・パターンごとのデバッグがしやすい ・デザイナーさんとの確認がしやすい ・Composableが見やすく
懸念点 ・Composableに合わせたクラス作成が少し面倒 ・分割する基準が難しい ・多くの値も利用したUI表現が難しい ・プレビュー描画が重い
まとめ ・PreviewParameterProviderを利用したプレビューファースト ・UIパターンの先定義で実装漏れ防止 ・いつでもどのComposableからでも実装できる ・表現が難しい場合がある ・分割しすぎると面倒に感じてしまう
参考 https://developer.android.com/jetpack/compose/tooling/preview s https://developer.android.com/reference/kotlin/androidx/compo se/ui/tooling/preview/PreviewParameterProvider