【Swift】RxSwift勉強してみたPart6

#はじめに
前回
今回はWKWebViewを使った以下のような簡単なアプリを作ります。

#GitHub
WebViewRxSwiftフォルダにあります

#実装

import UIKit
import RxSwift
import RxCocoa
import RxOptional
import WebKit

final class WKWebViewController: UIViewController {

    @IBOutlet private weak var webView: WKWebView!
    @IBOutlet private weak var progressView: UIProgressView!
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupWebView()
        
    }
    
    private func setupWebView() {
        let loadingObservable = webView.rx.observe(Bool.self, "loading")
            .filterNil()
            .share()
        
        loadingObservable
            .map { return !$0 }
            .bind(to: progressView.rx.isHidden)
            .disposed(by: disposeBag)
        
        loadingObservable
            .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
            .disposed(by: disposeBag)
        
        loadingObservable
            .map { [weak self] _ in
                return self?.webView.title
            }
            .bind(to: navigationItem.rx.title)
            .disposed(by: disposeBag)
        
        webView.rx.observe(Double.self, "estimatedProgress")
            .filterNil()
            .map { return Float($0) }
            .bind(to: progressView.rx.progress)
            .disposed(by: disposeBag)
        
        let url = URL(string: "https://www.google.com/")
        let urlRequest = URLRequest(url: url!)
        webView.load(urlRequest)
    }    

}

#解説

###filterNil()
RxOptionalライブラリを利用することで使えるようになります。
nilの場合は値を流さず、nilでない場合はアンラップして値をながすオペレーターです。

RxOptionalを使わない場合

Observable<String?>
    .of("1", nil, "3")
    .filter { $0 != nil }
    .map { $0! }
    .subscribe { print($0) }

RxOptionalを使う場合

Observable<String?>
    .of("1", nil, "3")
    .filterNil()
    .subscribe { print($0) }

###share()
ColdなObservableをHotなObservableに変換するオペレーター

以下のコードはtextFieldへのテキスト入力を監視し、ストリームの途中で値を加工して複数のlabelへbindしています。

let text = textField.rx.text
    .map { text -> String in
        print("call")
    }

text
    .bind(to: label.rx.text)
    .disposed(by: disposeBag)

text
    .bind(to: label2.rx.text)
    .disposed(by: disposeBag)

text
    .bind(to: label3.rx.text)
    .disposed(by: disposeBag)

ここで、textFieldに123と入力すると、"call"は９回呼ばれます。値を入力するたびにmapが3回呼ばれるためです。これは、データーベースアクセスするもの、通信処理が発生するものでは好ましくありません。

なぜこの現象が起こるのかをみていきたいと思います。

textField.rx.textはControlProperty<String?>として定義されています。
ControlPropertyはUI要素のプロパティで使われ、メインスレッドで値が購読されることが保証されているColdなObservableです。
ColdなObservableとは、subscribe(bind)した時点で読み込まれ、複数回subscribeするとその都度ストリームが生成されるという仕組みです。
今回は3回subscribe(bind)したので、3個のストリームが生成されます。すると、値が変更されたときにオペレーターが3回実行されてしまいます。
これを解決するには複数回購読してもオペレーターを一回実行するだけで済ませれば良さそうです。つまり、ColdなObservableをHotなObservableに変換します。そのためにshare()と言うオペレーターを使います。

let text = textField.rx.text
    .map { text -> String in
        print("call")
    }
    .share()

text
    .bind(to: label.rx.text)
    .disposed(by: disposeBag)

text
    .bind(to: label2.rx.text)
    .disposed(by: disposeBag)

text
    .bind(to: label3.rx.text)
    .disposed(by: disposeBag)

こうすることで、123と入力したときに"call"が三つだけ出力されていたら成功です。

#おわりに
次回
RxSwift少しずつわかってきました。