2025.01.17_Sansan × DMM.swift

2025.01.17 に Sansan × DMM.swift で発表したスライド

Transcript

1. Pro SwiftUI ΛಡΜͰಘΒΕͨ஌ࣝ Sansan × DMM.swift 2025 / 01 / 17 ౻໳ ᣦੜ ʙ SwiftUI ͷಈ࡞ݪཧΛཧղ͢Δ ʙ
2. ࣗݾ঺հ • ౻໳ᣦੜʢRio Fujimonʣ • Sansanגࣜձࣾ Eight Engineering Unit Mobile Application άϧʔϓ • ৽ଔ 2 ೥໨ • Eight iOS ΞϓϦͷ։ൃΛ୲౰ • XʢTwitterʣ ͸ͪ͜Β
3. SwiftUI Λཧղͯ͠࢖͑ͯ·͔͢ʁ
4. ࣗ෼͕ॻ͍ͨ SwiftUI ίʔυͷ ಈ࡞ݪཧΛઆ໌Ͱ͖·͔͢ʁ
5. SwiftUI ͷίʔυಈ͍͔ͨΒྑ͠ 🙆 ʹͳͬͯ·ͤΜ͔ʁ
6. 😨 ແཧ͔΋ͱ ࢥͬͨਓ΋͍ΔͷͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ
7. ͦΜͳਓ΁ͷୈҰา
8. ࠓ೔͓࿩͢͠Δ͜ͱ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ
9. SwiftUI ͷϨΠΞ΢τϓϩηε
10. SwiftUI ͷϨΠΞ΢τϓϩηε 1. Parent View ͕ Child View ʹαΠζΛఏҊ͢Δɻ 2. Child View ͸ɺParent View ͷఏҊ৘ใʹج͍ͮͯɺ αΠζΛબ୒͠ɺParent View ͸બ୒Λଚॏ͢Δɻ 3. Parent View ͸ɺChild View Λ࠲ඪۭؒ಺ʹ഑ஔ͢Δɻ 💡ॏཁʢઈରཧղʣ
11. Parent View ͱ Child Viewͷؔ܎
12. ᶃ Parent View ͱ Child Viewͷؔ܎Λճ౴Ͱ͖Δʁ
13. ᶃ Parent View ͱ Child Viewͷؔ܎ Parent View Child View
14. ᶄ Parent View ͱ Child Viewͷؔ܎Λճ౴Ͱ͖Δʁ
15. Parent View ͱ Child Viewͷؔ܎ Parent View Child View ্هͷཧղ͚ͩͩͱɺෆे෼ 🙅
16. Parent View ͱ Child Viewͷؔ܎ Parent View Child View .frame() ͷద༻ʹΑΓ Text Λϥοϓ͢Δ View Λੜ੒
17. Parent View ͱ Child Viewͷؔ܎Λग़ྗ
18. Parent View ͱ Child Viewͷؔ܎Λग़ྗ݁Ռ .frame() ͷద༻ʹΑΓɺModi f iedContent ͕ੜ੒͞ΕΔ 💡ॏཁʢઈରཧղʣ ݩͷ View Λ܁Γฦ͠มߋ͍ͯ͠ΔΘ͚Ͱ͸ͳ͘ɺ ݩͷViewΛมߋ͢Δ৽͍͠ View Λద༻͍ͯ͠Δ
19. ʢࢀߟʣModi f iedContent ͷఆٛ
20. .modi f ier() ͷద༻Ͱى͖͍ͯΔ͜ͱ .modi f ier() ͷద༻ = Modi f iedContentΛੜ੒
21. View Size ͷमਖ਼
22. . f ixedSize() ͕ͲͷΑ͏ʹαΠζΛमਖ਼͍ͯ͠Δͷ͔આ໌Ͱ͖·͔͢ʁ . f ixedSize() Λద༻
23. 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ߦʹऩΊΔͨΊʹదͨ͠ཧ૝తͳ෯ͱߴ͞ʣ 💡ॏཁʢઈରཧղʣ
24. . f ixedSize() ͷ಺෦తͳಈ࡞ 30 × 100 30 × 100 Ideal Sizeɿ95 × 20 Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ Text ͷ Ideal Size
25. . f ixedSize() . f ixedSize() Λద༻ 💡. f ixedSize() ɿཧ૝αΠζΛݻఆαΠζʹঢ֨ͤ͞Δ
26. . f ixedSize() ͷ Image ΁ͷద༻ ը໘෯ʹऩ·Βͳ͍ը૾ 300 × 100 ը૾ ͷ Ideal Size 300 × 100 Ideal Size ΋͘͠͸ Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ
27. View ͷϨΠΞ΢τதཱੑ
28. Color.red ͷαΠζܾఆͷ࢓૊ΈΛઆ໌Ͱ͖·͔͢ʁ .background(.red) ͱͯ͠ Color.red Λར༻
29. View ͷϨΠΞ΢τதཱੑ ଞͷϏϡʔ΍ίϯςφͱͷ૊Έ߹ΘͤʹΑͬͯॊೈʹࣗ෼ͷαΠζΛదԠͤ͞Δಛੑ ϨΠΞ΢τதཱੑ͸ɺҎԼͷ 6 ͭͷ࣍ݩ ͕Өڹ͢Δ 1. Minimum Width 2. Minimum Height 3. Maximum Width 4. Maximum Height 5. Ideal Width 6. Ideal Height
30. Color.red ͷαΠζܾఆͷ࢓૊Έ ᶃ Parent View ͷαΠζΛड͚ೖΕΔ
31. 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
32. View Identity ͷཧղ
33. View Identity View ΛҰҙʹࣝผ͠ɺ View ͷঢ়ଶ΍දࣔ಺༰Λ؅ཧ͢ΔͨΊʹར༻͞ΕΔ 1. Explicit Identityʢ໌ࣔతͳΞΠσϯςΟςΟʣ • ಛఆͷ View ʹରͯ͠ɺ.id() Λར༻ͯ͠໌ࣔతͳ Identity Λࢦఆ • ಈతͳσʔλΛѻ͏৔߹ʢ഑ྻͷ܁Γฦ͠ॲཧʣ • ಛఆͷ View Λࢀর͢Δඞཁ͕͋Δ৔߹ʢಛఆͷҐஔ΁ͷεΫϩʔϧॲཧʣ 2. Structural Identityʢߏ଄తͳΞΠσϯςΟςΟʣ • ίʔυ಺Ͱͷ഑ஔ΍ߏ଄ʹج͍ͮͯɺࣗಈతʹੜ੒͞Εͨ Identity
34. View Identity ʹؔ࿈ͨ͠ SwiftUI ͷޡղ View ֊૚ʹมߋΛՃ͑Δͱɺ View πϦʔͷࠩ෼ൺֱΛߦ͍ɺԿ͕มߋ͞Ε͔ͨΛ൑அ͢Δ ※ View πϦʔͷࠩ෼ൺֱɿ௥Ճ΍࡟আ͞ΕͨཁૉΛಛఆ͢Δϓϩηε 🙅 🙆 SwiftUI ͸ɺIdentity Λجʹ View Λࣝผ͠ɺঢ়ଶ΍มߋΛޮ཰తʹ؅ཧ͢Δ View ͷ Identity Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ɺద੾ͳߋ৽ͱ࠶ඳըͷ伴 Swift ͷίϯύΠϥ͸ɺView ͷίʔυΛߏங͢ΔࡍʹҎԼͷ৘ใΛશͯ೺Ѳ ʢSubView, modi f ier, ৚݅จ, ܁Γฦ͠ॲཧʣ
35. View Identity ͱ View ͷ Life Cycle • View Identify ͸ɺView ͷ Life Cycle Λܾఆ • View Identity ͕ߏ଄త·ͨ͸໌ࣔతʹมߋ͞ΕΔͱɺͦͷ View ͸ഁغ͞ΕΔ • View Identity ؅ཧ͸ɺView ͷঢ়ଶҡ࣋΍ޮ཰తͳ࠶ඳըʹ௚݁͢Δ
36. ࠨӈͲͪΒͷ SwiftUI ͷίʔυʹ໰୊͕͋Δ͔આ໌Ͱ͖·͔͢ʁ
37. ࠨଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ _ConditionalContent ʹΑΓɺtrue ͱ false ͷ࣌Ͱɺ 2ͭͷผʑͷܕͱͯ͠ѻ͍ɺҟͳΔ Identity ͷ ExampleView ͱղऍ Toggle ͢Δ͝ͱʹɺ࠶ϨϯμϦϯά͞Εɺ View ͷঢ়ଶ͸ഁغ͞ΕΔ
38. ʢࢀߟʣ_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 Λ։͘͜ͱͰ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ 👀
39. ӈଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ @ViewBuilder ͕ద༻͞Εͣɺ_ConditionalContent Λճආͯ͠ɺ AnyView ͱͳΓɺܕͱ֊૚಺ͷҐஔʹج͍ͮͯɺ View ΛಉҰͷ Identity ͱͯ͠؅ཧ͍ͯ͠Δ Toggle ͯ͠΋ɺ࠶ϨϯμϦϯά͞Εͣɺ View ͷঢ়ଶ͸อ࣋͞ΕΔ
40. SwiftUI ͷίʔυΛࡾ߲ԋࢉࢠΛར༻ͯ͠هड़ 1. AnyView → ExampleView ʹͳΓܕ΋໌֬ʹͳΔ 2. Structural Identityʢߏ଄తΞΠσϯςΟςΟʣ ͕ શͯॲཧΛ୲͏ঢ়ଶʹͳΔ ࡾ߲ԋࢉࢠΛར༻ͯ͠هड़͢Δ
41. ҎԼͷ಺༰͸ཧղͰ͖ͨͰ͠ΐ͏͔ʁ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ
42. ଞʹ΋༷ʑͳ৘ใ͕ܝࡌ͞Ε͍ͯΔͷͰɺಡΜͰΈ͍ͯͩ͘͞
43. Thank You For Listening