Otemachi.swift #02での登壇資料になります。 この資料で紹介しているサンプル: https://github.com/fumiyasac/ReduxSampleSwift UI実装に限らず複雑になりがちなアプリの状態管理とUIとの連結をいかに管理するかという問いに対し、Reduxを利用したUI表示サンプルを元に解説をしています。またRedux処理とViewControllerが本来持つライフサイクル等との共存した構造に関してまとめたものになります。 またこちらの内容はRopponngi.swift#5でも登壇した内容に加えてReduxのユニットテストに関しても触れております。

1. ReduxとSwiftの組み合わせ: 改訂版
Otemachi.swift #2 @ 日本経済新聞社
2018/10/16
Fumiya Sakai

2. 自己紹介
・酒井 文也 （Fumiya Sakai）
・ever sense. inc エンジニア
・Designer → ServerSide Engineer → AppDeveloper
Accounts
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Twitter: https://twitter.com/fumiyasac
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
Who are you?
Library (Personal)
Products (ever sense. inc)
New！
現在はVer0.2.0
上記新規アプリの開発や他アプリの運用全般など
Defense !

3. 技術書典5にてiOSのUI実装本を頒布しました！
この本の概要：
「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の中で
培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構築をする
上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。
本書に掲載しているサンプルのGithubリポジトリ:
また、書籍の販売に先立ちまして関連URLにこの中で解説を行なっているサンプルコー
ドのGithubリポジトリも公開しておりますので、是非実際のコードとご一緒に活用して
頂ければと思います。
https://github.com/fumiyasac/ios_ui_recipe_showcase
本日は8冊持ってきておりますので、懇親会でご購入も可能です（宣伝失礼）😄
※ 電子書籍版も現在はBoothにて販売しております！

4. このトピックスを選んだ理由
ReactNativeやその他Reduxを採用した事例を聞いた際に利用してみたいと感じた
動機1. 状態を一括管理ゆえに現在状態が把握しやすい？
動機2. ライフサイクル内処理の単純化ができるのでは？
動機3. 親子関係を持つViewController間の調整に便利？
参考) ReactNativeの実装と大きく異なる部分
・ReactNativeにはController相当のレイヤーがない。
アプリ内の機能が増えていくことで、UI実装
においても状態管理が煩雑になりがち。
特に状態と紐づくUIの考慮漏れはテスト
コードだけでは検知しにくい部分でもある。
UI実装の中で起こり得る問題点：
・iOSネイティブアプリは基本的にはMVCが前提になる。
・ライフサイクルの考え方も異なるのでView実装も違ってくる。
ネイティブアプリの開発で活用している概
念とは全く違うアーキテクチャではあるが、
Viewと状態管理の紐付けという点で解決
したいものは同じである。

5. Reduxを実現するためのライブラリ
SwiftでReduxを実現するライブラリの中でも今回はReSwiftを使用しました
ライブラリ名: ReSwift
https://github.com/ReSwift/ReSwift
ポイント：
1. 一方通行の状態管理を実現
2. 状態更新依頼はAction経由
(参考: ReSwift + RxSwift)
・Redux+Rxを活用したiOSアプリアーキテクチャ
https://qiita.com/susieyy/items/23d44f28c6a6915c58e2
・ReSwiftのステートをRxSwiftを使って監視する
http://glassonion.hatenablog.com/entry/2017/04/20/
195728
状態の
一括管理
状態更新
受け取り
状態の
更新処理
1.Single source of truth.
2.State is read-only.
3.Mutations are written as pure function.
常にこの原則に則っていること前提で処理が行われる
Reduxにおいて守る3つ原則：

6. Swift + Reduxを実現するサンプル実装
データと紐づく状態(State)を一括管理してUIの状態と対応させる実装を行う
このサンプルにおける実装ポイント：
取得データと画面UI状態の歩調を合わせるためのReduxでの状態管理
こちらのサンプルのリポジトリ:
https://github.com/fumiyasac/ReduxSampleSwift

