Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DMM.Swift #1 詳解 ViewModifier
Search
K-Torishima
January 29, 2024
Technology
2
640
DMM.Swift #1 詳解 ViewModifier
K-Torishima
January 29, 2024
Tweet
Share
More Decks by K-Torishima
See All by K-Torishima
Human Interface Guidelinesから読み解く標準アプリの素晴らしい体験
k_torishima
0
3.4k
サロンアプリの技術的負債解消への取り組み
k_torishima
0
410
Other Decks in Technology
See All in Technology
AWS⼊社という選択肢、⾒えていますか
iwamot
1
760
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
フロントエンド メタフレームワーク 選定の際に考えたこと
yuppeeng
0
480
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
550
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
470
株式会社ドクターズプライム 会社紹介資料 - エンジニア向け
drsprime
0
190
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
120
Forget efficiency – Become more productive without the stress
ufried
0
210
君は隠しイベントを見つけれるか?
mujyun
0
390
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
運用イベント対応への生成AIの活用 with Failure Analysis Assistant
suzukyz
0
170
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Facilitating Awesome Meetings
lara
49
6.1k
Become a Pro
speakerdeck
PRO
24
5k
BBQ
matthewcrist
85
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Why Our Code Smells
bkeepers
PRO
334
57k
Transcript
© DMM © DMM CONFIDENTIAL 詳解 ViewModifier DMM.swift 2024/1/29
© DMM 自己紹介 鳥嶋 晃次 @k_torishima 2022年 合同会社DMM.com 中途入社 二次元&イノベーション本部
オンラインサロン開発部 プロダクト開発チーム 2
© DMM 直近の活動 • DMM INSIDE • iOSDC 2023登壇 •
そのほか色々 3
© DMM アジェンダ • ViewModifierとは • ViewModifierの特徴 • プロダクト活用例 •
実装時のポイント • まとめ 4
© DMM 5 ViewModifierとは
© DMM ViewModifierとは • SwiftUIが初期リリースされた時からあるProtocol • Viewを変更することなく新しいバージョンのViewを生成す る • 再利用可能なModifierを作成できる
6
© DMM 7 Viewを変更することなく 新しいバージョンのViewを生成する
© 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
© DMM つまり • 元のViewには影響を与えず、ViewModifierに適用した新しい View(ModifiedContent )を生成するということ 9
© DMM 再利用可能なModifierを作成できる • 作成したViewModifierは再利用可能、他のViewにも適応できる 10
© DMM 11 ViewModifierの特徴
© DMM 特徴 • 状態管理が可能 • ロジックを持った再利用可能なModifierを実装できる 12
© DMM 13 状態管理が可能
© DMM 前提として • 値型の特性に基づくためstructを用いて実装する • body(content:)で元のView(Content)を修飾して新たなView(Body)を生成する。 • 新たなView(Body)はView Protocolに準拠しており、元のView(Content)の変更に応じて再
描画されるようになっている 14
© DMM 状態管理が可能 • ViewModifierは@State、@Binding等のPropertyWrapper使用 して、自身が生成するViewの状態を管理し、その状態に応じての再 描画をトリガーすることができる。 • これにより、ViewModifierは適用されるViewの見た目や振る舞い を動的に変更することが可能となる
15
© DMM 状態管理が可能 16
© DMM 17 ロジックを持った 再利用可能なModifierを実装できる
© DMM ロジックを持った再利用可能なModifierを実装できる • @State、@Binding等のPropertyWrapper使用できるのでViewに 対してのロジックを実装することができる • よって再利用可能な、ロジックを持ったModifierを実装することがで き、ViewのStateに対して装飾や結果を出し分けたりすることができ る
18
© DMM ロジックを持った再利用可能なModifierを実装できる 19
© DMM 20 プロダクト活用例
© DMM プロダクト活用例 • Viewの表示、非表示を制御するModifier • NavigationBarを共通化したModifier • キーボードの制御を実装したModifier •
画面遷移制御を実装したModifier 21
© DMM 22 Viewの表示、非表示を制御するModifier
© DMM Hidden • Viewの表示、非表示を制御するModifier 23
© DMM 24 NavigationBarを共通化したModifier
© DMM NavigationTitleModifier • NavigationTitleの Style、Actionの実装を共通化 • Navigation Stack配下の画面で 共通化したい場合はこのModifier
を適用することで共通化できる 25
© DMM 26 キーボードの制御を実装したModifier
© DMM KeyboardObserver • キーボードの表示状態を監視し、通知を受け取った時に状態を更新 する制御を実装してる • View側はキーボードの表示、非表示を監視することができ、 状態に合わせてUIを変更できるようになっている 27
© DMM KeyboardObserver 28
© DMM 29 画面遷移制御を実装したModifier
© DMM NavigationModifier • NavigationのRootとなる画面に適用することで、その画面に Navigationの機能を与えることができるModifier • NavigationStackの実装を切り出して再利用性を高めた実装となっ ている 30
© DMM NavigationModifier 31
© DMM ModalNavigationModifier • モーダルでの画面遷移を制御するModifier • モーダル遷移のスタック制御を可能とする機能の実装 • NavigationStackのモーダル版のような動作を可能とする 32
© DMM ModalNavigationModifier 33
© DMM 34 実装時のポイント
© DMM 実装時のポイント • View Extension と ViewModifierどちらを採用するべき か •
Viewで実装するのか、Modifierで実装するのかの判断 は、Viewに対して何がしたいのかで判断すると良い 35
© DMM 36 View Extension or ViewModifier
© DMM View Extension or ViewModifier • 状態をもたせないシンプルな場合はView Extensionを使うとよさそう •
しかし Extensionを使う場合は適応したModifierの型がネストした状態とな る • ViewModifierで同じものを実装した場合は適用したModifierを包括する単 一のModifiedContentが生成される • 状況に応じて使い分けるとよさそう 37
© DMM View Extension or ViewModifier 38
© DMM 39 View or ViewModifier
© DMM View or ViewModifier • 当初ViewModifierで実装したが、Viewで実装する方が適していた ため実装し直した • ViewModifierはあくまでもModifierであるということを認識する
40
© DMM View or ViewModifier 41
© DMM 42 まとめ
© DMM まとめ • ViewModifierは、関心ごとを分離するときのアプローチとして 使える • ただし主役はあくまでViewなので、Viewに対しての Modifier(修飾子)を実装しているんだよということを忘れてはい けない
• SwiftUIで追加されたAPIはかなり良くできているので勉強にな る 43
© DMM ご静聴ありがとうございました
© DMM Audience Q&A Session ⓘ Click Present with Slido
or install our Chrome extension to show live Q&A while presenting.