$30 off During Our Annual Pro Sale. View Details »

ふりかえり 
“Demystify SwiftUI”

ふりかえり 
“Demystify SwiftUI”

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

Shota Kashihara

December 02, 2022
Tweet

More Decks by Shota Kashihara

Other Decks in Programming

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*ͰͲ͏ॻ͔͘
    🤔
    *%͕ҧ͏ͱͲ͏ͳΔͷ

    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