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
740
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.6k
サロンアプリの技術的負債解消への取り組み
k_torishima
0
470
Other Decks in Technology
See All in Technology
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
2
1.1k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略 / phper-kaigi-2025-ryu
carta_engineering
0
680
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
200
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
400
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
380
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
グループポリシー再確認
murachiakira
0
160
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
130
Redefine_Possible
upsider_tech
0
240
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
The Language of Interfaces
destraynor
157
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Designing Experiences People Love
moore
141
23k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Code Review Best Practice
trishagee
67
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Typedesign – Prime Four
hannesfritz
41
2.6k
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.