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
520
Other Decks in Technology
See All in Technology
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.2k
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
160
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
490
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
390
What is BigQuery?
aizack_harks
0
130
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
バイブコーディングと継続的デプロイメント
nwiizo
2
410
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
KATA
mclloyd
32
15k
Docker and Python
trallard
46
3.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building an army of robots
kneath
306
46k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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.