7. Redux処理を理解する際にぶつかる壁はどこか？
ハマりやすいポイントと思われるのは、StateとViewControllerとの関わり方
ViewControllerとの関係
ViewControllerの部分ではStoreをsubscribeすることで実現
Stateの設計とMVCの共存
�図解でまとめた
対象の画面にてStateの更新を監視対象にすることで実現する
受け取ったState値を元に画面表示に必要なViewを構築する
viewWillAppear : store.subscribe(self)
viewWillDisappear : store.unsubscribe(self)
MVCパターンの中にReduxの処理フロー共存させていくために
State更新用のActionを実行する前にModel相当の処理を実行
Action発行とModel処理をラップしたメソッドを実行させる方針

8. Redux処理における登場人物と役割のまとめ
各々の処理に関する名称と役割に関しての概要一覧
ActionCreators
Action
Reducer
Middleware
Store
アプリケーション全体の状態（n個のState: 状態）を一枚岩のような形で保持する
State更新用のappStore.dispatch(action)や更新検知用appStore.subscribe(listener)を提供
Storeが保持している状態(State)を更新するための唯一の手段で内容を記載
State更新用のappStore.dispatch(action)や更新検知用appStore.subscribe(listener)を提供
Actionを実行するためのメソッド群。Actionの引数として渡すものを取得する等
PromiseKitを利用したAPI通信やModel相当の処理をした後にappStore.dispatch(action)を実行
現在の状態(State)とActionの内容から新しい状態(State)を作成する部分
Actionで受け取ったものやAction名からStateを更新。AppReducerにて複数Reducerの統合をする
Reducerの実行前後で処理を差し込むための部分 ※場合により無くても良い
ログを差し込んだり、実行された処理を元にさらに処理を割り込ませたい場合に用いる部分

9. Redux処理部分の構成とデバッグログによるイメージ
XCode内でのRedux処理部分の構成とデバッグログでの状態把握
XCode内のRedux部分 デバッグログの出力
Action / ActionCreator / Reducer / State が1セット Actionの発行によって状態(State)が更新されるかを確認する

10. ReSwiftで実現するRedux処理の概要図と処理フロー
各々の処理の役割と概要及びViewControllerを起点とした処理の流れを整理する
ViewController ActionCreators Action Reducer
Middleware
1. 最低限のLifecycle処理
2. 受け取ったStateを元にしたViewの更新
3. 処理に応じてActionCreatorの発行
Step1.
ボタン押下等のView側のイベントを
実行する際、ActionCreatorを実行
Step2.
ActionCreatorに非同期処理やRealmの処
理を挟み込み、取得した値をReducerへ送る
Step3.
ActionCreatorから送られた
値を元にStateを更新する
Step5.
Stateの変更検知をViewController側に仕込んだ
StoreSubscriberのfunc(newState: AppState)
で行い、状態を元にView要素の更新を実行する
Actionを実行する前に行って置きたい処理を
するメソッドの集合
例. Actionの引数になるものを作成する
AlamofireやRealmを介する処理はここで！
途中に処理を差し込む
例. ログの出力
Model
処理
例外時の
場合のみ
基本的に
はこちら！
ViewControllerの
用途と役割まとめ
各View
更新
Step4.
変更されたStateは一枚岩の
Storeに保持して管理される
Store
※ 例外でViewControllerで直接Actionを発行する場合もあります。

