Better use of SwiftUI

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

https://twitter.com/tanakasan2525

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