Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2025.01.17_Sansan × DMM.swift

Avatar for RioFujimon RioFujimon
January 17, 2025

2025.01.17_Sansan × DMM.swift

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

Avatar for RioFujimon

RioFujimon

January 17, 2025
Tweet

More Decks by RioFujimon

Other Decks in Programming

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. ࠓ೔͓࿩͢͠Δ͜ͱ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View

    ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ
  4. SwiftUI ͷϨΠΞ΢τϓϩηε 1. Parent View ͕ Child View ʹαΠζΛఏҊ͢Δɻ 2.

    Child View ͸ɺParent View ͷఏҊ৘ใʹج͍ͮͯɺ αΠζΛબ୒͠ɺParent View ͸બ୒Λଚॏ͢Δɻ 3. Parent View ͸ɺChild View Λ࠲ඪۭؒ಺ʹ഑ஔ͢Δɻ 💡ॏཁʢઈରཧղʣ
  5. Parent View ͱ Child Viewͷؔ܎ Parent View Child View .frame()

    ͷద༻ʹΑΓ Text Λϥοϓ͢Δ View Λੜ੒
  6. Parent View ͱ Child Viewͷؔ܎Λग़ྗ݁Ռ .frame() ͷద༻ʹΑΓɺModi f iedContent ͕ੜ੒͞ΕΔ

    💡ॏཁʢઈରཧղʣ ݩͷ View Λ܁Γฦ͠มߋ͍ͯ͠ΔΘ͚Ͱ͸ͳ͘ɺ ݩͷViewΛมߋ͢Δ৽͍͠ View Λద༻͍ͯ͠Δ
  7. 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ߦʹऩΊΔͨΊʹదͨ͠ཧ૝తͳ෯ͱߴ͞ʣ 💡ॏཁʢઈରཧղʣ
  8. . f ixedSize() ͷ಺෦తͳಈ࡞ 30 × 100 30 × 100

    Ideal Sizeɿ95 × 20 Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ Text ͷ Ideal Size
  9. . f ixedSize() . f ixedSize() Λద༻ 💡. f ixedSize()

    ɿཧ૝αΠζΛݻఆαΠζʹঢ֨ͤ͞Δ
  10. . f ixedSize() ͷ Image ΁ͷద༻ ը໘෯ʹऩ·Βͳ͍ը૾ 300 × 100

    ը૾ ͷ Ideal Size 300 × 100 Ideal Size ΋͘͠͸ Ideal Size ΑΓ΋ খ͍͞஋΋Մೳ
  11. 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
  12. View Identity View ΛҰҙʹࣝผ͠ɺ View ͷঢ়ଶ΍දࣔ಺༰Λ؅ཧ͢ΔͨΊʹར༻͞ΕΔ 1. Explicit Identityʢ໌ࣔతͳΞΠσϯςΟςΟʣ •

    ಛఆͷ View ʹରͯ͠ɺ.id() Λར༻ͯ͠໌ࣔతͳ Identity Λࢦఆ • ಈతͳσʔλΛѻ͏৔߹ʢ഑ྻͷ܁Γฦ͠ॲཧʣ • ಛఆͷ View Λࢀর͢Δඞཁ͕͋Δ৔߹ʢಛఆͷҐஔ΁ͷεΫϩʔϧॲཧʣ 2. Structural Identityʢߏ଄తͳΞΠσϯςΟςΟʣ • ίʔυ಺Ͱͷ഑ஔ΍ߏ଄ʹج͍ͮͯɺࣗಈతʹੜ੒͞Εͨ Identity
  13. View Identity ʹؔ࿈ͨ͠ SwiftUI ͷޡղ View ֊૚ʹมߋΛՃ͑Δͱɺ View πϦʔͷࠩ෼ൺֱΛߦ͍ɺԿ͕มߋ͞Ε͔ͨΛ൑அ͢Δ ※

    View πϦʔͷࠩ෼ൺֱɿ௥Ճ΍࡟আ͞ΕͨཁૉΛಛఆ͢Δϓϩηε 🙅 🙆 SwiftUI ͸ɺIdentity Λجʹ View Λࣝผ͠ɺঢ়ଶ΍มߋΛޮ཰తʹ؅ཧ͢Δ View ͷ Identity Λ໌ࣔతʹࢦఆ͢Δ͜ͱ͕ɺద੾ͳߋ৽ͱ࠶ඳըͷ伴 Swift ͷίϯύΠϥ͸ɺView ͷίʔυΛߏங͢ΔࡍʹҎԼͷ৘ใΛશͯ೺Ѳ ʢSubView, modi f ier, ৚݅จ, ܁Γฦ͠ॲཧʣ
  14. View Identity ͱ View ͷ Life Cycle • View Identify

    ͸ɺView ͷ Life Cycle Λܾఆ • View Identity ͕ߏ଄త·ͨ͸໌ࣔతʹมߋ͞ΕΔͱɺͦͷ View ͸ഁغ͞ΕΔ • View Identity ؅ཧ͸ɺView ͷঢ়ଶҡ࣋΍ޮ཰తͳ࠶ඳըʹ௚݁͢Δ
  15. ࠨଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ _ConditionalContent ʹΑΓɺtrue ͱ false ͷ࣌Ͱɺ

    2ͭͷผʑͷܕͱͯ͠ѻ͍ɺҟͳΔ Identity ͷ ExampleView ͱղऍ Toggle ͢Δ͝ͱʹɺ࠶ϨϯμϦϯά͞Εɺ View ͷঢ়ଶ͸ഁغ͞ΕΔ
  16. ӈଆͷ SwiftUI ͷίʔυͷ View ͷߏ଄Λग़ྗ݁Ռ @ViewBuilder ͕ద༻͞Εͣɺ_ConditionalContent Λճආͯ͠ɺ AnyView ͱͳΓɺܕͱ֊૚಺ͷҐஔʹج͍ͮͯɺ

    View ΛಉҰͷ Identity ͱͯ͠؅ཧ͍ͯ͠Δ Toggle ͯ͠΋ɺ࠶ϨϯμϦϯά͞Εͣɺ View ͷঢ়ଶ͸อ࣋͞ΕΔ
  17. ҎԼͷ಺༰͸ཧղͰ͖ͨͰ͠ΐ͏͔ʁ 1. SwiftUI ͷϨΠΞ΢τϓϩηε 2. Parent View ͱ Child View

    ͷؔ܎ 3. View Size ͷमਖ਼ 4. View ͷϨΠΞ΢τதཱੑ 5. View Identity ͷཧղ