@tatsubee pixivͷϦΞʔΩςΫνϟʹ͓͚Δ The Composable Architecter׆༻

tatsubee pixivࣄۀຊ෦ΞϓϦ෦ॴଐ • 23৽ଔ iOSΤϯδχΞ • ෱Ԭੜ·Ε෱Ԭҭͪ౦ژࡏॅ • ڵຯ • iOS • visionOS • Πϥετ • Flutter

pixivΞϓϦʹ͍ͭͯ • ΠϥετɾϚϯΨɾখઆͷ౤ߘ΍Ӿཡָ͕͠ΊΔ • ొ࿥Ϣʔβʔ਺1ԯਓҎ্ • iOS / Androidͱ΋ʹ഑৴தʂ

pixivΞϓϦʹ͍ͭͯ • 2009/12/09 ver. 1.0 ϦϦʔε🎉 • 2024/10/24 ver. 7.20.22 ഑৴தʂ

pixivΞϓϦʹ͍ͭͯ • 2009/12/09 ver. 1.0 ϦϦʔε🎉 • 2024/10/24 ver. 7.20.22 ഑৴தʂ

pixivΞϓϦʹ͍ͭͯ • UIKitϕʔε • ΞʔΩςΫνϟ: MVCʁ • 2000ϑΝΠϧҎ্

pixivΞϓϦʹ͍ͭͯ • UIKitϕʔε • ΞʔΩςΫνϟ: MVCʁ • 2000ϑΝΠϧҎ্ ϦΞʔΩςΫνϟਐߦதʂ

TCAͷಋೖ࢝Ί·ͨ͠

Index • ϦΞʔΩςΫνϟઌͱͯ͠ͷTCAͷબఆཧ༝ • TCA x UIKitͷجૅతͳ࢖͍ํ • TCA x UIKit x pixiv

TCAͷબఆཧ༝

The Composable Architecture(TCA)ͱ͸ʁ ReduxΛجௐͱͨ͠ঢ়ଶ؅ཧϑϨʔϜϫʔΫͰɺಛʹ࣍ͷ5ͭʹॏ఺Λ͓͍ ͯ։ൃ͞Ε͍ͯΔ • State Management • Composition • Side Effects • Testing • Ergonomics

TCAͷબఆཧ༝ • pixivͷঢ়گ • ϐΫγϒࣾ಺ͷঢ়گ

TCAͷબఆཧ༝ pixivͷঢ়گ • มߋʹऑ͍ • ݱࡏͷઃܭʹݶք͕͍͖ۙͮͯͨ

TCAͷબఆཧ༝ pixivͷঢ়گ • มߋʹऑ͍ • UIͱϩδοΫͷ੾Γ෼͚͕͋·Γͳ͞Ε͍ͯͳ͍ͨΊɺӨڹൣғ͕޿ ͕Γ΍͍͢ • Test΋ଟ͘͸ͳ͍ && ॻ͖΍͘͢ͳ͍

TCAͷબఆཧ༝ pixivͷঢ়گ • ݱࡏͷઃܭʹݶք͕͍͖ۙͮͯͨ • ϩδοΫ෦෼ʹ͔ͬͪΓͱͨ͠ઃܭ͸ଘࡏ͢Δ • ͕ɺ͜Ε͔Β΍Γ͍ͨ͜ͱʹ߹Θͳ͘ͳ͖ͬͯͨ • Ұൠతͳઃܭํ๏ͷมભ • ৽ػೳͷ࣮૷

TCAͷબఆཧ༝ ϐΫγϒࣾ಺ͷঢ়گ • PastelaνʔϜ͕ઌߦͯ͠TCAΛಋೖ͍ͯͨ͠ • tatsubee͕OJTͱͯ͠Pastelaͷ։ൃʹҰ࣌ظؔΘ͍ͬͯͨ • ݱࡏͷpixivΞϓϦνʔϜ಺Ͱ΋TCAΛ࢖ͬͨ͜ͱ͋Δਓ͕૿͑ͨ → ࣾ಺Ͱͷԣͷ࿈ܞ͕΍Γ΍ͦ͢͏ʂ

TCAͷબఆཧ༝ • pixivΞϓϦͷ΢ΟʔΫϙΠϯτΛิڧͰ͖Δ • ࣾ಺Ͱԣͷ࿈ܞ͕Մೳ • (tatsubeeͷ޷Έ)

