ふりかえり “Demystify SwiftUI”

Mobile勉強会 Wantedly × チームラボ #7 https://wantedly.connpass.com/event/266081/ で発表しました。

Transcript

1. ©2022 Wantedly, Inc.
   ;Γ͔͑Γ
   

   l%FNZTUJGZ4XJGU6*z
   .PCJMFษڧձ
   Shota Kashihara @kashihararara
   

   View Slide

2. ©2022 Wantedly, Inc.
   ࠓ೔࿩͢͜ͱ
   4XJGU6*Λཧղ͢ΔͨΊͷཁૉ
   w छྨͷ*EFOUJUZ
   w -JGFUJNF
   w %FQFOEFODJFT
   

   View Slide

3. ©2022 Wantedly, Inc.
   .lineLimit(2)
   
   
   .lineLimit(2)
   
   
   4XJGU6*ͰͲ͏ॻ͔͘
   

   View Slide

4. ©2022 Wantedly, Inc.
   // ॻ͖ํͦͷ2
   
   
   var body: some View {
   
   
   if isTruncated {
   
   
   Text(messageBody)
   
   
   .lineLimit(2)
   
   
   } else {
   
   
   Text(messageBody)
   
   
   }
   
   
   }
   // ॻ͖ํͦͷ1
   
   
   var body: some View {
   
   
   Text(messageBody)
   
   
   .lineLimit(isTruncated ? 2 : nil)
   
   
   }
   4XJGU6*ͰͲ͏ॻ͔͘
   🤔
   Ұॹ͡Όͳ͍ͷ
   

   View Slide

5. ©2022 Wantedly, Inc.
   *EFOUJUZ
   

   View Slide

6. ©2022 Wantedly, Inc.
   *EFOUJUZ
   7JFX
   *EFOUJUZͱ͸
   w 6*ཁૉͷಉҰੑΛ୲อ͢ΔͨΊͷ࢓૊Έ
   w ஋ͷมߋͳͲʹ൐͏7JFXͷߋ৽αΠΫϧʹލͬͯ6*ͷৼΔ෣͍Λܾఆ͢
   ΔͨΊʹར༻͞ΕΔ
   $PVOUFS DPVOU
   $PVOUFS DPVOU
   $PVOUFS DPVOU
   
   PO"QQFBS PO%JTBQQFBS
   $PVOUFS DPVOU
   
   

   View Slide

7. ©2022 Wantedly, Inc.
   *EFOUJUZ
   $PVOUFS DPVOU
   $PVOUFS DPVOU
   $PVOUFS DPVOU
   
   PO"QQFBS PO%JTBQQFBS
   $PVOUFS DPVOU
   
   w !4UBUFͳͲͷ7JFXWBMVFͷมߋ͸7JFXͷMJGFUJNFʹ͸Өڹ͠ͳ͍
   w *EFOUJUZͷੜଘظ͕ؒMJGFUJNFʹӨڹ͢Δ
   w 4UBUF͸MJGFUJNFΛލ͙ͱॳظԽ͢Δ
   

   View Slide

8. ϖʔδλΠτϧ ϖʔδαϒλΠτϧ
   ©2022 Wantedly, Inc.
   ٙ໰*EFOUJUZ͸Ͳ͏΍ܾͬͯ·Δͷ
   

   View Slide

9. ©2022 Wantedly, Inc.
   *EFOUJUZ
   छྨͷ*EFOUJUZ
   w &YQMJDJUJEFOUJUZ
   w 4USVDUVSBMJEFOUJUZ
   

   View Slide

