🐍
VIPERアーキテクチャでSwiftUIを利用するサンプルコードを動かして理解したい
はじめに
最近、仕事で技術的なアドバイスをしているクライアント様から、「VIPERアーキテクチャでSwiftUI使えるんスカね？」という質問を受けまして、「それはもちろん使えるッピ」と答えたのでその例を示します。
やり方はいろいろあるんですが、この記事ではCookpadさまのSwiftUI を活用した「レシピ」×「買い物」の新機能開発を参考にし、Playgroundsで動かせるサンプルにしてみます。
まずはVIPERの役割の整理
- View: ViewController/SwiftUI.View
- 値の表示
- ユーザイベントを受け付ける
- Presenter
- 内部にInteractorを持つ
- ViewをViewらしく扱うためにプレゼンテーションロジックを任されてる
- Interactor
- プレゼンテーションロジックでないロジックとかあるやつ
- データを持ってたりもする
- 今回の例ではややこしいので何もしない
- Router
- 画面遷移を担当するやつ
- Alert表示なんかも担当する
- 今回の例ではメソッドが呼ばれるだけにする
- Entity
- 今回は出番なし
SwiftUI を活用した「レシピ」×「買い物」の新機能開発
私が理解した範囲で書いていきます
SwiftUI.Viewをどういうふうに割り切るか
- SwiftUI.ViewはあくまでViewとする
- ユーザイベントを受けた際
- それを親ViewControllerにdelegateで伝える
- 値の表示
- 自身でObservableObjectを持ち外部から値を更新する
- VIPERで組み込むために
- ViewControllerの子ViewとしてaddChildする
- Cookpad先生の例ではUIViewController化し、VIPERのViewControllerを親とした構造とする
- ViewControllerの子ViewとしてaddChildする
- ユーザイベントを受けた際
何を使って何を使わないか
記事中ではさらに、使わないSwiftUI.Viewをあらかじめ方針として決めてるのも素晴らしいですね
使う例：Button, Text, VStack, HStack, ZStack, ScrollView
使わない例：NavigationView, List, Form, TextField*6
RxSwiftをPresenterの値をSwiftUI.Viewにbindする際に使っている
もともとRxSwiftを使っておられたらしくて、Combineと並行して使われているようです
- Presenter -> SwiftUI.View の方向でデータを反映する際
- PresenterのデータをObservableをSwiftUI.ViewのObservableObjectにbindする
- 値の変更を自動的に反映する
- PresenterのデータをObservableをSwiftUI.ViewのObservableObjectにbindする
参考にしてサンプルコードを作る
参考サイトさまとまったくおんなじものを作ろうにも細かいことはよくわからないので、こちらで仕様を考えて、簡単に動かしてためせるようにPlaygroundsで作ってみます。
サンプルコードの仕様
画面
SwiftUI.Viewとして3つ
- ユーザイベントを受け付けて内部の値を表示する赤いカウンターView
- 内部の値を表示するだけの青いView
- 押せる押せないボタンを表現するだけのView
RxSwiftは使いたくない
- RxSwiftを使わずにCombineにしました
DataSourceという命名について
元記事の例ではDataSourceという型名が使われていて、「DataSourceというのがViewにあるけどきっと本来のアプリケーションのDataSourceはPresenterより奥のInteractorにあってViewのDataSourceはコピーなのね」と感じられるとは思います。
ただ、もし私だったらViewのDataSourceのほうはDataもしくはStateだけにしてSourceという言い方は避けるかもねと言う感じで参考にさせてもらいました。
意図として、なるべく下記のようなことを説明しなくても目立たせたい感じです
- Countする値はPresenterが持っていて、CounterViewはイベントで増やされてもPresenterの値を増減し、CounterViewが値として持っている表示用のコピー
- DesuwaLabelViewもそのPresenterの値を都度コピーして表示しているだけ
- DoneButtonViewもPresenterの値からBooleanの結果だけを保持
サンプルコード
import UIKit
import SwiftUI
import Combine
import PlaygroundSupport
protocol CounterViewOutput: AnyObject {
func decrement()
func increment()
}
/// カウントアップとダウンをUIがやってその値を外からとってくる
struct CounterView: View {
// あくまでViewに表示するための値であってViewのためのState
class State: ObservableObject {
// Viewの値
@Published var count: Int
init(count: Int) {
self.count = count
}
}
@ObservedObject var state: State
private weak var delegate: CounterViewOutput?
init(
state: State,
delegate: CounterViewOutput
) {
self.state = state
self.delegate = delegate
}
var body: some View {
VStack {
Text("Viewイベントを外部に伝えて値を外部から取得するサンプル\n")
HStack {
Button("-") {
delegate?.decrement()
}
Text("\(state.count)")
Button("+") {
delegate?.increment()
}
}
}
.foregroundColor(Color.white)
}
}
/// Stringを表示するだけのView
struct DesuwaLabelView: View {
// あくまでViewのState
class State: ObservableObject {
// Viewの値
@Published var text: String
init(text: String = "") {
self.text = text
}
}
@ObservedObject var state: State
var body: some View {
VStack {
Text("外部から値を取得するだけのサンプル\n")
Text("\(state.text) DESUWA〜!!")
}
.foregroundColor(Color.white)
}
}
// SwiftUIのactionをViewControllerへ伝える
protocol DoneButtonOutput: AnyObject {
func ditTapDoneButton()
}
/// Viewのイベントをdelegateで外に伝えて、値を内部に反映する例のView。
struct DoneButtonView: View {
// あくまでViewに表示するための値であってViewのためのState
class State: ObservableObject {
@Published var enabled: Bool
init(enabled: Bool = false) {
self.enabled = enabled
}
}
@ObservedObject var state: State
private weak var delegate: DoneButtonOutput?
init(
state: State,
delegate: DoneButtonOutput
) {
self.state = state
self.delegate = delegate
}
var body: some View {
VStack {
Button("遷移ボタン") {
delegate?.ditTapDoneButton()
}
.disabled(!state.enabled)
}
}
}
// MARK: -
class Presenter {
let router: Router
let countSubject = PassthroughSubject<Int, Never>()
/// 本来のDataSource。
var count = 0 {
didSet {
countSubject.send(count)
}
}
var cancellable: Cancellable?
init(router: Router) {
self.router = router
}
func viewDidLoad() {
// 外部イベントで値を変えられるよ、というだけの例
count = 9_999_999
}
func presentDetailView() {
router.presentDetail()
}
func increment() {
count += 1
}
func decrement() {
count -= 1
}
}
struct Router {
func presentDetail() {
print("画面遷移したというテイ")
}
}
class MyViewController : UIViewController {
var presenter: Presenter!
// 値をいつでも渡せるようにViewControlelrがStateを持ってる？
private let counterViewState = CounterView.State(count: 0)
private let desuwaViewState = DesuwaLabelView.State()
private let doneButtonViewState = DoneButtonView.State()
private var cancellables: Set<AnyCancellable> = []
override func viewDidLoad() {
super.viewDidLoad()
addChild(
CounterView(state: counterViewState, delegate: self),
frame: .init(x: 0, y: 0, width: 200, height: 200),
color: .red
)
addChild(
DesuwaLabelView(state: desuwaViewState),
frame: .init(x: 200, y: 0, width: 200, height: 200),
color: .blue
)
addChild(
DoneButtonView(state: doneButtonViewState, delegate: self),
frame: .init(x: 400, y: 0, width: 200, height: 200)
)
presenter.countSubject.sink { [weak self] value in
print("sink: \(value)")
self?.counterViewState.count = value
self?.desuwaViewState.text = "\(value)"
self?.doneButtonViewState.enabled = (value >= 10_000_000)
}
.store(in: &cancellables)
presenter.viewDidLoad()
}
}
private extension MyViewController {
// これはサンプル用に処理を集めただけなので参考にしないでくださいまし
func addChild<Content>(_ childView: Content, frame: CGRect, color: UIColor? = nil) where Content : SwiftUI.View {
let viewController = UIHostingController(rootView: childView)
addChild(viewController)
viewController.didMove(toParent: self)
view.addSubview(viewController.view)
viewController.view.frame = frame
if let color = color {
viewController.view.backgroundColor = color
}
}
}
extension MyViewController: DoneButtonOutput {
func ditTapDoneButton() {
presenter.presentDetailView()
}
}
extension MyViewController: CounterViewOutput {
func increment() {
presenter.increment()
}
func decrement() {
presenter.decrement()
}
}
// MARK: -
//// Present the view controller in the Live View window
let viewController = MyViewController()
viewController.presenter = Presenter(router: Router())
PlaygroundPage.current.liveView = viewController
感想
クックパッドさんの記事はVIPERでSwiftUIを使う例としてとっても参考になりました。感謝です。
Discussion