TCA × UIKit

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:) • ObservationϑϨʔϜϫʔΫͷ࢓૊ΈΛ׆༻͠ɺobserve಺ͰΞΫηε͞ ΕΔϑΟʔϧυͷมߋΛࣗಈͰ௥੻͢Δ • PerceptionϥΠϒϥϦʹΑͬͯObservation͸όοΫϙʔτ͞Ε͍ͯΔ ͨΊɺiOS 13+Ͱ͋Ε͹࢖༻Մೳ

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ࢖͍ํ final class FeatureViewController: UIViewController { let store: StoreOf let label = UILabel() … override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } self.label.text = self.store.text } } }

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • observe಺ʹهड़͞ΕͨϑΟʔϧυͷ஋ʹมߋ͕͋ͬͨ࣌ɺobserve಺ ͷશͯͷॲཧ͕૸ͬͯ͠·͏

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ final class FeatureViewController: UIViewController { let titleLabel = UILabel() let counterLabel = UILabel() override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } self.titleLabel1.text = self.store.text1 self.counterLabel2.text = “\(self.store.count)” } } }

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ final class FeatureViewController: UIViewController { let titleLabel = UILabel() let counterLabel = UILabel() override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } self.titleLabel1.text = self.store.text1 } observe { [weak self] in guard let self else { return } self.counterLabel2.text = “\(self.store.count)” } } }

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • Task final class FeatureViewController: UIViewController { let label = UILabel() override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } Task { try? await Task.sleep() self.label.text = self.store.text } } } }

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • Task final class FeatureViewController: UIViewController { let label = UILabel() override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } Task { try? await Task.sleep() self.label.text = self.store.text } } } } มߋΛ௥੻Ͱ͖ͳ͍

ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • Task final class FeatureViewController: UIViewController { let label = UILabel() override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } let text = self.store.text Task { try? await Task.sleep() self.label.text = text } } } }

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation ͜ͷ࣌఺ͰReducerΛ࡞੒͠ɺ ঢ়ଶϕʔεͰUIΛૢ࡞Ͱ͖ΔΑ͏ʹͳͬͨ

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation }ͲΕ͚ͩTCAͷڧΈΛ࢖͏͔(࢖͑Δͷ͔ʁ)

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

υϝΠϯΛࡉ෼Խ͢Δ The Composable ArchitectureͷʮComposableʯͷ෦෼ͷ࿩ • େ͖͍Reducer͔Βখ͍͞ػೳΛࢠReducerͱͯ͠ʹ෼ׂ͠ɺ ͦΕΒΛCompose͢Δ͜ͱ͕Ͱ͖Δ

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared case rowTapped case rowLongTapped } var body: some ReducerOf { … } }

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared } var body: some ReducerOf { … } } @Reducer struct RowFeature: Reducer { @ObservableState struct State: Hashable, Identifiable { … } enum Action { case rowTapped case rowLongTapped } var body: some ReducerOf { … } }

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared } var body: some ReducerOf { … } }

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … var rows: IdentifiedArrayOf = [] } enum Action { case onAppeared case rows(IdentifiedActionOf) } var body: some ReducerOf { Reduce { state, action in … } } }

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … var rows: IdentifiedArrayOf = [] } enum Action { case onAppeared case rows(IdentifiedActionOf) } var body: some ReducerOf { Reduce { state, action in … } .forEach(\.rows, action: \.rows) { RowFeature() } } }

υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ struct ListView: View { let store: StoreOf = .init( initialState: ListFeature.State() ) { ListFeature() } var body: some View { ForEach(store.scope(state: \.rows, action: \.rows)) { RowView(store: $0) } } }

υϝΠϯΛࡉ෼Խ͢Δ ͜ΕΛUIKitͰ΋࢖͑Δͷ͔ʁ

υϝΠϯΛࡉ෼Խ͢Δ UIKitͰ࢖͍ಘΔύλʔϯ • UITableView • UICollectionView

