pixivのリアーキテクチャにおける The Composable Architecter活用

現在、pixivのiOSアプリでは、The Composable Architecture (TCA) を用いたリアーキテクチャを進めています。TCAはSwiftUIとの組み合わせで使用されることが多い印象がありますが、UIKitでも問題なく活用できる上、最近ではUIKitに対するサポートも強化されています。

本発表では、UIKitを主に使用しているpixivアプリが、TCAを導入したことによって得られた恩恵や、UIKit×TCA実装の知見を紹介します！

Transcript

1. @tatsubee pixivͷϦΞʔΩςΫνϟʹ͓͚Δ The Composable Architecter׆༻
2. tatsubee pixivࣄۀຊ෦ΞϓϦ෦ॴଐ • 23৽ଔ iOSΤϯδχΞ • ෱Ԭੜ·Ε෱Ԭҭͪ౦ژࡏॅ • ڵຯ • iOS • visionOS • Πϥετ • Flutter
3. pixivΞϓϦʹ͍ͭͯ • ΠϥετɾϚϯΨɾখઆͷ౤ߘ΍Ӿཡָ͕͠ΊΔ • ొ࿥Ϣʔβʔ਺1ԯਓҎ্ • iOS / Androidͱ΋ʹ഑৴தʂ
4. pixivΞϓϦʹ͍ͭͯ • 2009/12/09 ver. 1.0 ϦϦʔε🎉 • 2024/10/24 ver. 7.20.22 ഑৴தʂ
5. pixivΞϓϦʹ͍ͭͯ • 2009/12/09 ver. 1.0 ϦϦʔε🎉 • 2024/10/24 ver. 7.20.22 ഑৴தʂ
6. pixivΞϓϦʹ͍ͭͯ • UIKitϕʔε • ΞʔΩςΫνϟ: MVCʁ • 2000ϑΝΠϧҎ্
7. pixivΞϓϦʹ͍ͭͯ • UIKitϕʔε • ΞʔΩςΫνϟ: MVCʁ • 2000ϑΝΠϧҎ্ ϦΞʔΩςΫνϟਐߦதʂ
8. TCAͷಋೖ࢝Ί·ͨ͠
9. Index • ϦΞʔΩςΫνϟઌͱͯ͠ͷTCAͷબఆཧ༝ • TCA x UIKitͷجૅతͳ࢖͍ํ • TCA x UIKit x pixiv
10. TCAͷબఆཧ༝
11. The Composable Architecture(TCA)ͱ͸ʁ ReduxΛجௐͱͨ͠ঢ়ଶ؅ཧϑϨʔϜϫʔΫͰɺಛʹ࣍ͷ5ͭʹॏ఺Λ͓͍ ͯ։ൃ͞Ε͍ͯΔ • State Management • Composition • Side Effects • Testing • Ergonomics
12. TCAͷબఆཧ༝ • pixivͷঢ়گ • ϐΫγϒࣾ಺ͷঢ়گ
13. TCAͷબఆཧ༝ pixivͷঢ়گ • มߋʹऑ͍ • ݱࡏͷઃܭʹݶք͕͍͖ۙͮͯͨ
14. TCAͷબఆཧ༝ pixivͷঢ়گ • มߋʹऑ͍ • UIͱϩδοΫͷ੾Γ෼͚͕͋·Γͳ͞Ε͍ͯͳ͍ͨΊɺӨڹൣғ͕޿ ͕Γ΍͍͢ • Test΋ଟ͘͸ͳ͍ && ॻ͖΍͘͢ͳ͍
15. TCAͷબఆཧ༝ pixivͷঢ়گ • ݱࡏͷઃܭʹݶք͕͍͖ۙͮͯͨ • ϩδοΫ෦෼ʹ͔ͬͪΓͱͨ͠ઃܭ͸ଘࡏ͢Δ • ͕ɺ͜Ε͔Β΍Γ͍ͨ͜ͱʹ߹Θͳ͘ͳ͖ͬͯͨ • Ұൠతͳઃܭํ๏ͷมભ • ৽ػೳͷ࣮૷
16. TCAͷબఆཧ༝ ϐΫγϒࣾ಺ͷঢ়گ • PastelaνʔϜ͕ઌߦͯ͠TCAΛಋೖ͍ͯͨ͠ • tatsubee͕OJTͱͯ͠Pastelaͷ։ൃʹҰ࣌ظؔΘ͍ͬͯͨ • ݱࡏͷpixivΞϓϦνʔϜ಺Ͱ΋TCAΛ࢖ͬͨ͜ͱ͋Δਓ͕૿͑ͨ → ࣾ಺Ͱͷԣͷ࿈ܞ͕΍Γ΍ͦ͢͏ʂ
17. TCAͷબఆཧ༝ • pixivΞϓϦͷ΢ΟʔΫϙΠϯτΛิڧͰ͖Δ • ࣾ಺Ͱԣͷ࿈ܞ͕Մೳ • (tatsubeeͷ޷Έ)
18. TCA × UIKit
19. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
20. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
21. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:) • ObservationϑϨʔϜϫʔΫͷ࢓૊ΈΛ׆༻͠ɺobserve಺ͰΞΫηε͞ ΕΔϑΟʔϧυͷมߋΛࣗಈͰ௥੻͢Δ • PerceptionϥΠϒϥϦʹΑͬͯObservation͸όοΫϙʔτ͞Ε͍ͯΔ ͨΊɺiOS 13+Ͱ͋Ε͹࢖༻Մೳ
22. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ࢖͍ํ final class FeatureViewController: UIViewController { let store: StoreOf<Feature> let label = UILabel() … override func viewDidLoad() { super.viewDidLoad() observe { [weak self] in guard let self else { return } self.label.text = self.store.text } } }
23. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task
24. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task
25. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • observe಺ʹهड़͞ΕͨϑΟʔϧυͷ஋ʹมߋ͕͋ͬͨ࣌ɺobserve಺ ͷશͯͷॲཧ͕૸ͬͯ͠·͏
26. 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)” } } }
27. 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)” } } }
28. ViewControllerͰঢ়ଶΛ؂ࢹ͢Δ observe(_:)ͷ஫ҙ఺ • observeͷ෼ׂ • Task
29. 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 } } } }
30. 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 } } } } มߋΛ௥੻Ͱ͖ͳ͍
31. 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 } } } }
32. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
33. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation ͜ͷ࣌఺ͰReducerΛ࡞੒͠ɺ ঢ়ଶϕʔεͰUIΛૢ࡞Ͱ͖ΔΑ͏ʹͳͬͨ
34. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation }ͲΕ͚ͩTCAͷڧΈΛ࢖͏͔(࢖͑Δͷ͔ʁ)
35. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
36. υϝΠϯΛࡉ෼Խ͢Δ The Composable ArchitectureͷʮComposableʯͷ෦෼ͷ࿩ • େ͖͍Reducer͔Βখ͍͞ػೳΛࢠReducerͱͯ͠ʹ෼ׂ͠ɺ ͦΕΒΛCompose͢Δ͜ͱ͕Ͱ͖Δ
37. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared case rowTapped case rowLongTapped } var body: some ReducerOf<Self> { … } }
38. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared } var body: some ReducerOf<Self> { … } } @Reducer struct RowFeature: Reducer { @ObservableState struct State: Hashable, Identifiable { … } enum Action { case rowTapped case rowLongTapped } var body: some ReducerOf<Self> { … } }
39. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … } enum Action { case onAppeared } var body: some ReducerOf<Self> { … } }
40. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … var rows: IdentifiedArrayOf<RowFeature.State> = [] } enum Action { case onAppeared case rows(IdentifiedActionOf<RowFeature>) } var body: some ReducerOf<Self> { Reduce { state, action in … } } }
41. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ @Reducer struct ListFeature: Reducer { @ObservableState struct State: Hashable { … var rows: IdentifiedArrayOf<RowFeature.State> = [] } enum Action { case onAppeared case rows(IdentifiedActionOf<RowFeature>) } var body: some ReducerOf<Self> { Reduce { state, action in … } .forEach(\.rows, action: \.rows) { RowFeature() } } }
42. υϝΠϯΛࡉ෼Խ͢Δ SwiftUIͷྫ struct ListView: View { let store: StoreOf<ListFeature> = .init( initialState: ListFeature.State() ) { ListFeature() } var body: some View { ForEach(store.scope(state: \.rows, action: \.rows)) { RowView(store: $0) } } }
43. υϝΠϯΛࡉ෼Խ͢Δ ͜ΕΛUIKitͰ΋࢖͑Δͷ͔ʁ
44. υϝΠϯΛࡉ෼Խ͢Δ UIKitͰ࢖͍ಘΔύλʔϯ • UITableView • UICollectionView
45. υϝΠϯΛࡉ෼Խ͢Δ UIKitͰ࢖͍ಘΔύλʔϯ • UITableView final class ListViewController: UITableViewController { let store: StoreOf<ListFeature> = .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 }
46. υϝΠϯΛࡉ෼Խ͢Δ UITableView final class ListViewController: UITableViewController { let store: StoreOf<ListFeature> = .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) } } }
47. υϝΠϯΛࡉ෼Խ͢Δ • UIKitͰ΋υϝΠϯͷࡉ෼Խ͸Մೳʂ • SwiftUIͱൺֱ͢Δͱهड़ྔ͕૿͑ɺෳࡶʹͳΔ͔΋ • Reducerͷن໛ʹ΋ΑΔ͕ɺ ݸਓతʹ͸ࡉ෼Խͤͣʹ ViewController:Reducer = 1:1 Ͱ΋े෼ • ͱ͸͍͑TCAͷڧΈ͸͔ͬ͠Γ࢖͍͍ͨͷͰ΋͏ͪΐ͍୳ͬͯΈΔ • ΞυόΠε͋Ε͹͓ئ͍͠·͢ʂ
48. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
49. uikit-navigation Point-Freeͷఏএ͢Δɺstate-drivenͳը໘ભҠͷ2ͭΧςΰϦ • Tree-based navigation • Stack-based navigation
50. uikit-navigation Point-Freeͷఏএ͢Δɺstate-drivenͳը໘ભҠͷ2ͭΧςΰϦ • Tree-based navigation • present(item:content:) • present(isPresented:content:) • navigationDestination(item:content:) • Stack-based navigation • NavigationStackController
51. uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { let store: StoreOf<Feature> override func viewDidLoad() { super.viewDidLoad() observe { … } } }
52. uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { @UIBindable var store: StoreOf<Feature> override func viewDidLoad() { super.viewDidLoad() observe { … } } }
53. uikit-navigation ࢖͍ํ: Tree-based final class FeatureViewController: UIViewController { @UIBindable var store: StoreOf<Feature> override func viewDidLoad() { super.viewDidLoad() observe { … } present(item: $store.scope( state: \.child, action: \.child )) { store in ChildViewController(store: store) } } }
54. uikit-navigation ࢖͍ํ: Stack-based class AppController: NavigationStackController { private var store: StoreOf<AppFeature>! convenience init(store: StoreOf<AppFeature>) { @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) } } } }
55. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation
56. TCA × UIKit • ViewControllerͰঢ়ଶΛ؂ࢹ • υϝΠϯͷࡉ෼Խ • uikit-navigation pixivͰ͸·ͩ࢖͍͖Ε͍ͯ·ͤΜ😢 }
57. TCA × UIKit × pixiv • ⭕ • TCAͷಋೖ • ViewControllerͰঢ়ଶΛ؂ࢹ • swift-navigation(uikit-navigation)Λ׆༻ͨ͠state-drivenͳը໘ભҠ • ˚ • υϝΠϯͷࡉ෼Խ • swift-navigationͱTCAͷ౷߹
58. TCA × UIKit × pixiv • ࡉ෼Խɾswift-navigationͱTCAͷ౷߹͕·ͩͰ͖͍ͯͳ͍ཧ༝ • ࢼߦࡨޡதʂ • ը໘ભҠઌʹReducerΛಋೖͰ͖͍ͯͳ͍ • Tree-based͸ಛʹ໰୊ͳͦ͞͏ • swift-navigationͷΈͰstate-drivenͳը໘ભҠ͕࣮ݱͰ͖ΔͨΊ • Stack-basedΛ΍Γ͍ͨ৔߹ͩͱͪΐͬͱ೉͍͔͠΋ʁ • StackΛ؅ཧ͢Δ࢓૊ΈΛࣗ෼Ͱ࡞Βͳ͍ͱ͍͚ͳ͍ʁ
59. ײ૝
60. ײ૝ • ԣ࣠Ͱ஌ݟͷڞ༗Ͱ͖Δͷ͸ͱͯ΋خ͍͠ʂ • TCAͷڧΈΛશͯ࢖͍͜ͳ͍ͤͯΔΘ͚Ͱ͸ͳ͍͕ɺ͔ͳΓ։ൃମݧ͕ ྑ͘ͳͬͨ • ࢓༷͕Ӆṭ͞Εʹ͘͘ͳͬͨ • ঢ়ଶ == UIͰ͋ΔͨΊɺTest͕͔ͳΓॻ͖΍͘͢ͳͬͨ • (ͨͿΜ) ReducerͷܗΛյͣ͞ʹSwiftUIʹ΋ҠߦͰ͖Δ͸ͣ
61. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