10. ©2022 Wantedly, Inc.
    &YQMJDJU*EFOUJUZ
    struct Dog {
    
    
    let dogTagId: String
    
    
    let name: String
    
    
    let symbol: String
    
    
    }
    
    
    struct DogList: View {
    
    
    var dogs: [Dog]
    
    
    var body: some View {
    
    
    List {
    
    
    ForEach(dogs, id: \.dogTagId) { dog in
    
    
    DogProfileView(dog)
    
    
    }
    
    
    }
    
    
    }
    
    
    }
    w *EFOUJUZΛAJEAύϥϝʔλͰ
    ໌ࣔత &YQMJDJU
    ʹࢦఆ͢Δύλʔϯ
    w *%ʹඞཁͳੑ࣭
    w ʮ͋Δ೚ҙͷظؒͱൣғͷதͰҰҙʯ
    w ৗʹҰҙ66*%
    w %#ςʔϒϧͷதͰҰҙ6OJRVF,FZ
    w ίϨΫγϣϯͷதͰҰҙ*OEFY
    w FUD
    w σϕϩούʔ͕*%Λ໌ࣔతʹࢦఆ
    ͢Δඞཁ͕͋Δ
    &YQMJDJU*EFOUJUZ
    

    View Slide

11. ©2022 Wantedly, Inc.
    &YQMJDJU*EFOUJUZ
    struct Dog {
    
    
    let dogTagId: String
    
    
    let name: String
    
    
    let symbol: String
    
    
    }
    
    
    struct DogList: View {
    
    
    var dogs: [Dog]
    
    
    var body: some View {
    
    
    List {
    
    
    ForEach(dogs, id: \.dogTagId) { dog in
    
    
    DogProfileView(dog)
    
    
    }
    
    
    }
    
    
    }
    
    
    }
    w *EFOUJUZΛAJEAύϥϝʔλͰ
    ໌ࣔత &YQMJDJU
    ʹࢦఆ͢Δύλʔϯ
    w *%ʹඞཁͳੑ࣭
    w ʮ͋Δ೚ҙͷظؒͱൣғͷதͰҰҙʯ
    w ৗʹҰҙ66*%
    w %#ςʔϒϧͷதͰҰҙ6OJRVF,FZ
    w ίϨΫγϣϯͷதͰҰҙ*OEFY
    w FUD
    w σϕϩούʔ͕*%Λ໌ࣔతʹࢦఆ
    ͢Δඞཁ͕͋Δ
    &YQMJDJU*EFOUJUZ
    

    View Slide

12. ©2022 Wantedly, Inc.
    *EFOUJUZ
    छྨͷ*EFOUJUZ
    w &YQMJDJUJEFOUJUZ
    w *EFOUJUZΛAJEAύϥϝʔλͰ໌ࣔత &YQMJDJU
    ʹࢦఆ͢Δύλʔϯ
    w σϕϩούʔ͕*%Λ໌ࣔతʹࢦఆ͢Δඞཁ͕͋Δ
    w 4USVDUVSBMJEFOUJUZ
    

    View Slide

