Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RxSwiftのデータバインディングだけ

1,989 views

Published on

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

Published in: Engineering
  • Be the first to comment

RxSwiftのデータバインディングだけ

  1. 1. RxSwiftの データバインディング だけ 2016/11/17 第3回RxSwift勉強会@Sansan @hironytic
  2. 2. 自己紹介 • 一宮 浩教 / ひろん • 徳島で働く
 iOS / Android / UWP エンジニア • https://twitter.com/hironytic • https://github.com/hironytic
  3. 3. MVVM View ViewModel Model 外観 プラットフォ ームの都合 UIの状態 UIのための ロジック ビジネス ロジック 呼び出し 通知 データ バイン ディング WPFなら XAML ここだけ RxSwift
  4. 4. 作戦 • ViewModel → View(出力) ➡ Observable • View → ViewModel(入力) ➡ Observer Variableで実現 メソッドに直結
  5. 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. 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. 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. 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. 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
 計算ボタン • 計算ボタンを押すと
入力された2つの数値を
足し算した結果を表示 • 数値入力欄が両方
埋まってないと
 計算ボタンは無効 • あまりに単純なので
 Modelは省略 😜
  10. 10. できた • Rxのoperatorの使用ゼロ!😳 • 従来のIBOutletとIBActionの世界のよう!😏
  11. 11. 🐣 なにがうれしいの?
  12. 12. うれしいこと 🎊「RxSwiftを使った」 🎉
  13. 13. うれしいこと • UIロジックのテスト • UIテストって面倒じゃないですか? - デザインの変更に弱いとか - Accessibility Identifierとか • ViewModelのテストでUIロジックはテストできる
  14. 14. 後日談 • 2016年の夏 • この方針で趣味プログラムを作り始めた • 現在(2016年11月) • 我慢できなくなって、ViewModel、Modelでも
 Rxのoperatorを使うようになっている
  15. 15. 👁 👁
 👄 データバインディングだけ データバインディングだけ データバインディングだけ…
  16. 16. まとめ データバインディングだけだからと
 軽い気持ちでRxSwiftに手を出すと、
 「そっち」側の世界へ引き込まれる ありがとうございました 📃ソースコード https://github.com/hironytic/RxSwiftBindingExample

×