$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
プレビューファーストUI開発
Search
mitohato14
January 19, 2024
1
470
プレビューファーストUI開発
mitohato14
January 19, 2024
Tweet
Share
More Decks by mitohato14
See All by mitohato14
Androidアプリ開発にもCursorという選択肢を
mitohato14
0
28
兎に角、コードレビュー
mitohato14
1
270
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
4
2.4k
アプリの復旧を早くしたい!
mitohato14
1
120
事業開発とコミュニティ活動
mitohato14
0
53
新米テックリードの試行錯誤.pdf
mitohato14
1
520
JetpackCompose Slot APIs
mitohato14
0
940
Start Jetpack Compose.pdf
mitohato14
0
380
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
970
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Facilitating Awesome Meetings
lara
57
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fireside Chat
paigeccino
41
3.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Being A Developer After 40
akosma
91
590k
Making Projects Easy
brettharned
120
6.5k
Faster Mobile Websites
deanohume
310
31k
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