20210621-mftd-GoogleIORecap-Namazu

Transcript

1. © 2021 eureka, Inc. All Rights Reserved. 初めての Jetpack Compose 【3社合同】Money Forward Tech Drive - #IO21 Recap 2021.6.21 Namazu @eureka
2. © 2021 eureka, Inc. All Rights Reserved. 自己紹介 • Namazu • 2021年新卒Androidエンジニア • 　 BlondeNamazu • 　 @blonde_namazu
3. © 2021 eureka, Inc. All Rights Reserved.
4. 4 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting コミュニティチャット © 2021 eureka, Inc. All Rights Reserved. 新機能
5. 5 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting • Jetpack Composeとは？ • Jetpack Compose移行のメリット • Jetpack Compose移行のコスト • まとめ 目次 © 2021 eureka, Inc. All Rights Reserved.
6. 6 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Composeとは？ © 2021 eureka, Inc. All Rights Reserved.
7. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは？ • Googleが提供する宣言的UIツールキット • 既存のxmlベースのViewシステムの代替となる • 2021年7月に1.0 (stable) 配信予定！ • 既に導入している企業も多数
8. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは？ • Jetpack Composeの例
9. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは？ • Jetpack Composeの例
10. 10 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のメリット © 2021 eureka, Inc. All Rights Reserved.
11. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット 宣言的UI SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
12. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット：宣言的UI 宣言的UI SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
13. © 2021 eureka, Inc. All Rights Reserved. • 宣言的UIとは何か？ ◦ “Single source of truth”に従う ◦ 与えられた状態に対してのみ依存し、一意に振る舞いが定まるUI ◦ 既存のxmlベースのViewシステムのような、状態に対応したUIの生成方法を記 述する手法とは異なる Jetpack Compose移行のメリット：宣言的UI
14. © 2021 eureka, Inc. All Rights Reserved. • 各Viewが状態を持ち、コードでそれぞれ更新していく仕組みは複雑 Jetpack Compose移行のメリット：宣言的UI
15. © 2021 eureka, Inc. All Rights Reserved. • 宣言的UIではUIは与えられた状態に対して不変なViewを生成する Jetpack Compose移行のメリット：宣言的UI
16. © 2021 eureka, Inc. All Rights Reserved. • Jetpack Composeの利点：表示ロジックのカプセル化 ◦ Compose関数の中身に外部から アクセスすることは出来ない ◦ 意図しないUIのバグを未然に防ぐ Jetpack Compose移行のメリット：宣言的UI
17. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット：デザインツール 宣言的UI SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
18. © 2021 eureka, Inc. All Rights Reserved. Compose Preview • UIパーツ単位でプレビュー出来る • @Preview を付けるだけ！ • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット：デザインツール
19. © 2021 eureka, Inc. All Rights Reserved. Compose Preview • UIパーツ単位でプレビュー出来る • @Preview を付けるだけ！ • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット：デザインツール
20. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット：デザインツール Sample Data • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
21. © 2021 eureka, Inc. All Rights Reserved. Sample Data Jetpack Compose移行のメリット：デザインツール • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
22. © 2021 eureka, Inc. All Rights Reserved. Interactive Preview Jetpack Compose移行のメリット：デザインツール • プレビュー画面でユーザー操作に対応 するUIの挙動を確認可能
23. © 2021 eureka, Inc. All Rights Reserved. Live literals Jetpack Compose移行のメリット：デザインツール • リテラルの変更を即座にプレビューに 反映 ex) テキスト、数値、色、etc…
24. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット：その他 宣言的UI SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
25. © 2021 eureka, Inc. All Rights Reserved. • Material Designに基づくアプリ独自のテーマ • ネストされたUIの描画パフォーマンスの向上 • アニメーションサポートの強化 Jetpack Compose移行のメリット：その他
26. 26 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のコスト © 2021 eureka, Inc. All Rights Reserved.
27. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト xmlベースのViewシステムと共存可能なので、徐々に移行できる！
28. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト Compose in XML, XML in Composeのどちらも可能！
29. 29 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2021 eureka, Inc. All Rights Reserved.
30. © 2021 eureka, Inc. All Rights Reserved. まとめ • Jetpack Composeとは宣言的UIツールキットである • Jetpack Compose移行のメリットは多数！ ◦ 宣言的UIの実現 ◦ デザインツールのサポートが強力 ◦ テーマの一貫性が保てる • Jetpack ComposeはxmlベースのViewシステムと 共存可能なので、徐々に移行可能！
31. © 2021 eureka, Inc. All Rights Reserved. 関連セッション
32. 32 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy All Hands Meeting 関連セッション © 2021 eureka, Inc. All Rights Reserved.
33. © 2021 eureka, Inc. All Rights Reserved. 関連セッション What’s new in Jetpack Compose • Jetpack Composeの概要を16分で説明 • まずはこれを見るのがオススメ
34. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack Composeの基本的な使い方を 教えてくれるWorkShop • 50分あるが、非常に分かりやすい Jetpack Basics
35. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • 既存のJetpackライブラリとComposeの 組み合わせ方を説明 • Composeのベストプラクティスにも触れて いるので、実用に役立ちそう Using Jetpack Libraries in Compose
36. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • セッション後半でJetpack Composeのデ ザインツールについて説明 • 前半の内容はComposeに関係ないが、 アニメーションに関してのアップデートも面 白かったので余裕があれば是非 What’s new in design tools
37. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack Compose中でマテリアルデザイ ンを用いる方法の説明 • デザイナーの参考にもなりそう Build beautiful Material Design apps with Jetpack Compose