υϝΠϯΛࡉ෼Խ͢Δ UIKitͰ࢖͍ಘΔύλʔϯ • UITableView final class ListViewController: UITableViewController { let store: StoreOf = .init(initialState: ListFeature.State()) { ListFeature() } override func viewDidLoad() { … } // MARK: UITableViewDataSource override func numberOfSections(in tableView: UITableView) override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell }

υϝΠϯΛࡉ෼Խ͢Δ UITableView final class ListViewController: UITableViewController { let store: StoreOf = .init(initialState: ListFeature.State()) { ListFeature() } var observations: [IndexPath: ObserveToken] = [:] override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { observations[indexPath]?.cancel() observations[indexPath] = observe { [weak self] in guard let self else { return } cell.textLabel?.text = "\(store.rows[indexPath.row].id)" } return cell } override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { let id = store.rows[indexPath.row].id if let store = store.scope(state: \.rows[id: id], action: \.rows[id: id]) { navigationController?.pushViewController(RowDetailViewController(store: store), animated: true) } } }

υϝΠϯΛࡉ෼Խ͢Δ • UIKitͰ΋υϝΠϯͷࡉ෼Խ͸Մೳʂ • SwiftUIͱൺֱ͢Δͱهड़ྔ͕૿͑ɺෳࡶʹͳΔ͔΋ • Reducerͷن໛ʹ΋ΑΔ͕ɺ ݸਓతʹ͸ࡉ෼Խͤͣʹ ViewController:Reducer = 1:1 Ͱ΋े෼ • ͱ͸͍͑TCAͷڧΈ͸͔ͬ͠Γ࢖͍͍ͨͷͰ΋͏ͪΐ͍୳ͬͯΈΔ • ΞυόΠε͋Ε͹͓ئ͍͠·͢ʂ

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

uikit-navigation Point-Freeͷఏএ͢Δɺstate-drivenͳը໘ભҠͷ2ͭΧςΰϦ • Tree-based navigation • Stack-based navigation

uikit-navigation Point-Freeͷఏএ͢Δɺstate-drivenͳը໘ભҠͷ2ͭΧςΰϦ • Tree-based navigation • present(item:content:) • present(isPresented:content:) • navigationDestination(item:content:) • Stack-based navigation • NavigationStackController

uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { let store: StoreOf override func viewDidLoad() { super.viewDidLoad() observe { … } } }

uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { @UIBindable var store: StoreOf override func viewDidLoad() { super.viewDidLoad() observe { … } } }

uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { @UIBindable var store: StoreOf override func viewDidLoad() { super.viewDidLoad() observe { … } present(item: $store.scope( state: \.child, action: \.child )) { store in ChildViewController(store: store) } } }

uikit-navigation ࢖͍ํ: Stack-based class AppController: NavigationStackController { private var store: StoreOf! convenience init(store: StoreOf) { @UIBindable var store = store self.init(path: $store.scope(state: \.path, action: \.path)) { ListViewController() } destination: { store in switch store.case { case let .detail(store): DetailViewController(store: store) case let .editItem(store): EditViewController(store: store) } } } }

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation

TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation pixivͰ͸·ͩ࢖͍͖Ε͍ͯ·ͤΜ😢 }

TCA × UIKit × pixiv • ⭕ • TCAͷಋೖ • ViewControllerͰঢ়ଶΛ؂ࢹ • swift-navigation(uikit-navigation)Λ׆༻ͨ͠state-drivenͳը໘ભҠ • ˚ • υϝΠϯͷࡉ෼Խ • swift-navigationͱTCAͷ౷߹

TCA × UIKit × pixiv • ࡉ෼Խɾswift-navigationͱTCAͷ౷߹͕·ͩͰ͖͍ͯͳ͍ཧ༝ • ࢼߦࡨޡதʂ • ը໘ભҠઌʹReducerΛಋೖͰ͖͍ͯͳ͍ • Tree-based͸ಛʹ໰୊ͳͦ͞͏ • swift-navigationͷΈͰstate-drivenͳը໘ભҠ͕࣮ݱͰ͖ΔͨΊ • Stack-basedΛ΍Γ͍ͨ৔߹ͩͱͪΐͬͱ೉͍͔͠΋ʁ • StackΛ؅ཧ͢Δ࢓૊ΈΛࣗ෼Ͱ࡞Βͳ͍ͱ͍͚ͳ͍ʁ

ײ૝

ײ૝ • ԣ࣠Ͱ஌ݟͷڞ༗Ͱ͖Δͷ͸ͱͯ΋خ͍͠ʂ • TCAͷڧΈΛશͯ࢖͍͜ͳ͍ͤͯΔΘ͚Ͱ͸ͳ͍͕ɺ͔ͳΓ։ൃମݧ͕ ྑ͘ͳͬͨ • ࢓༷͕Ӆṭ͞Εʹ͘͘ͳͬͨ • ঢ়ଶ == UIͰ͋ΔͨΊɺTest͕͔ͳΓॻ͖΍͘͢ͳͬͨ • (ͨͿΜ) ReducerͷܗΛյͣ͞ʹSwiftUIʹ΋ҠߦͰ͖Δ͸ͣ

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