本記事について
本記事では、SwiftUIのアーキテクチャについて調査するために、SVVSアーキテクチャを実装してみた感想をまとめました。個人的な意見であり、筆者の知識不足から誤った記述が含まれている可能性があるため、参考程度にご覧ください。
SVVSとは？
このアーキテクチャを考案されたのはkoherさんChatworkさんで、今回はこちらの資料を参考にさせていただきました。
SVVSの頭文字は、Store、View、ViewStateの略です。
Storeはアプリケーション全体の状態（state）を管理する役割を持ち、ReduxのStoreと似た役割を果たします。
Viewは、その名の通り、画面を表示する役割を担います。
ViewStateはプレゼンテーションロジックを持ち、主にViewの状態管理に関心を分離させています。
実装の解説
では、Qiitaの記事をリスト化するだけのシンプルなアプリをSVVSで作ってみます。
Model関連
ここは本記事の肝ではないので、説明は割愛します。あくまでサンプルです。
struct Article: Decodable, Identifiable {
let id: String
let title: String
let body: String
}
enum ArticleRepository {
static func fetchArticles() async throws -> [Article] {
let url = URL(string: "https://qiita.com/api/v2/items")!
let (data, _) = try await URLSession.shared.data(from: url)
return try JSONDecoder().decode([Article].self, from: data)
}
}
Store
記事（Article）の状態を管理するStoreを@MainActorで定義します。
@Publishedを付けたarticlesプロパティを保持し、データはRepositoryを通じて取得してarticlesに渡します。
また、状態の一元管理（Single Source of Truth）のために、このStoreはシングルトンとして実装します。
※DIは一旦置いておく
@MainActor
final class ArticleStore {
static let shared: ArticleStore = .init()
@Published private(set) var articles: [Article] = []
func loadArticles() async throws {
let articles = try await ArticleRepository.fetchArticles()
self.articles = articles
}
}
ViewState
ViewStateを@MainActorで定義し、ObservableObjectに準拠させます。ViewStateにはarticlesプロパティを定義し、初期化時にstoreのarticlesプロパティを監視することで、値の変更を自動的に反映させます。
また、Viewのアクションに対応するためのメソッドも作成します。今回は画面表示のタイミングで処理を行うonAppear()メソッドを定義します。
@MainActor
final class ArticleViewState: ObservableObject {
private let store: ArticleStore = .shared
@Published private(set) var articles: [Article] = []
private var cancellables = Set<AnyCancellable>()
init() {
store.$articles
.assign(to: \.articles, on: self)
.store(in: &cancellables)
}
func onAppear() async {
do {
try await store.loadArticles()
} catch {
print("Error: \(error)")
}
}
}
View
Viewは、ViewStateを@StateObjectを保持しています。
.taskモディファイアを使用していますが、iOS 15.0+でしか使えないため、iOS15未満はonAppearを使います。
struct ArticleListView: View {
@StateObject private var state: ArticleViewState
init() {
self._state = .init(wrappedValue: .init())
}
var body: some View {
List(state.articles) { article in
Text(article.title)
}
.task {
await state.onAppear()
}
}
}
考えたこと
- 良い点
- TCAに比べると学習コストが低くて、シンプル
- Observationの移行が楽になる
- 対策したいこと
- Combineの学習コストを減らしたい
- ViewStateとViewModelとの差分がまだ理解できていないので、チームが迷うことなく実装できるように明確化したい
- プレゼンテーションロジックのテストを書きやすくしたい（現時点で書くイメージができていないので今後も要調査）
最後に
SVVSとは何か？を焦点に当ててまとめました。
サンプルアプリがシンプルすぎたので、次回はもう少し複雑な画面で検証したいです。
同じくSwiftUIのアーキテクチャを検討している方の参考になれば幸いです。