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
450
プレビューファーストUI開発
mitohato14
January 19, 2024
Tweet
Share
More Decks by mitohato14
See All by mitohato14
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
2
680
アプリの復旧を早くしたい!
mitohato14
0
97
事業開発とコミュニティ活動
mitohato14
0
43
新米テックリードの試行錯誤.pdf
mitohato14
0
490
JetpackCompose Slot APIs
mitohato14
0
820
Start Jetpack Compose.pdf
mitohato14
0
370
Featured
See All Featured
Speed Design
sergeychernyshev
30
980
Rails Girls Zürich Keynote
gr2m
94
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
17k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Why Our Code Smells
bkeepers
PRO
337
57k
GraphQLとの向き合い方2022年版
quramy
46
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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