初学者向けTCA（The Composable Architecture）解説

はじめに

Swiftでアプリを開発する際、設計パターンやアーキテクチャの選択が重要になります。その中でもThe Composable Architecture（TCA）は、SwiftUIアプリの開発に適した強力なアーキテクチャの一つです。

自分の学習内容整理も兼ねて、TCAの基本概念と初心者向けの導入方法を解説します。

---

そもそもTCAとは？

TCA（The Composable Architecture）は、Point-Freeが開発したアーキテクチャで、以下の4つの概念を基に構成されています。

• State（状態）: アプリの状態を表すデータモデル。
• Action（アクション）: ユーザー操作やイベントを定義する。
• Reducer（リデューサー）: Actionに応じてStateを更新する。
• Store（ストア）: State、Action、Reducerを管理する中心的な役割。

TCAは、ReduxやElmアーキテクチャに似た構造を持っており、状態管理を一元化しながらアプリを構築できます。

---

TCAの基本構成

1. State（状態）

import ComposableArchitecture

struct CounterState: Equatable {
    var count: Int = 0
}

2. Action（アクション）

enum CounterAction: Equatable {
    case increment
    case decrement
}

3. Reducer（リデューサー）

let counterReducer = Reducer<CounterState, CounterAction, Void> { state, action, _ in
    switch action {
    case .increment:
        state.count += 1
        return .none
    case .decrement:
        state.count -= 1
        return .none
    }
}

4. Store（ストア）

let store = Store(
    initialState: CounterState(),
    reducer: counterReducer,
    environment: ()
)

---

SwiftUIでのTCAの実装

TCAはSwiftUIと組み合わせて使うことができます。

SwiftUIのView

import SwiftUI
import ComposableArchitecture

struct CounterView: View {
    let store: Store<CounterState, CounterAction>
    
    var body: some View {
        WithViewStore(self.store) { viewStore in
            VStack {
                Text("Count: \(viewStore.count)")
                    .font(.largeTitle)
                
                HStack {
                    Button("-") {
                        viewStore.send(.decrement)
                    }
                    .padding()
                    
                    Button("+") {
                        viewStore.send(.increment)
                    }
                    .padding()
                }
            }
        }
    }
}

Appエントリーポイント

@main
struct CounterApp: App {
    var body: some Scene {
        WindowGroup {
            CounterView(
                store: Store(
                    initialState: CounterState(),
                    reducer: counterReducer,
                    environment: ()
                )
            )
        }
    }
}

---

TCAのメリット・デメリット

メリット

• 状態管理が明確 - アプリの状態が一元管理されるため、予測しやすい。
• テストがしやすい - Reducerをユニットテストしやすい。
• コンポーザビリティが高い - 小さなReducerを組み合わせて大きなアプリを作れる。

デメリット

• 学習コストが高い - 初めて触れる場合は、Reducerの考え方に慣れる必要がある。 (正直初学者向けではないかも)
• コード量が増える - 小さなアプリにもReducerやStoreを用意するため、ファイル数が増えがち。

---

まとめ

項目	内容
設計	Reduxに似た状態管理アーキテクチャ
主要コンポーネント	State, Action, Reducer, Store
利点	状態管理が明確、テストが容易、スケールしやすい
注意点	学習コストが高い、小規模アプリには冗長な場合がある

僕も少しづつ慣れていきたい...