第3回RxSwift勉強会@Sansanの発表スライドです。

1. RxSwiftの
データバインディング
だけ
2016/11/17
第3回RxSwift勉強会＠Sansan
@hironytic

2. 自己紹介
• 一宮 浩教 / ひろん
• 徳島で働く
iOS / Android / UWP エンジニア
• https://twitter.com/hironytic
• https://github.com/hironytic

3. MVVM
View ViewModel Model
外観
プラットフォ
ームの都合
UIの状態
UIのための
ロジック
ビジネス
ロジック
呼び出し
通知
データ
バイン
ディング
WPFなら
XAML
ここだけ
RxSwift

4. 作戦
• ViewModel → View（出力）
➡ Observable
• View → ViewModel（入力）
➡ Observer
Variableで実現
メソッドに直結

5. override func viewDidLoad() {
super.viewDidLoad()
viewModel.number1Text
.bindTo(number1Field.rx.text)
.addDisposableTo(disposeBag)
viewModel.number2Text
.bindTo(number2Field.rx.text)
.addDisposableTo(disposeBag)
viewModel.calcEnabled
.bindTo(calcButton.rx.isEnabled)
.addDisposableTo(disposeBag)
viewModel.answerText
.bindTo(answerLabel.rx.text)
.addDisposableTo(disposeBag)
number1Field.rx.text
.bindTo(viewModel.number1ChangedAction)
.addDisposableTo(disposeBag)
number2Field.rx.text
.bindTo(viewModel.number2ChangedAction)
.addDisposableTo(disposeBag)
calcButton.rx.tap
.bindTo(viewModel.calcAction)
.addDisposableTo(disposeBag)
}
ViewController
bind
してます
https://github.com/hironytic/RxSwiftBindingExample/blob/ec0b98e4e07b7add0813657b76963a1a0237fd94/
RxSwiftBindingExample/ViewController.swift

6. private func calc() {
let n1 = Int(_number1Text.value) ?? 0
let n2 = Int(_number2Text.value) ?? 0
_answerText.value = String(n1 + n2)
}
private func number1Changed(_ value: String?) {
_number1Text.value = value ?? ""
updateCalcState()
}
private func number2Changed(_ value: String?) {
_number2Text.value = value ?? ""
updateCalcState()
}
private func updateCalcState() {
_calcEnabled.value = !_number1Text.value.isEmpty
&& !_number2Text.value.isEmpty
}
ViewModel
https://github.com/hironytic/RxSwiftBindingExample/blob/ec0b98e4e07b7add0813657b76963a1a0237fd94/
RxSwiftBindingExample/ViewModel.swift

7. private func calc() {
let n1 = Int(_number1Text.value) ?? 0
let n2 = Int(_number2Text.value) ?? 0
_answerText.value = String(n1 + n2)
}
private func number1Changed(_ value: String?) {
_number1Text.value = value ?? ""
updateCalcState()
}
private func number2Changed(_ value: String?) {
_number2Text.value = value ?? ""
updateCalcState()
}
private func updateCalcState() {
_calcEnabled.value = !_number1Text.value.isEmpty
&& !_number2Text.value.isEmpty
}
ViewModel
https://github.com/hironytic/RxSwiftBindingExample/blob/ec0b98e4e07b7add0813657b76963a1a0237fd94/
RxSwiftBindingExample/ViewModel.swift
on(_:)の.nextから直結

8. private func calc() {
let n1 = Int(_number1Text.value) ?? 0
let n2 = Int(_number2Text.value) ?? 0
_answerText.value = String(n1 + n2)
}
private func number1Changed(_ value: String?) {
_number1Text.value = value ?? ""
updateCalcState()
}
private func number2Changed(_ value: String?) {
_number2Text.value = value ?? ""
updateCalcState()
}
private func updateCalcState() {
_calcEnabled.value = !_number1Text.value.isEmpty
&& !_number2Text.value.isEmpty
}
ViewModel
https://github.com/hironytic/RxSwiftBindingExample/blob/ec0b98e4e07b7add0813657b76963a1a0237fd94/
RxSwiftBindingExample/ViewModel.swift
Variable

9. private func calc() {
let n1 = Int(_number1Text.value) ?? 0
let n2 = Int(_number2Text.value) ?? 0
_answerText.value = String(n1 + n2)
}
private func number1Changed(_ value: String?) {
_number1Text.value = value ?? ""
updateCalcState()
}
private func number2Changed(_ value: String?) {
_number2Text.value = value ?? ""
updateCalcState()
}
private func updateCalcState() {
_calcEnabled.value = !_number1Text.value.isEmpty
&& !_number2Text.value.isEmpty
}
ViewModel
https://github.com/hironytic/RxSwiftBindingExample/blob/ec0b98e4e07b7add0813657b76963a1a0237fd94/
RxSwiftBindingExample/ViewModel.swift
• 数値入力欄 ×2
計算ボタン
• 計算ボタンを押すと 入力された２つの数値を 足し算した結果を表示
• 数値入力欄が両方 埋まってないと
計算ボタンは無効
• あまりに単純なので
Modelは省略 😜

10. できた
• Rxのoperatorの使用ゼロ！😳
• 従来のIBOutletとIBActionの世界のよう！😏

11. 🐣
なにがうれしいの？

12. うれしいこと
🎊「RxSwiftを使った」 🎉

13. うれしいこと
• UIロジックのテスト
• UIテストって面倒じゃないですか？
- デザインの変更に弱いとか
- Accessibility Identifierとか
• ViewModelのテストでUIロジックはテストできる

14. 後日談
• 2016年の夏
• この方針で趣味プログラムを作り始めた
• 現在（2016年11月）
• 我慢できなくなって、ViewModel、Modelでも
Rxのoperatorを使うようになっている

15. 👁 👁
👄
データバインディングだけ
データバインディングだけ
データバインディングだけ…

16. まとめ
データバインディングだけだからと
軽い気持ちでRxSwiftに手を出すと、
「そっち」側の世界へ引き込まれる
ありがとうございました
📃ソースコード
https://github.com/hironytic/RxSwiftBindingExample