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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UIコンポーネントに分割

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

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

空のComposableとUiModelの定義

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

PreviewParameterProvider定義

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

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

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

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

More Decks by mitohato14

Featured

Transcript