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
2025.01.17_Sansan × DMM.swift
Search
RioFujimon
January 17, 2025
Programming
3
730
2025.01.17_Sansan × DMM.swift
2025.01.17 に Sansan × DMM.swift で発表したスライド
RioFujimon
January 17, 2025
Tweet
Share
More Decks by RioFujimon
See All by RioFujimon
実践 Realtime API 〜入力として音声データを扱う〜
riofujimon
1
71
Realtime API 入門
riofujimon
0
260
Let's learn code review
riofujimon
3
970
Other Decks in Programming
See All in Programming
Duke on CRaC with Jakarta EE
ivargrimstad
0
310
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
260
React 19アップデートのために必要なこと
uhyo
8
1.6k
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
130
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
Learning Kotlin with detekt
inouehi
1
220
自力でTTSモデルを作った話
zgock999
0
130
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
130
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
150
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
200
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
190
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
520
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Producing Creativity
orderedlist
PRO
344
40k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Language of Interfaces
destraynor
156
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building Applications with DynamoDB
mza
93
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A Philosophy of Restraint
colly
203
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Speed Design
sergeychernyshev
28
820
Transcript
Pro SwiftUI ΛಡΜͰಘΒΕͨࣝ Sansan × DMM.swift 2025 / 01 /
17 ౻ ᣦੜ ʙ SwiftUI ͷಈ࡞ݪཧΛཧղ͢Δ ʙ
ࣗݾհ • ౻ᣦੜʢRio Fujimonʣ • Sansanגࣜձࣾ Eight Engineering Unit Mobile
Application άϧʔϓ • ৽ଔ 2 • Eight iOS ΞϓϦͷ։ൃΛ୲ • XʢTwitterʣ ͪ͜Β
SwiftUI Λཧղͯ͑ͯ͠·͔͢ʁ
͕ࣗॻ͍ͨ SwiftUI ίʔυͷ ಈ࡞ݪཧΛઆ໌Ͱ͖·͔͢ʁ
SwiftUI ͷίʔυಈ͍͔ͨΒྑ͠ 🙆 ʹͳͬͯ·ͤΜ͔ʁ
😨 ແཧ͔ͱ ࢥͬͨਓ͍ΔͷͰͳ͍Ͱ͠ΐ͏͔ʁ
ͦΜͳਓͷୈҰา
ࠓ͓͢͠Δ͜ͱ 1. SwiftUI ͷϨΠΞτϓϩηε 2. Parent View ͱ Child View
ͷؔ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞτதཱੑ 5. View Identity ͷཧղ
SwiftUI ͷϨΠΞτϓϩηε
SwiftUI ͷϨΠΞτϓϩηε 1. Parent View ͕ Child View ʹαΠζΛఏҊ͢Δɻ 2.
Child View ɺParent View ͷఏҊใʹج͍ͮͯɺ αΠζΛબ͠ɺParent View બΛଚॏ͢Δɻ 3. Parent View ɺChild View Λ࠲ඪۭؒʹஔ͢Δɻ 💡ॏཁʢઈରཧղʣ
Parent View ͱ Child Viewͷؔ
ᶃ Parent View ͱ Child ViewͷؔΛճͰ͖Δʁ
ᶃ Parent View ͱ Child Viewͷؔ Parent View Child View
ᶄ Parent View ͱ Child ViewͷؔΛճͰ͖Δʁ
Parent View ͱ Child Viewͷؔ Parent View Child View ্هͷཧղ͚ͩͩͱɺෆे
🙅
Parent View ͱ Child Viewͷؔ Parent View Child View .frame()
ͷద༻ʹΑΓ Text Λϥοϓ͢Δ View Λੜ
Parent View ͱ Child ViewͷؔΛग़ྗ
Parent View ͱ Child ViewͷؔΛग़ྗ݁Ռ .frame() ͷద༻ʹΑΓɺModi f iedContent ͕ੜ͞ΕΔ
💡ॏཁʢઈରཧղʣ ݩͷ View Λ܁Γฦ͠มߋ͍ͯ͠ΔΘ͚Ͱͳ͘ɺ ݩͷViewΛมߋ͢Δ৽͍͠ View Λద༻͍ͯ͠Δ
ʢࢀߟʣModi f iedContent ͷఆٛ
.modi f ier() ͷద༻Ͱى͖͍ͯΔ͜ͱ .modi f ier() ͷద༻ = Modi
f iedContentΛੜ
View Size ͷमਖ਼
. f ixedSize() ͕ͲͷΑ͏ʹαΠζΛमਖ਼͍ͯ͠Δͷ͔આ໌Ͱ͖·͔͢ʁ . f ixedSize() Λద༻
SwiftUI ͰϨΠΞτΛܾఆ͢ΔͨΊͷ6ͭͷ 1. Minimum Width ͱ Minimum Height - View
͕ड͚ೖΕΔ࠷খݶͷ Space - ࠷খΑΓখ͍͞ Space ແࢹ͞Εɺ View ͕ఏҊ͞Εͨ Space ͔ΒΈग़͢ 2. Maximum Width ͱ Maximum Height - View ͕ड͚ೖΕΔ࠷େݶͷ Space - ࠷େΑΓେ͖͍ Space ແࢹ͞Εɺ Parent View Γͷ Space Ͱ Child View Λஔ͢Δ 3. Ideal Width ͱ Ideal Heightʢཧͷ෯ ͱ ཧͷߴ͞ʣ - View ͕Ήཧతͳ Space - ࠷খ͔Β࠷େͷൣғʹऩ·Δඞཁ͕͋Δ - ʢྫʣText ͷࣗવαΠζʢจࣈΛ1ߦʹऩΊΔͨΊʹదͨ͠ཧతͳ෯ͱߴ͞ʣ 💡ॏཁʢઈରཧղʣ
. f ixedSize() ͷ෦తͳಈ࡞ 30 × 100 30 × 100
Ideal Sizeɿ95 × 20 Ideal Size ΑΓ খ͍͞Մೳ Text ͷ Ideal Size
. f ixedSize() . f ixedSize() Λద༻ 💡. f ixedSize()
ɿཧαΠζΛݻఆαΠζʹঢ֨ͤ͞Δ
. f ixedSize() ͷ Image ͷద༻ ը໘෯ʹऩ·Βͳ͍ը૾ 300 × 100
ը૾ ͷ Ideal Size 300 × 100 Ideal Size ͘͠ Ideal Size ΑΓ খ͍͞Մೳ
View ͷϨΠΞτதཱੑ
Color.red ͷαΠζܾఆͷΈΛઆ໌Ͱ͖·͔͢ʁ .background(.red) ͱͯ͠ Color.red Λར༻
View ͷϨΠΞτதཱੑ ଞͷϏϡʔίϯςφͱͷΈ߹ΘͤʹΑͬͯॊೈʹࣗͷαΠζΛదԠͤ͞Δಛੑ ϨΠΞτதཱੑɺҎԼͷ 6 ͭͷ࣍ݩ ͕Өڹ͢Δ 1. Minimum Width
2. Minimum Height 3. Maximum Width 4. Maximum Height 5. Ideal Width 6. Ideal Height
Color.red ͷαΠζܾఆͷΈ ᶃ Parent View ͷαΠζΛड͚ೖΕΔ
Color.red ͷαΠζܾఆͷΈᶄ ը໘શମαΠζ ը໘શମαΠζ ϨΠΞτதཱ minWidth ͱ minHeight ϨΠΞτதཱ
࠷খҎ֎ͷ4ͭͷ Ideal Widthɿ95 Ideal Heightɿ20 Max Widthɿ95 Max Heightɿ20 300 200 Ideal Widthɿ300 Ideal Heightɿ200 Max Widthɿ95 Max Heightɿ20
View Identity ͷཧղ
View Identity View ΛҰҙʹࣝผ͠ɺ View ͷঢ়ଶදࣔ༰Λཧ͢ΔͨΊʹར༻͞ΕΔ 1. Explicit Identityʢ໌ࣔతͳΞΠσϯςΟςΟʣ •
ಛఆͷ View ʹରͯ͠ɺ.id() Λར༻ͯ͠໌ࣔతͳ Identity Λࢦఆ • ಈతͳσʔλΛѻ͏߹ʢྻͷ܁Γฦ͠ॲཧʣ • ಛఆͷ View Λࢀর͢Δඞཁ͕͋Δ߹ʢಛఆͷҐஔͷεΫϩʔϧॲཧʣ 2. Structural IdentityʢߏతͳΞΠσϯςΟςΟʣ • ίʔυͰͷஔߏʹج͍ͮͯɺࣗಈతʹੜ͞Εͨ Identity
View Identity ʹؔ࿈ͨ͠ SwiftUI ͷޡղ View ֊ʹมߋΛՃ͑Δͱɺ View πϦʔͷࠩൺֱΛߦ͍ɺԿ͕มߋ͞Ε͔ͨΛஅ͢Δ ※
View πϦʔͷࠩൺֱɿՃআ͞ΕͨཁૉΛಛఆ͢Δϓϩηε 🙅 🙆 SwiftUI ɺIdentity Λجʹ View Λࣝผ͠ɺঢ়ଶมߋΛޮతʹཧ͢Δ View ͷ Identity Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ɺదͳߋ৽ͱ࠶ඳըͷ伴 Swift ͷίϯύΠϥɺView ͷίʔυΛߏங͢ΔࡍʹҎԼͷใΛશͯѲ ʢSubView, modi f ier, ݅จ, ܁Γฦ͠ॲཧʣ
View Identity ͱ View ͷ Life Cycle • View Identify
ɺView ͷ Life Cycle Λܾఆ • View Identity ͕ߏత·ͨ໌ࣔతʹมߋ͞ΕΔͱɺͦͷ View ഁغ͞ΕΔ • View Identity ཧɺView ͷঢ়ଶҡ࣋ޮతͳ࠶ඳըʹ݁͢Δ
ࠨӈͲͪΒͷ SwiftUI ͷίʔυʹ͕͋Δ͔આ໌Ͱ͖·͔͢ʁ
ࠨଆͷ SwiftUI ͷίʔυͷ View ͷߏΛग़ྗ݁Ռ _ConditionalContent ʹΑΓɺtrue ͱ false ͷ࣌Ͱɺ
2ͭͷผʑͷܕͱͯ͠ѻ͍ɺҟͳΔ Identity ͷ ExampleView ͱղऍ Toggle ͢Δ͝ͱʹɺ࠶ϨϯμϦϯά͞Εɺ View ͷঢ়ଶഁغ͞ΕΔ
ʢࢀߟʣ_ConditinalContent ͷॳظԽ xed /Applications/Your_Xcode_Name.app/Contents/Developer/Platforms/ iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/ Frameworks/SwiftUI.framework/Modules/SwiftUI.swiftmodule/x86_64-apple-ios- simulator.swiftinterface .swiftinterface Λ։͘͜ͱͰ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ 👀
ӈଆͷ SwiftUI ͷίʔυͷ View ͷߏΛग़ྗ݁Ռ @ViewBuilder ͕ద༻͞Εͣɺ_ConditionalContent Λճආͯ͠ɺ AnyView ͱͳΓɺܕͱ֊ͷҐஔʹج͍ͮͯɺ
View ΛಉҰͷ Identity ͱͯ͠ཧ͍ͯ͠Δ Toggle ͯ͠ɺ࠶ϨϯμϦϯά͞Εͣɺ View ͷঢ়ଶอ࣋͞ΕΔ
SwiftUI ͷίʔυΛࡾ߲ԋࢉࢠΛར༻ͯ͠هड़ 1. AnyView → ExampleView ʹͳΓܕ໌֬ʹͳΔ 2. Structural IdentityʢߏతΞΠσϯςΟςΟʣ
͕ શͯॲཧΛ୲͏ঢ়ଶʹͳΔ ࡾ߲ԋࢉࢠΛར༻ͯ͠هड़͢Δ
ҎԼͷ༰ཧղͰ͖ͨͰ͠ΐ͏͔ʁ 1. SwiftUI ͷϨΠΞτϓϩηε 2. Parent View ͱ Child View
ͷؔ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞτதཱੑ 5. View Identity ͷཧղ
ଞʹ༷ʑͳใ͕ܝࡌ͞Ε͍ͯΔͷͰɺಡΜͰΈ͍ͯͩ͘͞
Thank You For Listening