Tweet
Tweet

Slide 1

Slide 1 text

© DMM © DMM CONFIDENTIAL 詳解 ViewModifier DMM.swift 2024/1/29

Slide 2

Slide 2 text

© DMM 自己紹介 鳥嶋 晃次 @k_torishima 2022年 合同会社DMM.com 中途入社 二次元&イノベーション本部 オンラインサロン開発部 プロダクト開発チーム 2

Slide 3

Slide 3 text

© DMM 直近の活動 • DMM INSIDE • iOSDC 2023登壇 • そのほか色々 3

Slide 4

Slide 4 text

© DMM アジェンダ • ViewModifierとは • ViewModifierの特徴 • プロダクト活用例 • 実装時のポイント • まとめ 4

Slide 5

Slide 5 text

© DMM 5 ViewModifierとは

Slide 6

Slide 6 text

© DMM ViewModifierとは • SwiftUIが初期リリースされた時からあるProtocol • Viewを変更することなく新しいバージョンのViewを生成す る • 再利用可能なModifierを作成できる 6

Slide 7

Slide 7 text

© DMM 7 Viewを変更することなく 新しいバージョンのViewを生成する

Slide 8

Slide 8 text

© 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

Slide 9

Slide 9 text

© DMM つまり • 元のViewには影響を与えず、ViewModifierに適用した新しい View(ModifiedContent )を生成するということ 9

Slide 10

Slide 10 text

© DMM 再利用可能なModifierを作成できる • 作成したViewModifierは再利用可能、他のViewにも適応できる 10

Slide 11

Slide 11 text

© DMM 11 ViewModifierの特徴

Slide 12

Slide 12 text

© DMM 特徴 • 状態管理が可能 • ロジックを持った再利用可能なModifierを実装できる 12

Slide 13

Slide 13 text

© DMM 13 状態管理が可能

Slide 14

Slide 14 text

© DMM 前提として • 値型の特性に基づくためstructを用いて実装する • body(content:)で元のView（Content）を修飾して新たなView（Body）を生成する。 • 新たなView（Body）はView Protocolに準拠しており、元のView（Content）の変更に応じて再 描画されるようになっている 14

Slide 15

Slide 15 text

© DMM 状態管理が可能 • ViewModifierは@State、@Binding等のPropertyWrapper使用 して、自身が生成するViewの状態を管理し、その状態に応じての再 描画をトリガーすることができる。 • これにより、ViewModifierは適用されるViewの見た目や振る舞い を動的に変更することが可能となる 15

Slide 16

Slide 16 text

© DMM 状態管理が可能 16

Slide 17

Slide 17 text

© DMM 17 ロジックを持った 再利用可能なModifierを実装できる

Slide 18

Slide 18 text

© DMM ロジックを持った再利用可能なModifierを実装できる • @State、@Binding等のPropertyWrapper使用できるのでViewに 対してのロジックを実装することができる • よって再利用可能な、ロジックを持ったModifierを実装することがで き、ViewのStateに対して装飾や結果を出し分けたりすることができ る 18

Slide 19

Slide 19 text

© DMM ロジックを持った再利用可能なModifierを実装できる 19

Slide 20

Slide 20 text

© DMM 20 プロダクト活用例

Slide 21

Slide 21 text

© DMM プロダクト活用例 • Viewの表示、非表示を制御するModifier • NavigationBarを共通化したModifier • キーボードの制御を実装したModifier • 画面遷移制御を実装したModifier 21

Slide 22

Slide 22 text

© DMM 22 Viewの表示、非表示を制御するModifier

Slide 23

Slide 23 text

© DMM Hidden • Viewの表示、非表示を制御するModifier 23

Slide 24

Slide 24 text

© DMM 24 NavigationBarを共通化したModifier

Slide 25

Slide 25 text

© DMM NavigationTitleModifier • NavigationTitleの Style、Actionの実装を共通化 • Navigation Stack配下の画面で 共通化したい場合はこのModifier を適用することで共通化できる 25

Slide 26

Slide 26 text

© DMM 26 キーボードの制御を実装したModifier

Slide 27

Slide 27 text

© DMM KeyboardObserver • キーボードの表示状態を監視し、通知を受け取った時に状態を更新 する制御を実装してる • View側はキーボードの表示、非表示を監視することができ、 状態に合わせてUIを変更できるようになっている 27

Slide 28

Slide 28 text

© DMM KeyboardObserver 28

Slide 29

Slide 29 text

© DMM 29 画面遷移制御を実装したModifier

Slide 30

Slide 30 text

© DMM NavigationModifier • NavigationのRootとなる画面に適用することで、その画面に Navigationの機能を与えることができるModifier • NavigationStackの実装を切り出して再利用性を高めた実装となっ ている 30

Slide 31

Slide 31 text

© DMM NavigationModifier 31

Slide 32

Slide 32 text

© DMM ModalNavigationModifier • モーダルでの画面遷移を制御するModifier • モーダル遷移のスタック制御を可能とする機能の実装 • NavigationStackのモーダル版のような動作を可能とする 32

Slide 33

Slide 33 text

© DMM ModalNavigationModifier 33

Slide 34

Slide 34 text

© DMM 34 実装時のポイント

Slide 35

Slide 35 text

© DMM 実装時のポイント • View Extension と ViewModifierどちらを採用するべき か • Viewで実装するのか、Modifierで実装するのかの判断 は、Viewに対して何がしたいのかで判断すると良い 35

Slide 36

Slide 36 text

© DMM 36 View Extension or ViewModifier

Slide 37

Slide 37 text

© DMM View Extension or ViewModifier • 状態をもたせないシンプルな場合はView Extensionを使うとよさそう • しかし Extensionを使う場合は適応したModifierの型がネストした状態とな る • ViewModifierで同じものを実装した場合は適用したModifierを包括する単 一のModifiedContentが生成される • 状況に応じて使い分けるとよさそう 37

Slide 38

Slide 38 text

© DMM View Extension or ViewModifier 38

Slide 39

Slide 39 text

© DMM 39 View or ViewModifier

Slide 40

Slide 40 text

© DMM View or ViewModifier • 当初ViewModifierで実装したが、Viewで実装する方が適していた ため実装し直した • ViewModifierはあくまでもModifierであるということを認識する 40

Slide 41

Slide 41 text

© DMM View or ViewModifier 41

Slide 42

Slide 42 text

© DMM 42 まとめ

Slide 43

Slide 43 text

© DMM まとめ • ViewModifierは、関心ごとを分離するときのアプローチとして 使える • ただし主役はあくまでViewなので、Viewに対しての Modifier(修飾子)を実装しているんだよということを忘れてはい けない • SwiftUIで追加されたAPIはかなり良くできているので勉強にな る 43

Slide 44

Slide 44 text

© DMM ご静聴ありがとうございました

Slide 45

Slide 45 text

© DMM Audience Q&A Session ⓘ Click Present with Slido or install our Chrome extension to show live Q&A while presenting.