2025.01.17_Sansan × DMM.swift

by RioFujimon

Slide 1

Slide 1 text

Pro SwiftUI ΛಡΜͰಘΒΕͨ஌ࣝ Sansan × DMM.swift 2025 / 01 / 17 ౻໳ ᣦੜ ʙ SwiftUI ͷಈ࡞ݪཧΛཧղ͢Δ ʙ

Slide 2

Slide 2 text

ࣗݾ঺հ • ౻໳ᣦੜʢRio Fujimonʣ • Sansanגࣜձࣾ Eight Engineering Unit Mobile Application άϧʔϓ • ৽ଔ 2 ೥໨ • Eight iOS ΞϓϦͷ։ൃΛ୲౰ • XʢTwitterʣ ͸ͪ͜Β

Slide 3

Slide 3 text

SwiftUI Λཧղͯ͠࢖͑ͯ·͔͢ʁ

Slide 4

Slide 4 text

ࣗ෼͕ॻ͍ͨ SwiftUI ίʔυͷ ಈ࡞ݪཧΛઆ໌Ͱ͖·͔͢ʁ

Slide 5

Slide 5 text

SwiftUI ͷίʔυಈ͍͔ͨΒྑ͠ 🙆 ʹͳͬͯ·ͤΜ͔ʁ

Slide 6

Slide 6 text

😨 ແཧ͔΋ͱ ࢥͬͨਓ΋͍ΔͷͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ

Slide 7

Slide 7 text

ͦΜͳਓ΁ͷୈҰา

Slide 8

Slide 8 text

ࠓ೔͓࿩͢͠Δ͜ͱ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ

Slide 9

Slide 9 text

SwiftUI ͷϨΠΞ΢τϓϩηε

Slide 10

Slide 10 text

SwiftUI ͷϨΠΞ΢τϓϩηε 1. Parent View ͕ Child View ʹαΠζΛఏҊ͢Δɻ 2. Child View ͸ɺParent View ͷఏҊ৘ใʹج͍ͮͯɺ αΠζΛબ୒͠ɺParent View ͸બ୒Λଚॏ͢Δɻ 3. Parent View ͸ɺChild View Λ࠲ඪۭؒ಺ʹ഑ஔ͢Δɻ 💡ॏཁʢઈରཧղʣ

Slide 11

Slide 11 text

Parent View ͱ Child Viewͷؔ܎

Slide 12

Slide 12 text

ᶃ Parent View ͱ Child Viewͷؔ܎Λճ౴Ͱ͖Δʁ

Slide 13

Slide 13 text

ᶃ Parent View ͱ Child Viewͷؔ܎ Parent View Child View

Slide 14

Slide 14 text

ᶄ Parent View ͱ Child Viewͷؔ܎Λճ౴Ͱ͖Δʁ

Slide 15

Slide 15 text

Parent View ͱ Child Viewͷؔ܎ Parent View Child View ্هͷཧղ͚ͩͩͱɺෆे෼ 🙅

Slide 16

Slide 16 text

Parent View ͱ Child Viewͷؔ܎ Parent View Child View .frame() ͷద༻ʹΑΓ Text Λϥοϓ͢Δ View Λੜ੒

Slide 17

Slide 17 text

Parent View ͱ Child Viewͷؔ܎Λग़ྗ

Slide 18

Slide 18 text

Parent View ͱ Child Viewͷؔ܎Λग़ྗ݁Ռ .frame() ͷద༻ʹΑΓɺModi f iedContent ͕ੜ੒͞ΕΔ 💡ॏཁʢઈରཧղʣ ݩͷ View Λ܁Γฦ͠มߋ͍ͯ͠ΔΘ͚Ͱ͸ͳ͘ɺ ݩͷViewΛมߋ͢Δ৽͍͠ View Λద༻͍ͯ͠Δ

Slide 19

Slide 19 text

ʢࢀߟʣModi f iedContent ͷఆٛ

Slide 20

Slide 20 text

.modi f ier() ͷద༻Ͱى͖͍ͯΔ͜ͱ .modi f ier() ͷద༻ = Modi f iedContentΛੜ੒

Slide 21

Slide 21 text

View Size ͷमਖ਼

Slide 22

Slide 22 text

. f ixedSize() ͕ͲͷΑ͏ʹαΠζΛमਖ਼͍ͯ͠Δͷ͔આ໌Ͱ͖·͔͢ʁ . f ixedSize() Λద༻

Slide 23

Slide 23 text

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ߦʹऩΊΔͨΊʹదͨ͠ཧ૝తͳ෯ͱߴ͞ʣ 💡ॏཁʢઈରཧղʣ

Slide 24

Slide 24 text

. f ixedSize() ͷ಺෦తͳಈ࡞ 30 × 100 30 × 100 Ideal Sizeɿ95 × 20 Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ Text ͷ Ideal Size

Slide 25

Slide 25 text

. f ixedSize() . f ixedSize() Λద༻ 💡. f ixedSize() ɿཧ૝αΠζΛݻఆαΠζʹঢ֨ͤ͞Δ

Slide 26

Slide 26 text

. f ixedSize() ͷ Image ΁ͷద༻ ը໘෯ʹऩ·Βͳ͍ը૾ 300 × 100 ը૾ ͷ Ideal Size 300 × 100 Ideal Size ΋͘͠͸ Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ

Slide 27

Slide 27 text

View ͷϨΠΞ΢τதཱੑ

Slide 28

Slide 28 text

