DMM.Swift #1 詳解 ViewModifier

Transcript

1. © DMM © DMM CONFIDENTIAL 詳解 ViewModifier DMM.swift 2024/1/29
2. © DMM 自己紹介 鳥嶋 晃次 @k_torishima 2022年 合同会社DMM.com 中途入社 二次元&イノベーション本部 オンラインサロン開発部 プロダクト開発チーム 2
3. © DMM 直近の活動 • DMM INSIDE • iOSDC 2023登壇 • そのほか色々 3
4. © DMM アジェンダ • ViewModifierとは • ViewModifierの特徴 • プロダクト活用例 • 実装時のポイント • まとめ 4
5. © DMM 5 ViewModifierとは
6. © DMM ViewModifierとは • SwiftUIが初期リリースされた時からあるProtocol • Viewを変更することなく新しいバージョンのViewを生成す る • 再利用可能なModifierを作成できる 6
7. © DMM 7 Viewを変更することなく 新しいバージョンのViewを生成する
8. © DMM 8 “A modifier that you apply to a view or another view modifier, producing a different version of the original value.” “Viewまたは別のview modifierに適用するmodifierで、元の値の異 なるバージョンを生成する。” https://developer.apple.com/documentation/swiftui/viewmodifier
9. © DMM つまり • 元のViewには影響を与えず、ViewModifierに適用した新しい View(ModifiedContent )を生成するということ 9
10. © DMM 再利用可能なModifierを作成できる • 作成したViewModifierは再利用可能、他のViewにも適応できる 10
11. © DMM 11 ViewModifierの特徴
12. © DMM 特徴 • 状態管理が可能 • ロジックを持った再利用可能なModifierを実装できる 12
13. © DMM 13 状態管理が可能
14. © DMM 前提として • 値型の特性に基づくためstructを用いて実装する • body(content:)で元のView（Content）を修飾して新たなView（Body）を生成する。 • 新たなView（Body）はView Protocolに準拠しており、元のView（Content）の変更に応じて再 描画されるようになっている 14
15. © DMM 状態管理が可能 • ViewModifierは@State、@Binding等のPropertyWrapper使用 して、自身が生成するViewの状態を管理し、その状態に応じての再 描画をトリガーすることができる。 • これにより、ViewModifierは適用されるViewの見た目や振る舞い を動的に変更することが可能となる 15
16. © DMM 状態管理が可能 16
17. © DMM 17 ロジックを持った 再利用可能なModifierを実装できる
18. © DMM ロジックを持った再利用可能なModifierを実装できる • @State、@Binding等のPropertyWrapper使用できるのでViewに 対してのロジックを実装することができる • よって再利用可能な、ロジックを持ったModifierを実装することがで き、ViewのStateに対して装飾や結果を出し分けたりすることができ る 18
19. © DMM ロジックを持った再利用可能なModifierを実装できる 19
20. © DMM 20 プロダクト活用例
21. © DMM プロダクト活用例 • Viewの表示、非表示を制御するModifier • NavigationBarを共通化したModifier • キーボードの制御を実装したModifier • 画面遷移制御を実装したModifier 21
22. © DMM 22 Viewの表示、非表示を制御するModifier
23. © DMM Hidden • Viewの表示、非表示を制御するModifier 23
24. © DMM 24 NavigationBarを共通化したModifier
25. © DMM NavigationTitleModifier • NavigationTitleの Style、Actionの実装を共通化 • Navigation Stack配下の画面で 共通化したい場合はこのModifier を適用することで共通化できる 25
26. © DMM 26 キーボードの制御を実装したModifier
27. © DMM KeyboardObserver • キーボードの表示状態を監視し、通知を受け取った時に状態を更新 する制御を実装してる • View側はキーボードの表示、非表示を監視することができ、 状態に合わせてUIを変更できるようになっている 27
28. © DMM KeyboardObserver 28
29. © DMM 29 画面遷移制御を実装したModifier
30. © DMM NavigationModifier • NavigationのRootとなる画面に適用することで、その画面に Navigationの機能を与えることができるModifier • NavigationStackの実装を切り出して再利用性を高めた実装となっ ている 30
31. © DMM NavigationModifier 31
32. © DMM ModalNavigationModifier • モーダルでの画面遷移を制御するModifier • モーダル遷移のスタック制御を可能とする機能の実装 • NavigationStackのモーダル版のような動作を可能とする 32
33. © DMM ModalNavigationModifier 33
34. © DMM 34 実装時のポイント
35. © DMM 実装時のポイント • View Extension と ViewModifierどちらを採用するべき か • Viewで実装するのか、Modifierで実装するのかの判断 は、Viewに対して何がしたいのかで判断すると良い 35
36. © DMM 36 View Extension or ViewModifier
37. © DMM View Extension or ViewModifier • 状態をもたせないシンプルな場合はView Extensionを使うとよさそう • しかし Extensionを使う場合は適応したModifierの型がネストした状態とな る • ViewModifierで同じものを実装した場合は適用したModifierを包括する単 一のModifiedContentが生成される • 状況に応じて使い分けるとよさそう 37
38. © DMM View Extension or ViewModifier 38
39. © DMM 39 View or ViewModifier
40. © DMM View or ViewModifier • 当初ViewModifierで実装したが、Viewで実装する方が適していた ため実装し直した • ViewModifierはあくまでもModifierであるということを認識する 40
41. © DMM View or ViewModifier 41
42. © DMM 42 まとめ
43. © DMM まとめ • ViewModifierは、関心ごとを分離するときのアプローチとして 使える • ただし主役はあくまでViewなので、Viewに対しての Modifier(修飾子)を実装しているんだよということを忘れてはい けない • SwiftUIで追加されたAPIはかなり良くできているので勉強にな る 43
44. © DMM ご静聴ありがとうございました
45. © DMM Audience Q&A Session ⓘ Click Present with Slido or install our Chrome extension to show live Q&A while presenting.