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
650
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
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
110
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.4k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.1k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1k
TypeScript、上達の瞬間
sadnessojisan
46
13k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
For a Future-Friendly Web
brad_frost
175
9.4k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Language of Interfaces
destraynor
154
24k
How STYLIGHT went responsive
nonsquared
95
5.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing Experiences People Love
moore
138
23k
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.