11. Stateを管理するStoreとReducerの関連図と集約部分
Stateが更新されると反映したものがStoreへ
// 全てのStateを一元管理で管理するStoreを定義 in AppDelegate.swift
let appStore = Store(reducer: appReduce, state: AppState(),
middleware: [ActionLoggingMiddleware])
// アプリの現在状態をに関するState
struct AppState: ReSwift.StateType {
// ユーザーの回答に関するstate
var userSettingState = UserSettingState()
// 英語ニュース一覧に関するstate
var englishNewsState = EnglishNewsState()
��� ・・・（以下管理したいStateが続く）・・・
}
// Stateの更新が行われた際にappReduceを実行してStore内のStateを更新する ※Store内では全てのStateを一元
管理している
func appReduce(action: Action, state: AppState?) -> AppState {
var state = state ?? AppState()
// それぞれの変更されたReducerを反映する
state.userSettingState = UserSettingReducer.reducer(action: action, state: state.userSettingState)
state.englishNewsState = EnglishNewsReducer.reducer(action: action, state: state.englishNewsState)
��� ・・・（以下管理したいStateに関する処理が続く）・・・
return state
}
全てのReducer集約全てのState集約
StoreをAppDelegateのグローバルに置き、Reduxで管理したいものを利用する
Stateの更新と集約を担う
Stateの変化を利用したいViewControllerに対して、Stateが更新された際に
通知を検知できるようリスナーを登録することで実現する。

12. Redux処理とプロトコルの使い分けについて
データを伴う画面変更の処理と別のViewControllerの調節の用途を分けて管理する
Protocol
Redux
UIViewControllerで取り扱うデータの取得を伴う状態管理に関する部分
UIViewController1画面単位での状態管理についてはReduxで管理し、分量によっては分割する
ViewControllerのRedux処理の他に関連するViewControllerのView調整
Stateの更新で任意のViewControllerのViewを処理し、さらに関連する他の画面にも処理を伝える
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Stateが更新された際に通知を検知できるようリスナーを登録する
appStore.subscribe(self)
}
extension GourmetShopViewController: StoreSubscriber {
func newState(state: AppState) {
// TODO: 各種State(状態)を元にしたUIの構築処理を行う
}
}
weak var delegate: ChildContainerViewDelegate?
func sendParamsToChildViewController(_ params: T) {
// 受け取ったデータを元に更新する処理に加えてContainer配置も処理する
self.delegate?.updateChildContainerView(params)
}
extension MainViewController: ChildContainerViewDelegate {
func updateChildContainerView(_ params: T) {
// TODO: 子ViewControllerと連動した処理を実行する
}
}

