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
820
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.8k
サロンアプリの技術的負債解消への取り組み
k_torishima
0
530
Other Decks in Technology
See All in Technology
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.1k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
390
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
260
CoRL 2025 Survey
harukiabe
1
230
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
340
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
330
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
110
初めてのDatabricks Apps開発
taka_aki
1
210
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
190
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
440
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Automating Front-end Workflow
addyosmani
1371
200k
Code Reviewing Like a Champion
maltzj
526
40k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A designer walks into a library…
pauljervisheath
209
24k
Building Applications with DynamoDB
mza
96
6.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Balancing Empowerment & Direction
lara
5
690
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.