13. ©2022 Wantedly, Inc.
    4USVDUVSBM*EFOUJUZ
    let view: some View = Group {
    
    
    if isGood {
    
    
    Text("Good")
    
    
    } else {
    
    
    Text(“Bad")
    
    
    }
    
    
    }
    
    
    print(type(of: view)) // Group<_ConditionalContent>
    
    
    w ීஈ͸ATPNFAΩʔϫʔυʹΑͬͯӅṭ͞Ε͍ͯͯҙࣝ͢Δ͜ͱ͸ͳ͍͕ɺ
    ίϯύΠϧ࣌ʹ͸4XJGU6*ͷ7JFX͸ͭͷܕ৘ใʹม׵͞ΕΔɻ
    w AJGA ATXJUDIAΩʔϫʔυͳͲ΋!7JFX#VJMEFSʹΑͬͯ@$POEJUJPOBM$POUFOUͱ͍ͬͨ
    ۩ମతͳ୯Ұͷܕͱͯ͠ѻΘΕΔɻ
    

    View Slide

14. ©2022 Wantedly, Inc.
    4USVDUVSBM*EFOUJUZ
    w ීஈ͸ATPNFAΩʔϫʔυʹΑͬͯӅṭ͞Ε͍ͯͯҙࣝ͢Δ͜ͱ͸ͳ͍͕ɺ
    ίϯύΠϧ࣌ʹ͸4XJGU6*ͷ7JFX͸ͭͷܕ৘ใʹม׵͞ΕΔɻ
    w AJGA ATXJUDIAΩʔϫʔυͳͲ΋!7JFX#VJMEFSʹΑͬͯ@$POEJUJPOBM$POUFOUͱ͍ͬͨ
    ۩ମతͳ୯Ұͷܕͱͯ͠ѻΘΕΔɻ
    let view = Group {
    
    
    if isGood {
    
    
    Text("Good")
    
    
    } else {
    
    
    Text("Bad")
    
    
    }
    
    
    }
    Group<
    
    
    _ConditionalContent<
    
    
    Text,
    
    
    Text
    
    
    >
    
    
    >
    

    View Slide

15. ©2022 Wantedly, Inc.
    4USVDUVSBM*EFOUJUZ
    let view = Group {
    
    
    if isGood {
    
    
    Text("Good")
    
    
    } else {
    
    
    Text("Bad")
    
    
    }
    
    
    }
    w 4USVDUVSBM*EFOUJUZ͸ܕߏ଄ʹରͯ͠҉໧తͰ҆ఆͨ͠*%ΛׂΓ౰ͯΔ
    w 4XJGU6*͸AJGAεςʔτϝϯτͷ֤ϒϥϯν͸ͦΕͧΕผͷ*%Λ࣋ͭ
    ҟͳΔϏϡʔͱͯ͠ೝࣝ͢Δ
    EEBBCEFEEEFBFDFG
    CBCFCGDGCGGEDDE
    

    View Slide

16. ©2022 Wantedly, Inc.
    // ॻ͖ํͦͷ2
    
    
    var body: some View {
    
    
    if isTruncated {
    
    
    Text(messageBody)
    
    
    .lineLimit(2)
    
    
    } else {
    
    
    Text(messageBody)
    
    
    }
    
    
    }
    // ॻ͖ํͦͷ1
    
    
    var body: some View {
    
    
    Text(messageBody)
    
    
    .lineLimit(isTruncated ? 2 : nil)
    
    
    }
    ࠶ܝ4XJGU6*ͰͲ͏ॻ͔͘
    🤔
    
    

    View Slide

17. ©2022 Wantedly, Inc.
    // ॻ͖ํͦͷ2
    
    
    var body: some View {
    
    
    if isTruncated {
    
    
    Text(messageBody)
    
    
    .lineLimit(2)
    
    
    } else {
    
    
    Text(messageBody)
    
    
    }
    
    
    }
    // ॻ͖ํͦͷ1
    
    
    var body: some View {
    
    
    Text(messageBody)
    
    
    .lineLimit(isTruncated ? 2 : nil)
    
    
    }
    ࠶ܝ4XJGU6*ͰͲ͏ॻ͔͘
    🤔
    *%͕ҧ͏ͱͲ͏ͳΔͷ
    Fʜ
    EEBBCʜ
    CBʜ
    *%͸ͭ
    *%͸ͭ
    

    View Slide

18. ©2022 Wantedly, Inc.
    -JGFUJNF
    

    View Slide

19. ©2022 Wantedly, Inc.
    -JGFUJNF
    7JFXͷ-JGFUJNF͸*EFOUJUZͷ༗ޮظؒͱಉ͡
    w *EFOUJUZׂ͕Γ౰ͯΒΕΔͱϏϡʔ͕ੜ੒͞ΕΔ
    w *EFOUJUZͷׂΓ౰͕ͯղআ͞ΕΔͱϏϡʔ͸ഁغ͞ΕΔ
    w Ϗϡʔ͕ଘࡏ͢Δؒ͸@State, @StateObjectͱ͍ͬͨετϨʔδʹ஋Λอ࣋
    ͠ɺ஋͕มߋ͞ΕΔͱґଘؔ܎ʹΑΓϏϡʔΛߋ৽͢Δ
    $PVOUFS DPVOU
    $PVOUFS DPVOU
    $PVOUFS DPVOU
    
    PO"QQFBS PO%JTBQQFBS
    $PVOUFS DPVOU
    
    

    View Slide

20. ©2022 Wantedly, Inc.
    dayTime = true
    lz lz lz
    var body: some View {
    
    
    if dayTime {
    
    
    Counter()
    
    
    } else {
    
    
    Counter()
    
    
    .nightTimeStyle()
    
    
    }
    
    
    }
    
    
    lz
    PO%JTBQQFBS
    PO"QQFBS
    7JFXͷ-JGFUJNF͸*EFOUJUZͷ༗ޮظؒͱಉ͡
    -JGFUJNF
    

    View Slide

21. ©2022 Wantedly, Inc.
    ։࢝࣌
    w !4UBUF !4UBUF0CKFDUͷΦϯϝϞϦετϨʔδׂΓ౰ͯ ॳظԽ
    
    w PO"QQFBS\^ݺͼग़͠
    ऴྃ࣌
    w !4UBUF !4UBUF0CKFDUͷΦϯϝϞϦετϨʔδഁغ
    w PO%JTBQQFBS\^ݺͼग़͠
    ˠঢ়ଶ 4UBUF
    Λίϯτϩʔϧ͍ͨ͠৔߹͸-JGFUJNFΛҙࣝ͢Δඞཁ͕͋Δ
    -JGFUJNFʹ܎ΔΠϕϯτ
    

    View Slide

22. ©2022 Wantedly, Inc.
    %FQFOEFODZHSBQI
    %FQFOEFODZ
    var body: some View {
    
    
    if isTruncated {
    
    
    Text(messageBody)
    
    
    .lineLimit(2)
    
    
    } else {
    
    
    Text(messageBody)
    
    
    }
    
    
    }
    

    View Slide

23. ©2022 Wantedly, Inc.
    var body: some View {
    
    
    Text(messageBody)
    
    
    .lineLimit( isTruncated ? 2 : nil )
    
    
    }
    %FQFOEFODZHSBQI
    %FQFOEFODZ
    *OFSUNPEJ
    fi
    FS
    .modifier(σϑΥϧτ஋) ͷΑ͏ͳඳըʹӨڹΛ༩͑ͳ͍
    
    
    Modifier ͷ͜ͱΛ Inert modifier ͱݺͿ
    
    
    

    View Slide

24. ©2022 Wantedly, Inc.
    %FQFOEFODZ
    %FQFOEFODZΛҙࣝ͢Δ
    w ύϑΥʔϚϯε΁ͷد༩
    w %FQFOEFODZ͕มߋ͞ΕΔͱґଘ͢Δ7JFX͕࠶ධՁ͞ΕΔ
    w %FQFOEFODZͷείʔϓΛڱΊΔ͜ͱͰ4XJGU6*͕ґଘάϥϑΛޮ཰తʹ
    ॲཧͰ͖Δ
    w Ξχϝʔγϣϯ΁ͷد༩
    w 4XJGU6*͸ಉҰ*%ͷϏϡʔͷඳըͷมߋΛɺࣗಈͰΞχϝʔγϣϯΛิ׬
    ͯ͘͠ΕΔ XJUI"OJNBUJPO @ @
    
    
    w ҧ࿨ײͷ͋ΔΞχϝʔγϣϯΛݟ͚ͭͨΒ·ͣ*EFOUJUZͷಉҰੑΛٙ͏
    

    View Slide

25. ©2022 Wantedly, Inc.
    // ॻ͖ํͦͷ2
    
    
    var body: some View {
    
    
    if isTruncated {
    
    
    Text(messageBody)
    
    
    .lineLimit(2)
    
    
    } else {
    
    
    Text(messageBody)
    
    
    }
    
    
    }
    // ॻ͖ํͦͷ1
    
    
    var body: some View {
    
    
    Text(messageBody)
    
    
    .lineLimit(isTruncated ? 2 : nil)
    
    
    }
    ·ͱΊ
    ্ͷॻ͖ํΛ"QQMF͕ਪ঑͍ͯ͠Δ
    *EFOUJUZΛҡ࣋͢Δ͜ͱʹΑΔ
    
    ɾύϑΥʔϚϯε΁ͷد༩
    ɾΞχϝʔγϣϯ΁ͷد༩
    

    View Slide

26. ©2022 Wantedly, Inc.
    ࢀߟ
    https://developer.apple.com/videos/play/wwdc2021/10022/
    

    View Slide