TCA’s Life Cycle Catch Up Tutorial

Point-Freeが開発した、TCA（swift-composable-architecture）を使ったことはありますか？

このスライドでは、TCAのライフサイクルについて、SwiftUIを使ったシンプルなコード例を交えながら解説します。
TCAに興味があり、これから学んでみたいという方に最適な内容です。ぜひご覧ください！

Have you ever used The Composable Architecture (TCA) from Point-Free?
This deck introduces the TCA lifecycle with simple code examples in SwiftUI.

If you're interested in learning TCA, this is for you!

Transcript

1. Swift-Composable-Architectureにおける ライフサイクルの可視化 26卒 iOSエンジニア 黒川 良太 1
2. 2 1-0 2-0 2-1 3-0 TCAとは TCAのライフサイクル コードと重ねて見るTCA メリットとデメリット p.1 p.8 p.10 p.18 目 次
3. Swift-Composable-Architectureとは 3 クロ）TCAを一言で表すと？ AI） TCAいうんはな、Swiftの世界に“設計の達人”を連れてきて、 開発が漫才みたく楽しくなる魔法みたいやねん、知らんけど！
4. Swift-Composable-Architectureとは 4 1-0 swift-composable-architecture （The Composable Architecture） Point-Freeが提供するアーキテクチャ 単一方向に情報が伝播し - State Management - Composition - Side Effects - Testing - Ergonomics これらに対して強力な機能を持つ
5. import ComposableArchitecture @Reducer struct HogeFeature { @ObservableState struct State: Equatable { var count = 0 var number: String? } enum Action { case incrementButtonTapped } } 主なコードフローについて見ていく (超簡単 ver.) 5 1-0 1-0 - ComposableArchitectureをインポート - ObservableStateマクロをつけたStateを作成 - ユーザーの動線に基づく命名がなされたAction の作成
6. import ComposableArchitecture @Reducer struct HogeFeature { var body: some ReducerOf<Self> { Reduce { state, action in switch action { case .incrementButtonTapped: count += 1 return .none } } } } 6 1-0 1-0 bodyの中にenumで定義したActionの中身を記載 していく `ReducerOf<Self>`がXcode26でエラー → `Reducer<State, Action>`で対応可 主なコードフローについて見ていく (超簡単 ver.)
7. import ComposableArchitecture struct HogeView: View { let store: StoreOf<HogeFeature> var body: some: View { Button(“Sample Button”) { store.send(.writtenAction) } } } 主なコードフローについて見ていく 7 1-0 1-0 StoreOf<HogeFeature>引数にとる
8. TCAのライフサイクル 8 ActionをReducerで新しいState、Effectに変換し Effect完了後に再びActionでState更新や描画を行うサイクル
9. TCAのライフサイクルを可視化してみる 9 1-0 2-0 Reducer Effect Action State Dependency View
10. コードと重ねるTCA 〜Firebase Authの認証〜 10
11. 実際のコードをもとにフローを追っていく 11 1-0 2-1 ダサい、手を抜くな、等のUIについてのお問い合わせは受け付けておりません LogInView View
12. 12 1-0 2-1 LogInFeature(Reducer) State Action Effect Reducer
13. 13 1-0 2-1 Dependency
14. 実際のコードをもとにフローを追っていく 14 1-0 EmailやPasswordが入力されている際には、ここで値が更新されている。 これがAction, Reducerを通してStateに適用される。 2-1
15. 実際のコードをもとにフローを追っていく 15 1-0 2-1
16. 実際のコードをもとにフローを追っていく 16 1-0 2-1 1. Buttonが押された際にLoadingがオンになる 2. emailとpasswordを取得してEffectを走らせる 3. Clientを利用したloginResponseの結果より 画面遷移またはErrorメッセージの表示が行われる
17. 実際のコードをもとにフローを追っていく 17 1-0 2-1 1. RootFeatureのハンドラでキャッチされ、画面がStackされる 2. Clientを利用したloginResponseの結果より NavigationまたはErrorメッセージが表示される
18. メリットとデメリット 18
19. メリット 19 1-0 2-2 - ユーザーの行動動線ベースでのコーディング - 比較的理解しやすい - モジュール性 - scopeやforEachなどでcomposableな設計が可能 - テストの容易性 - TestStoreと依存関係の差し替え（DI）が簡単 - Xcode26に対しての爆速対応がさすが - https://github.com/pointfreeco/swift-navigation/pull/289
20. メリット 20 2-2 - TestStoreを用いて仮想的な`store`を用意 - withDependenciesでダミー関数に差し替え - store.sendでアクションを飛ばす - $0.emailなどでアサーションを行う
21. デメリット 21 1-0 2-2 - キャッチアップコストが高い - Point-Freeに対する依存度が高い - ボイラープレートが多い - State, Action, Reducer, Dependency等で冗長な部分が多い
22. デメリット 22 1-0 2-2 同じカウントアプリでも こんなに違う - 左：TCA - 右：MVVM
23. ©️ Cybozu, Inc. 23