SwiftUIに最適のアーキテクチャ

1. SwiftUIʹ࠷దͷ ΞʔΩςΫνϟ Mike Apurin
3. SwiftUIʹ࠷దͷ ΞʔΩςΫνϟͱ͸ Կ͔ʁ
4. MVVM? – MV? – TCA? – MVC? – MVP? – VIPER? –
5. ͦͷલʹ
6. ۜͷ஄ؙ͸ͳ͍
7. ΞʔΩςΫνϟ͸Ҋ ݅ͷχʔζΛߟྀ͢ ΂͖
8. SwiftUIҎ֎ʹUIKit͸࢖ΘΕ͍ͯΔ͔ʁ – ΞʔΩςΫνϟ͕ղܾ͍ͯ͠Δ՝୊͸χʔζ ʹϚον͍ͯ͠Δ͔ – νʔϜϝϯόʔ͸͜ͷΞʔΩςΫνϟʹ׳Ε ͍ͯΔ͔ – etc –
9. ཧ૝ͱݱ࣮͸ဃ཭͠ ͍ͯΔ
10. UIKitͱSwiftUIͷޓ ׵ੑ
11. UIKitͱSwiftUIͷޓ׵ ੑ UINavigationController ͰUIHostingControllerΛ push͢ΔΞχϝʔγϣϯ͕όά Δ let vc = UIHostingController(rootView: SwiftUIScreen()) navigationController.show(vc, sender: nil)
12. SwiftUIͷதͰNavigationLinkΛ౿Ήͱൃੜ ͠ͳ͍ – Ҋ݅ͷ౎߹্ɺUINavigationControllerΛ ࢖͏͔͠ͳ͍ – ͨͩͦ͏͢Δͱɺ৽ΊͷNavigationStack͸ UINavigationControllerͱޓ׵ੑ͕ͳ͍͔ Β NavigationLink(value:) ͸࢖͑ͳ͍ –
13. ࠓߋݹ͍ NavigationLink(destination:) ͸࢖͍ ͨ͘ͳ͍ͷͰࣗલͰ NavigationLink(value:) Λ NavigationStack͕ͳͯ͘΋࢖͑ΔΑ͏ʹόοΫ ϙʔτ͍ͯ͠·͢ github.com/auramagi/Destinations
14. SwiftPMͷػೳ
16. Development AssetsΛѻ͏ػೳ͕ͳ͍ DebugϏϧυ΍ϓϨϏϡʔʹ࢖͏ը૾΍ ϑΝΠϧ ReleaseϏϧυ͔Βࣗಈతʹഉআ͞ΕΔ
17. ͍͔ͭ͘ϫʔΫΞϥ΢ϯυΛࢼ͍ͯ͠Δ Package.swiftͰ੾Γସ͑͢Δʢඇਪ঑ʣ – XcodeͷLaunch argumentͰPackage.swiftΛ੾Γସ͑Δ – ϏϧυϓϥάΠϯ – github.com/auramagi/ManageDevelopmentAssetsPlugin – खಈͰϑΥϧμΛೖΕସ͑Δ – github.com/auramagi/swiftui-first-sample –
18. ࢲ͕ٻΊ͍ͯΔ SwiftUIʹ࠷దͷ ΞʔΩςΫνϟ
19. ཁ݅ SwiftUI First – Xcode Previews͕ਏ͘ͳ͍ – Ϛϧν΢Πϯυ΢ + Ϛϧνεςʔτ͕Մೳ – UIKit, App Intents΋ߟ͑ΒΕ͍ͯΔ – ֎෦ϥΠϒϥϦͷґଘ͕ೱ͘ͳ͍ –
20. SwiftUI First SwiftUIͷঢ়ଶ؅ཧ͕࢖͑Δ – SwiftUIͷϥΠϑαΠΫϧͰ੒Γཱͬͯ ͍Δ – SwiftUIͰѻ͍΍͍͢ –
21. Previews͕ਏ͘ͳ͍ DI͕ͪΌΜͱ͍ͯ͠Δ – UIϨΠϠʔʹ͸ॏ͍ґଘΛஔ͔ͳ͍ – ϞοΫ͠΍͍͢ –
22. Ϛϧν΢Πϯυ΢Մೳ ෳ਺΢Πϯυ΢ͰͦΕͧΕϩάΠϯঢ়ଶ ͕ҧ͏ͷ͸ઃܭՄೳʁ –
23. UIKit, App Intents DI஫ೖͷ࢓ํ͸Ͳ͏ͳΔʁ – ઃܭͷॊೈੑ͕ඞཁ –
24. ֎෦ϥΠϒϥϦͷґଘ ֎෦ϥΠϒϥϦΛத৺ʹΞϓϦΛઃܭͨ͠Β͍͍͔͕ ৻ॏʹݕ౼͠·͠ΐ͏ – ։ൃࢭ·ͬͯόά͕ग़ͨΒͲ͏͢Δʁ – ണ͕͢ͱ͖ʹͲΕ͚ͩେมʁ – Apple͕৽͍͠APIΛग़ͨ͠Β࠾༻ʹ๦֐͠ͳ͍͔ʁ –
25. github.com/auramagi/ swiftui-first-sample
26. Naive MV struct ContentView: View { let api: APIClient @State var products: [Product] = [] var body: some View { ForEach(products) { product in Button("Buy \(product.name)") { Task { await api.execute( BuyProductsRequest(product) ) } } } .task { products = await api.execute( GetProductsRequest() ) } } }
27. Naive MV ີ݁߹ – ϓϨϏϡʔແཧ – Ϗϡʔ΋ϩδοΫ΋࠶࢖༻ੑ͕௿͍ – ґଘ஫ೖ͕ߟ͑ΒΕ͍ͯͳ͍ –
30. DI஫ೖ struct AppActions { struct Products { var buy: (Product) async -> Void var refresh: () async -> Void } } ActionsΛ੾Γ෼͚Δ –
31. DI஫ೖ struct AppState { final class Products: ObservableObject { @Published var products: [Product] = [] } } StateΛ੾Γ෼͚Δ –
32. struct ContentView: View { @ObservedObject var state: AppState.Products let actions: AppActions.Products var body: some View { ForEach(state.products) { product in Button("Buy \(product.name)") { Task { await actions.buy(product) } } } .task { await actions.refresh() } } }
33. ΠχγϟϥΠβͰActionsͱState͸஫ೖՄೳʹͨ͠ ͕ɺத਎ͷ࣮૷͸มΘΔͷ͕كͳͷͰຖճຖճࢦఆ͢Δ ͷ͸໘౗ EnvironmentͰґଘΛ఻ୡͤ͞Δ – State͸ @EnvironmentObject Ͱ – Actions͸ @Environment Ͱ –
34. StateͱActionsΛଋͶͯ Dependency ͱͯ͠ఆٛ struct AppState { final class Products: ObservableObject { ... } var products = Products() } struct AppActions { struct Products { ... } var products: Products } extension EnvrionmentValues { var appActions: AppActions { ... } } struct AppDependency { var state: AppState var actions: AppActions }
35. Dependency Λอ࣋͢ΔίϯςφΛ ఆٛ protocol AppContainer { var app: AppDependency { get set } } MockAppContainer ͱ LiveAppContainer Λ ४උ
36. struct ContentView: View { @EnvironmentObject var state: AppState.Products @Environment(\.appActions.products) let actions var body: some View { ForEach(state.products) { product in Button("Buy \(product.name)") { Task { await actions.buy(product) } } } .task { await actions.refresh() } } }
37. ஫ೖΛ͠΍͘͢͢Δ public protocol ViewInjectable { typealias Content = ViewDependencyModifier<Self>.Content associatedtype InjectedBody: View func inject(content: Content) -> InjectedBody } public struct ViewDependencyModifier<D: ViewInjectable>: ViewModifier { let dependency: D public func body(content: Content) -> some View { dependency.inject(content: content) } } extension View { public func dependency(_ dependency: some ViewInjectable) -> some View { modifier(ViewDependencyModifier(dependency: dependency)) } }
38. Service Λ࣮૷ final class ProductsService { let api: APIClient let state: AppState.Products func buy(product: Product) async { await api.execute( BuyProductsRequest(product) ) } func refresh() async { products = await api.execute( GetProductsRequest() ) } }
39. LiveAppContainer Ͱ઀ଓ final class LiveAppContainer: AppContainer { struct Configuration { ... } var app: AppDependency private let api: APIClient private let productsService: ProductsService init(configuration: Configuration) { self.app = .init() self.api = ... self.productsService = .init( api: api, state: app.state.products ) app.actions.products.buy = productsService.buy(product:) app.actions.products.refresh = productsService.refresh } }
40. Previews #Preview { ContentView() .mockContainer(.app) } #Preview { WithMockContainer(.app) { container in MainFlow(container: container) } } ( .mockContainer ͱ WithMockContainer ͷ࣮૷͸ׂѪ)
41. ίϯςφ͸FlowͰ౉͢ struct MainFlow<Container: AppContainer>: View { let container: Container var body: some View { ContentView() .dependency(container) } }
42. View – ͨͩͷUI෦඼ – Screen – ը໘શମΛදࣔ͢ΔUI෦඼ – Screen ಉ࢜Λ࡞੒͠ͳ͍ – Flow – DependencyContainer Λอ࣋ͯ͠஫ೖ͢Δ – Screen Λ࡞੒͢Δ – ભҠ –
43. AppͰίϯςφΛੜ੒ @main struct SampleApp: App { @State var container = LiveAppContainer( configuration: ... ) var body: some Scene { WindowGroup { MainFlow(container: container) .dependency(container) } } }
45. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