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

Better use of SwiftUI

Better use of SwiftUI

TechFeed Experts Night#3 〜 モバイルアプリ開発特集 (#techfeed_experts_night)
https://techfeed.io/events/techfeed-experts-night-3
↑口頭で話している部分が多いのでYouTubeのアーカイブをぜひご覧ください

https://twitter.com/tanakasan2525

Tatsuya Tanaka

September 07, 2022
Tweet

More Decks by Tatsuya Tanaka

Other Decks in Programming

Transcript

  1. SwiftUIΛ্खʹ࢖͏
    Tatsuya Tanaka / ాத ୡ໵
    TechFeed Experts Night #3 (#techfeed_experts_night)

    View Slide

  2. ͨͳͨͭ / Tatsuya Tanaka
    • Ϡϑʔגࣜձࣾ / iOSΞϓϦࠇଳ


    • TechFeed Expert
    @tattn
    @tanakasan2525
    @tattn

    View Slide

  3. VTuberελΠϧͰWebձٞʹࢀՃͰ͖ΔΞϓϦެ։த

    View Slide

  4. SwiftUIͷྑ͍࢖͍ํ

    View Slide

  5. ηϚϯςΟοΫʹUIΛσβΠϯ͢Δ

    View Slide

  6. struct NoSematicLayoutView: View {


    var body: some View {


    VStack {


    Image("Avatar")


    .resizable()


    .scaledToFit()


    Text("Hello, world")


    .font(.system(size: 28))


    }


    .padding(16)


    .toolbar {


    ToolbarItem(placement: .navigationBarTrailing) {


    Button {


    // লུ


    } label: {


    Text("Done")


    .bold()


    }


    }


    ToolbarItem(placement: .navigationBarLeading) {


    Button("Cancel") {


    // লུ


    }


    }


    }


    }


    }
    ←ϑΥϯταΠζͷ۩ମతͳࢦఆ
    ←༨നαΠζͷ۩ମతͳࢦఆ
    ↑↓഑ஔͷ۩ମతͳࢦఆ

    View Slide

  7. struct NoSematicLayoutView: View {


    var body: some View {


    VStack {


    Image("Avatar")


    .resizable()


    .scaledToFit()


    Text("Hello, world")


    .font(.system(size: 28))


    }


    .padding(16)


    .toolbar {


    ToolbarItem(placement: .navigationBarTrailing) {


    Button {


    // লུ


    } label: {


    Text("Done")


    .bold()


    }


    }


    ToolbarItem(placement: .navigationBarLeading) {


    Button("Cancel") {


    // লུ


    }


    }


    }


    }


    }
    ←୺຤ͷจࣈαΠζΛେ͖ͯ͘͠΋൓ө͞Εͳ͘ͳΔ
    ͜ͷ഑ஔํ๏ͩͱwatchOSͰ͸࢖͑ͳ͍

    View Slide

  8. struct SematicLayoutView: View {


    var body: some View {


    VStack {


    Image("Avatar")


    .resizable()


    .scaledToFit()


    Text("Hello, world")


    .font(.title)


    }


    .padding()


    .toolbar {


    ToolbarItem(placement: .confirmationAction) {


    Button("Done") {


    // লུ


    }


    }


    ToolbarItem(placement: .cancellationAction) {


    Button("Cancel") {


    // লུ


    }


    }


    }


    }


    }
    ←ελΠϧͰͷࢦఆ
    ←σϑΥϧτ஋Ͱͷࢦఆ
    ↑↓Ϙλϯͷಈ࡞Ͱͷࢦఆ

    View Slide

  9. struct SematicLayoutView: View {


    var body: some View {


    VStack {


    Image("Avatar")


    .resizable()


    .scaledToFit()


    Text("Hello, world")


    .font(.title)


    }


    .padding()


    .toolbar {


    ToolbarItem(placement: .confirmationAction) {


    Button("Done") {


    // লུ


    }


    }


    ToolbarItem(placement: .cancellationAction) {


    Button("Cancel") {


    // লུ


    }


    }


    }


    }


    }
    ←ελΠϧͰͷࢦఆ
    ←σϑΥϧτ஋Ͱͷࢦఆ
    ↑↓Ϙλϯͷಈ࡞Ͱͷࢦఆ
    WatchΞϓϦͱͯ͠΋ϏϧυͰ͖Δ

    View Slide

  10. ηϚϯςΟοΫʹUIΛσβΠϯ͢Δ
    σβΠϯπʔϧͰࣗ༝ʹσβΠϯͨ͠΋ͷΛ

    ͦͷ··࣮૷ʹ൓ө͢Δํ਑͸SwiftUIͰ͸͓͢͢ΊͰ͖ͳ͍
    SwiftUI͸ϓϥοτϑΥʔϜ΍؀ڥʹ߹Θͤͯ


    ࠷దͳݟͨ໨Λఏڙ͢Δ

    View Slide

  11. ΄΅ڞ௨ͷίʔυ͕ͩ؀ڥʹΑͬͯݟͨ໨͕มΘΔ
    ↑iOS ↑iPadOS
    watchOS→
    ↑tvOS
    ↓macOS

    View Slide

  12. SwiftUIʹదͨ͠UIͰ࡞Δͷ͕͓͢͢Ί
    ؀ڥʹ߹Θͤͨ࠷దԽΛҙࣝͨ͠APIͳͷͰɺ


    ϒϥϯυΠϝʔδ΍࣮ݱ͍ͨ͠UXΛ࢒ͭͭ͠


    SwiftUIʹదԠͤ͞Δͷ͕͓͢͢Ί
    σβΠϯϨϏϡʔͳͲΛߦ͏৔߹ɺ


    SwiftUIͷਂ͍஌͕ࣝඞཁ

    View Slide

  13. σβΠϯϨϏϡʔͷ೉͠͞
    ɾSwiftUIͷΈͰ࣮ݱͰ͖Δͷ͔Ͳ͏͔


    ɾUIKit౳ͱͷ࿈ܞͰ࣮ݱͰ͖Δͷ͔


    ɹɾͦΕʹΑͬͯͲΕ͘Β͍޻਺͕૿͑Δ͔
    ΍ͬͯΈͳ͍ͱΘ͔Βͳ͍͜ͱ΋ଟ͍


    σβΠϯ֬ఆલʹXcode PreviewsΛ࢖ͬͯݕূ͢Δͷ͕େࣄ

    View Slide

  14. ಠࣗͷUIΛ࠾༻͍ͨ͠৔߹
    ※ಠࣗͷUI = SwiftUIͷίϯϙʔωϯτʹͳ͍΋ͷ

    View Slide

  15. ಠࣗUIΛ࡞ΔˠOSͷػೳʹࣗಈରԠ͞Εͳ͘ͳΔ
    SwiftUI͸༷ʑͳ؀ڥʹࣗಈͰରԠ͍ͯ͠Δ෼ɺ


    ಠࣗUIΛ࣮ݱ͢Δ৔߹ɺͦΕΒʹରԠ͢Δ͔ͷ൑அ͕ඞཁʹͳΔ
    ɾμʔΫϞʔυ


    ɾϚϧνϓϥοτϑΥʔϜ


    ɾԣը໘


    ɾAccessibility ͳͲ

    View Slide

  16. ·ͱΊ

    View Slide

  17. ·ͱΊ
    ɾηϚϯςΟοΫͳUIσβΠϯ͕େ੾


    ɾಠࣗUIΛ࠾༻͢Δͱ༷ʑͳOSͷศརػೳͷαϙʔτ΋ඞཁʹͳΔ


    ɾiOS 14Ҏ߱ͳΒSwiftUI͸े෼࢖͑Δ
    ՝୊͸͋Δ͚Ͳɺ্खʹ࢖͏ͱ։ൃ଎౓͕Ұؾʹ޲্ʂ


    ΨϯΨϯ࢖ͬͯ஌ݟΛͨΊ͍͖ͯ·͠ΐ͏ʂ

    View Slide