13. class APIManagerForSomeData {
// MARK: - Singleton Instance
・・・（略）・・・
// API経由で情報一覧を取得する
func getSomeList(target: …) -> Promise<JSON> {
let parameters: [String : Any] = […]
return Promise { seal in
Alamofire.request(baseUrl, method: .get, parameters: parameters)
.validate().responseJSON { response in
switch response.result {
case .success(let response):
// 成功時の処理(必要なレスポンスを返す)
seal.fulfill(json)
case .failure(let error):
// 失敗時の処理(エラー結果を返す)
seal.reject(error)
}
・・・
非同期処理やModel相当の処理を行うタイミング
非同期処理をActionを発行をするための処理(ActionCreator)と組み合わせる例
ActionCreators ApiManager
struct SoneActionCreator {}
extension SomeActionCreator {
static func fetchSomeList(target: …) {
// TODO: データ読み込み中の状態を反映するアクションの実行
// APIManagerの処理を実行する
APIManagerForSomeData.shared.getSomeList(target: target)
.done { newsJSON in
// TODO: 成功時の状態を反映するアクションの実行
}.catch { error in
// TODO: 失敗時の状態を反映するアクションの実行
}
}
}
非同期処理を内包したオブジェク
トに対して処理を追加する形式
処理部分のポイント：
Alamofire (API通信)
SwiftyJSON (JSON解析)
PromiseKit (処理部分)
の組み合わせで実現
処理部分のポイント：
読み込み中 / 成功�/ 失敗の3通りの状態を実現
API処理結果の
ハンドリング
必要なデータを取得して、
次にActionの引数へ渡す
データ取得と反映 Promise<JSON>型を返す

14. ReduxとUI表現に関する処理を組み合わせたケーススタディ
Reduxを用いてUIに関連する処理を実現する上で下記3つのポイントを解説します
Case1:項目の多い
入力フォーム作成
Case2:次のn件を
一覧へ表示する
Case3: 複数個の
ContainerView
各ケースでポイントとなる部分：
1. 項目の多い入力フォームとState管理について
入力された内容とStateの変化を連動させるこ
とで、現在の入力状態を管理する。
2. 次のn件の表示とAutoLayoutの処理の連携
ContainerViewで表示するセルの個数変化に
伴ってContainerView自身の高さも更新する。
3. 複数のContainerViewに処理を伝える
ScrollView上部を引っ張ってのリフレッシュのよ
うに各Containerへの伝播をReduxを用いる。

15. Case1. 項目の多い入力フォームの作成と状態管理をする
それぞれの状態定義において何を管理対象とするかをまずは決める
struct UserSettingState: ReSwift.StateType {
// キーボードの表示状態（初期値: false）
var keyboardIsShown: Bool = false
// 入力された郵便番号（初期値: ""）
var postalCode: String = ""
// 選択された住んでいる年数（初期値: 0）
var selectedResidentPeriod: Int = 0
// 入力された自由入力項目（初期値: ""）
var freeWord: String = ""
// 入力されたニックネーム（初期値: ""）
var nickName: String = ""
// 選択された性別（初期値: 0）
var gender: Int = 0
// 選択された年齢（初期値: 0）
var selectedAge: Int = 0
}
userSettingState: ReduxSampleSwift.UserSettingState(keyboardIsShown: false, postalCode: "1700005",
selectedResidentPeriod: 3, freeWord: "色々便利で暮らしやすいです。", nickName: "fumiya", gender: 0, selectedAge: 3)
1. 状態管理の対象とするものは何か？
2. 遷移やキーボード等のUI表示状態を含めるか？
Stateの中身はUITextFieldDelegateやUITableViewDataSourceの処理と連動して更新
UITextField / UITextViewのテキスト入力から得られた値
やUISegmentedControl / UITableViewで選択した際に
得られた値はReduxで管理しておく。
補足. 取得した表示用データについても同様に扱う
画面遷移に関しては、連続した関連性がある場合や経路を
が関係する処理が必要な場合は管理する、特に必要がない
場合は別々に管理しなくても良い。
※ なるべく1ViewController = 1Stateにするのが理想？State

16. Case1. 項目の多い入力フォームの作成と状態管理をする
各種Delegate等View側の処理と連動してActionCreatorを実行する
// ニックネームの値が更新された際に実行されるアクション
@objc private func nickNameValueChanged(sender: UITextField)
{
// ニックネームの変更を反映するActionCreatorを実行する
if let nickName = sender.text {
UserSettingActionCreator.changeNickNameInput(nickName:
nickName)
}
}
1. ViewController側の処理内でActionCreatorを実行
2. Actionを発行しReducerへAction名と引数を送信
Reduxで管理したいAPIやModel相当
のデータがある場合には、Action発行
前やMiddlewareにはさみ込む。
// ニックネームの入力変更を反映する
static func changeNickNameInput(nickName: String) {
let setNickNameAction =
UserSettingState.userSettingAction.setNickName(nickName:
nickName)
appStore.dispatch(setNickNameAction)
}
extension UserSettingState {
// ユーザーの回答に関するstateを変更させる
アクションをEnumで定義する
enum userSettingAction: ReSwift.Action {
・・・（必要部分のみ抜粋）・・・
// ニックネームが入力された際に実行される
アクション
case setNickName(nickName: String)
・・・（以下略）・・・
}
}
Action
ActionCreator
ViewController

17. Case1. 項目の多い入力フォームの作成と状態管理をする
Reducer層でActionで受け取った値とAction名を元にStateを更新し、Viewへ反映
extension UserSettingReducer {
static func reducer(action: ReSwift.Action, state: UserSettingState?) -> UserSettingState {
// ユーザーの回答状態のstateを取得する(ない場合は初期状態とする)
var state = state ?? UserSettingState(
// ユーザーの回答状態のstateを変更させるアクションでない場合はステートの変更は許容しない
guard let action = action as? UserSettingState.userSettingAction else { return state }
switch action {
// それぞれのアクションに応じたStateの更新処理を行う
・・・（case let Action名: それぞれの処理）・・・
// Debug.
AppLogger.printMessageForDebug("UserSettingStateが更新されました。")
return state
}
}
Actionを経由して、Reducerは受け取った値から新しくStateを作る
ViewControllerのStoreSubscriber func newState(state: AppState) { … } へ新しいStateが渡る
Reducer
各々のReducer
State更新後の
処理の順番
AppState
AppReducer

18. Case2. 次のn件を一覧で表示する
一覧表示の部分については別のContainerViewに分割して管理している
一覧表示コンテンツの
ContainerView
高さのConstraint
を変化させる
タイトル
コンテンツ
ボタン
データ取得した
分のセルを表示
1. 子のViewController側
ボタンを押下したら、API通信を
行って、コンテンツに表示するも
のの一覧を取得してUITableView
内に表示させる。
（データの取得から反映までの処
理はReduxで管理する）
1. 子ViewControllerのセ
ル個数に合わせて親に配置
したContainerの高さ更新
2. コンテンツのセルタップ
時のSFSafariController
2. 親のViewController側
ContainerViewの高さを変更す
るための処理とセルタップ時の処
理をProtocolで定義して、伴う
Viewの変化に対応させる

19. Case2. 次のn件を一覧で表示する
次の10件を表示するボタンを押下した際に実行されるReduxとProtocolの連動処理
extension MainViewController: EnglishNewsViewDelegate {
// 英語ニュースの取得成功時にこのViewController側で行う処理
func fetchEnglishNewsListSuccess(_ newsCount: Int) {
// 英語ニュースを表示しているContainerViewの高さを調節する
let englishNewListContentHeight = CGFloat(newsCount) * EnglishNewsTableViewCell.CELL_HEIGHT
englishNewListHeight.constant = englishNewListContentHeight + MainContentsTitleView.VIEW_HEIGHT +
MainContentsFetchButtonView.VIEW_HEIGHT
}
・・・（省略）・・・
}
extension EnglishNewsViewController: StoreSubscriber {
// ステートの更新が検知された際に実行される処理
func newState(state: AppState) {
・・・（Stateに格納されたデータを反映させる処理を行っている）
// 現在取得されている英語ニュースの個数に合わせてContainerView自身の高さを更新する
let englishNewsListCount = englishNewsList.count
self.delegate?.fetchEnglishNewsListSuccess(englishNewsListCount)
}
}
配置したContainerViewにおけ
る親子間の処理をする部分
子のViewController側について
はReduxのStateによる管理でな
るべく済むような形にする。

20. Case3. 複数個のContainerView
親のUIScrollViewの一番上を引っ張って全体をRefreshしたいケースを考えてみる
UIScrollViewの中にContainerViewが複数個配置している
月別カレンダー
今月のPickup
1. 子のViewController側
Stateでそれぞれ状態を管理し
ているので、Containerに紐づく
ViewControllerはそれぞれ分割
されて管理されている。
2. 親のViewController側
親のViewControllerから子の
ViewControllerの表示状態を変
更する場合はActionを発行する
飲食店チョイス
英語ニュース
親ViewControllerで行うこと
UIScrollViewDelegate + RefreshControlの処理
Action発行 子ViewControllerはRedux処理
State変化に伴うView更新が実行

21. 今回のView実装を行うにあたってのおまけ的なもの
ContainerViewを含んだ画面におけるカスタムトランジションとの組み合わせ
写真コンテンツを入れている部分：
・画面全体はUIScrollViewで構成している
・中にはContainerViewで機能ごとに配置
ContainerViewに分割することで、ViewControllerとその
ViewController内で管理したいStateやReduxに絡む処理の粒度
を小さくすることができる。反面、子のView要素の配置位置を親側
で使う場合などでは、その点の注意が必要。
例. カスタムトランジションで写真がふわっと重なる動きを作る
// カスタムトランジションに引き渡す遷移元画像の位置をメンバ変数へ格納する
let statusBarHeight = UIApplication.shared.statusBarFrame.height
let navigationBarHeight = self.navigationController?.navigationBar.frame.height ?? 0
selectedFrame = CGRect(
x: 0.0,
y: 175.0 + navigationBarHeight + statusBarHeight - mainScrollView.contentOffset.y,
width: pickupContentsContainer.frame.width,
height: pickupContentsContainer.frame.height
)
UIScrollViewの中で更にContainerViewに分けた構成にしているので、画像のカ
スタムトランジションをする場合は親からの位置に換算する必要が出てくる。

22. Redux実装におけるUnitTestへのアプローチ
Reduxのデータフローが構築されてStateの更新が正しくできているか？
// ReduxにおいてActionを発行する前のstateをテストする
let appStore = Store(reducer: appReduce, state: AppState(), middleware:
[ActionLoggingMiddleware])
let beforeInstallAppDate = appStore.state.tutorialState.installAppDate
let beforeIsFinishedUserSetting = appStore.state.tutorialState.isFinishedUserSetting
let beforeIsFinishedTutorial = appStore.state.tutorialState.isFinishedTutorial
XCTAssertEqual(nil, beforeInstallAppDate)
XCTAssertEqual(false, beforeIsFinishedUserSetting)
XCTAssertEqual(false, beforeIsFinishedTutorial)
// ReduxにおいてActionを発行した後のstateをテストする
let currentDate = Date()
appStore.dispatch(
TutorialState.tutorialAction.setInstallAppDate(date: currentDate)
)
appStore.dispatch(
TutorialState.tutorialAction.setIsFinishedTutorial(result: true)
)
appStore.dispatch(
TutorialState.tutorialAction.setIsFinishedUserSetting(result: true)
)
let afterInstallAppDate = appStore.state.tutorialState.installAppDate
let afterIsFinishedUserSetting = appStore.state.tutorialState.isFinishedUserSetting
let afterIsFinishedTutorial = appStore.state.tutorialState.isFinishedTutorial
XCTAssertEqual(currentDate, afterInstallAppDate)
XCTAssertEqual(true, afterIsFinishedUserSetting)
XCTAssertEqual(true, afterIsFinishedTutorial)
ReduxのAction発行をテストケース内で実行
このテストで担保したい事項は、「Reduxの一連の流れが正しく実行できていること」である
非同期処理の部分は
JSONのStubで代用
ReduxのState更新処理はActionCreator経由で実行されるため、大前提としてReduxの処理が正しくなければならない。
Before
After

23. まとめ
Reduxの活用とUI実装を組み合わせる際には状態管理の設計が重要になる
参考資料：�Redux（ReSwift）を用いた実装を考える上で参考にした資料集
・�アプリケーションの状態をReduxで管理することで「状態の更新」と「UI要素の更新」を結びつけることが可能になる
・ Reduxのルールや原則はiOSのアーキテクチャとは少し異なる部分なのでその部分の理解が若干しんどさがあるかも
・Unindirectional Data Flow in Swift
http://ianterrell.com/talks/unidirectional-data-flow-in-swift/#/title-page
・ ReSwiftのStateで管理したい状態を「どの部分までをRedux対象とするか」を決めること
・ReduxのSwift実装「ReSwift」を触ってみる
http://developabout0309.blogspot.com/2018/03/reduxswiftreswift.html
・RxSwiftを投げ出したあなたに贈る、ReduxライクなReSwiftのご提案
https://qiita.com/Hakota/items/bb94e891961b70b64b44
・ データに関わる処理とUIレイアウト変更処理の連携をReduxとProtocolの併用や使い分けと設計が綺麗な連動のポイント