SwiftUI Viewの責務分離

Transcript

1. 4XJGU6*
   7JFXͷ੹຿෼཭ .PCJMF
   "$5
   04","
    FMNFUBM
   
2. "CPVU
   NF  !FM@NFUBM@ J04
   "QQ
   %FWFMPQFS ڝഅ ରઓήʔϜ ҭࣇ ෳ਺νʔϜͷ
   ٕज़ࢧԉ
3. 4XJGU6*
   7JFX
   େ͖͘ͳΓ͕ͪ
4. ͨͩͷϦετ struct ContentView: View { @State var pokemons: [Pokemon] = [Pokemon(name: "Sprigatito"), Pokemon(name: "Fuecoco"), Pokemon(name: "Quaxly")] var body: some View { NavigationView { PokemonList(data: pokemons) .listStyle(.grid) } } }
5. αʔόʔ͔ΒσʔλΛGFUDI͢Δ struct ContentView: View { @State var pokemons: [Pokemon] = [] var body: some View { NavigationView { PokemonList(data: pokemons) .listStyle(.grid) .task { do { pokemons = try await PokeRepository.mock.fetch() } catch { // some errors } } } } }
6. σʔλ͕݅ͷέʔεΛ௥Ճ struct ContentView: View { @State var pokemons: [Pokemon] = [] var body: some View { NavigationView { if pokemons.isEmpty { Text("no pokemons") } else { PokemonList(data: pokemons) .listStyle(.grid) } } .task { do { pokemons = try await PokeRepository.mock.fetch() } catch { // some errors } } } }
7. ௨৴ΤϥʔͷέʔεΛ௥Ճ struct ContentView: View { @State var pokemons: [Pokemon] = [] @State var error: MyError? var body: some View { NavigationView { if let error { switch error { case .network: Text("network error") } } else if pokemons.isEmpty { Text("no pokemons") } else { PokemonList(data: pokemons) .listStyle(.grid) } } .task { do { pokemons = try await PokeRepository.mock.fetch() self.error = nil } catch { self.error = .network } } } }
8. ओཁ෦෼͕௥͍΍ΒΕ͍ͯ͘ struct ContentView: View { @State var pokemons: [Pokemon] = [] @State var error: MyError? var body: some View { NavigationView { if let error { switch error { case .network: Text("network error") } } else if pokemons.isEmpty { Text("no pokemons") } else { PokemonList(data: pokemons) .listStyle(.grid) } } .task { do { pokemons = try await PokeRepository.mock.fetch() self.error = nil } catch { self.error = .network } } } } ओཁ෦෼͸͜Ε͚ͩ
9. 7JFXͷ੹຿෼ׂ
10. ίʔφʔέʔεΛ෼཭ struct ContentView: View { @State var pokemons: [Pokemon] = [] @State var error: MyError? var body: some View { NavigationView { PokemonList(data: pokemons) .listStyle(.grid) .task { do { pokemons = try await PokeRepository.mock.fetch() self.error = nil } catch { self.error = .network } } .overlay { if let error { switch error { case .network: Text("network error") } } else if pokemons.isEmpty { Text("no pokemons") } } } } } ΤϥʔΛPWFSMBZϒϩοΫ΁
11. $POUFOU6OBWBJMBCMF7JFXΛར༻ struct ContentView: View { @State var pokemons: [Pokemon] = [] @State var error: MyError? var body: some View { NavigationView { PokemonList(data: pokemons) .listStyle(.grid) .task { do { pokemons = try await PokeRepository.mock.fetch() self.error = nil } catch { self.error = .network } } .overlay { if let error { switch error { case .network: ContentUnavailableView("network error", systemImage: "wifi.slash", description: Text("check your internet connection")) } } else if pokemons.isEmpty { ContentUnavailableView("no pokemons", systemImage: "circle") } } } } } ۭ഑ྻ ωοτϫʔΫΤϥʔ
12. ۭ഑ྻͷදࣔ͸ఆٛଆͰߦ͏ struct GridPokeListStyle: PokeListStyle { var columns = [GridItem(.adaptive(minimum: 80), spacing: 16)] func makeBody(configuration: PokeListConfiguration) -> some View { ScrollView { LazyVGrid(columns: columns, spacing: 16) { ForEach(configuration.pokemons, id: \.self) { pokemon in PokemonView(pokemon: pokemon) } } .padding([.horizontal], 16) } .overlay { if configuration.pokemons.isEmpty { ContentUnavailableView("no pokemons", systemImage: "circle") } } } }
13. ۭ഑ྻͷදࣔ͸ఆٛଆͰߦ͏ struct ContentView: View { @State var pokemons: [Pokemon] = [] @State var error: MyError? var body: some View { NavigationView { PokemonList(data: pokemons) .listStyle(.grid) .task { do { pokemons = try await PokeRepository.mock.fetch() self.error = nil } catch { self.error = .network } } .overlay { if let error { switch error { case .network: ContentUnavailableView("network error", systemImage: "wifi.slash", description: Text("check your internet connection")) } } } } } }
14. એ఻
15. 4XJGU6*
    7JFX
    $PEJOH
    (VJEFMJOFT https://github.com/cybozu/swiftui-view-coding-guidelines https://cybozu.github.io/swiftui-view-coding-guidelines/documentation/swiftuiviewcodingguidelines/ %PD$ (JU)VC
    3FQP
16. 2
    
    "
17. ͋Γ͕ͱ͏͍͟͝·ͨ͠