Color.red ͷαΠζܾఆͷ࢓૊ΈΛઆ໌Ͱ͖·͔͢ʁ .background(.red) ͱͯ͠ Color.red Λར༻

Slide 29

Slide 29 text

View ͷϨΠΞ΢τதཱੑ ଞͷϏϡʔ΍ίϯςφͱͷ૊Έ߹ΘͤʹΑͬͯॊೈʹࣗ෼ͷαΠζΛదԠͤ͞Δಛੑ ϨΠΞ΢τதཱੑ͸ɺҎԼͷ 6 ͭͷ࣍ݩ ͕Өڹ͢Δ 1. Minimum Width 2. Minimum Height 3. Maximum Width 4. Maximum Height 5. Ideal Width 6. Ideal Height

Slide 30

Slide 30 text

Color.red ͷαΠζܾఆͷ࢓૊Έ ᶃ Parent View ͷαΠζΛड͚ೖΕΔ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

View Identity ͷཧղ

Slide 33

Slide 33 text

View Identity View ΛҰҙʹࣝผ͠ɺ View ͷঢ়ଶ΍දࣔ಺༰Λ؅ཧ͢ΔͨΊʹར༻͞ΕΔ 1. Explicit Identityʢ໌ࣔతͳΞΠσϯςΟςΟʣ • ಛఆͷ View ʹରͯ͠ɺ.id() Λར༻ͯ͠໌ࣔతͳ Identity Λࢦఆ • ಈతͳσʔλΛѻ͏৔߹ʢ഑ྻͷ܁Γฦ͠ॲཧʣ • ಛఆͷ View Λࢀর͢Δඞཁ͕͋Δ৔߹ʢಛఆͷҐஔ΁ͷεΫϩʔϧॲཧʣ 2. Structural Identityʢߏ଄తͳΞΠσϯςΟςΟʣ • ίʔυ಺Ͱͷ഑ஔ΍ߏ଄ʹج͍ͮͯɺࣗಈతʹੜ੒͞Εͨ Identity

Slide 34

Slide 34 text

View Identity ʹؔ࿈ͨ͠ SwiftUI ͷޡղ View ֊૚ʹมߋΛՃ͑Δͱɺ View πϦʔͷࠩ෼ൺֱΛߦ͍ɺԿ͕มߋ͞Ε͔ͨΛ൑அ͢Δ ※ View πϦʔͷࠩ෼ൺֱɿ௥Ճ΍࡟আ͞ΕͨཁૉΛಛఆ͢Δϓϩηε 🙅 🙆 SwiftUI ͸ɺIdentity Λجʹ View Λࣝผ͠ɺঢ়ଶ΍มߋΛޮ཰తʹ؅ཧ͢Δ View ͷ Identity Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ɺద੾ͳߋ৽ͱ࠶ඳըͷ伴 Swift ͷίϯύΠϥ͸ɺView ͷίʔυΛߏங͢ΔࡍʹҎԼͷ৘ใΛશͯ೺Ѳ ʢSubView, modi f ier, ৚݅จ, ܁Γฦ͠ॲཧʣ

Slide 35

Slide 35 text

View Identity ͱ View ͷ Life Cycle • View Identify ͸ɺView ͷ Life Cycle Λܾఆ • View Identity ͕ߏ଄త·ͨ͸໌ࣔతʹมߋ͞ΕΔͱɺͦͷ View ͸ഁغ͞ΕΔ • View Identity ؅ཧ͸ɺView ͷঢ়ଶҡ࣋΍ޮ཰తͳ࠶ඳըʹ௚݁͢Δ

Slide 36

Slide 36 text

ࠨӈͲͪΒͷ SwiftUI ͷίʔυʹ໰୊͕͋Δ͔આ໌Ͱ͖·͔͢ʁ

Slide 37

Slide 37 text

ࠨଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ _ConditionalContent ʹΑΓɺtrue ͱ false ͷ࣌Ͱɺ 2ͭͷผʑͷܕͱͯ͠ѻ͍ɺҟͳΔ Identity ͷ ExampleView ͱղऍ Toggle ͢Δ͝ͱʹɺ࠶ϨϯμϦϯά͞Εɺ View ͷঢ়ଶ͸ഁغ͞ΕΔ

Slide 38

Slide 38 text

ʢࢀߟʣ_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 Λ։͘͜ͱͰ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ 👀

Slide 39

Slide 39 text

ӈଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ @ViewBuilder ͕ద༻͞Εͣɺ_ConditionalContent Λճආͯ͠ɺ AnyView ͱͳΓɺܕͱ֊૚಺ͷҐஔʹج͍ͮͯɺ View ΛಉҰͷ Identity ͱͯ͠؅ཧ͍ͯ͠Δ Toggle ͯ͠΋ɺ࠶ϨϯμϦϯά͞Εͣɺ View ͷঢ়ଶ͸อ࣋͞ΕΔ

Slide 40

Slide 40 text

SwiftUI ͷίʔυΛࡾ߲ԋࢉࢠΛར༻ͯ͠هड़ 1. AnyView → ExampleView ʹͳΓܕ΋໌֬ʹͳΔ 2. Structural Identityʢߏ଄తΞΠσϯςΟςΟʣ ͕ શͯॲཧΛ୲͏ঢ়ଶʹͳΔ ࡾ߲ԋࢉࢠΛར༻ͯ͠هड़͢Δ

Slide 41

Slide 41 text

ҎԼͷ಺༰͸ཧղͰ͖ͨͰ͠ΐ͏͔ʁ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