Be simple

”当たり前”が誰かのためになる

RxJava: 登録画面でcombineLatestを利用するのはなぜか

はじめに

こんばんは!お久しぶりです。

固定回線がいまだに繋がっておらず、著しくテンションが落ちてブログをお休みしていました、zukkeyです!

 

今回は、Rx関連で登録画面においてcombineLatestを利用するのはなぜか、ということについてメモを残しておきます。

 

個人的な見解で間違っている部分もあるかもしれないので、その場合は申し訳ないです。

間違いあればコメントで指摘していただけると幸いです。

 

充分ハードルが下がったところで説明していきます。

 

よくある登録画面

今回はサンプルとしてデザインは適当ですが、以下のようなよくある登録画面を作りました。

 

f:id:rozkey59:20180526193344p:plain

 

 入力する項目を三つ作り、入力がされないと一番下のボタンを押すことができないようになっています。

 

 今回はcombineLatestだけに焦点を当てているので、正規表現を使って文字列とマッチしているかといった処理は行わずに、ただ単に三つの入力項目に対して文字列が空かどうかを見てボタンの選択状態が変わるようにしています。

 

作っている最中に以下のリンクとほぼ同じもの作ってた!と気づいたのですが、色々な結合オペレータがある中で、なぜcombineLatestかについては触れられていなかったので、書いていきます。

今回は、combineLatestとzipを比較していきます。

もしかして需要無かったりするのか。。。。

 

dev.classmethod.jp

 

 

combineLatestの時の挙動

combineLatestのときの挙動が以下になります

f:id:rozkey59:20180526194931g:plain

各項目で入力された文字列のデータが通知されてきて、一つのデータの流れが変わることによりボタンの状態が変化します。

 

zipの時の挙動

zipの時の挙動が以下になります

f:id:rozkey59:20180526205202g:plain

各項目で入力された文字列のデータが通知されてきて、全てのデータの流れが変わることによりボタンの状態が変化します。

 

サンプルのアプリの中で起こっていること

画像でサンプルで起こっていることについて説明していきます。

 

combineLatestのとき

 

f:id:rozkey59:20180526201043p:plain

 

RxJavaの結合オペレータのmerge、zip、combineLatestでは複数のデータの流れが来た際に1つのデータの流れに合わせる作用があります。

 

各々のオペレータでの違いはあるのですが、combineLatestだけに限定して言うと下記のような流れになります。

 

f:id:rozkey59:20180526201632p:plain

combineLatestの場合は一つのデータが変更されるのに合わせて、結合されたデータの流れに入っていきます。

 

 zipのとき

f:id:rozkey59:20180526211231p:plain

zipはcombineLatestと同様に複数のデータが合わさったタイミングで新しいデータの流れを作ります。

 

 

f:id:rozkey59:20180526211241p:plain

挙動のgifをもう一度見直してもらうと分かるのですが、一つの項目を変えてもボタンの状態が変化していないことが分かります。

zipとcombineLatestの違いはここにあります。

 

 

f:id:rozkey59:20180526211255p:plain

全ての入力を変えることではじめて新しいデータの流れをつくります。

 

まとめ

登録画面などの複数の入力をRxで処理する際に、combineLatestがよく利用されるのは一つのデータが変わった際に状態が変わってほしいからだと僕は思っています。

 

zipの場合を見ていただけると分かるように、一つの入力を変えるたびにすべての入力に対して、何かしら通知を行うようなアクションを行わないと状態が更新されません。

 

 なので、登録画面のような場合にはcombineLatestを積極的に使っているのだと思います。

 

おわりに

最後まで見ていただきありがとうございます!

疑問等、指摘などありましたらコメントしていただけると幸いです!

今回のサンプルは以下のリポジトリをクローンすることで試せるのでよかったら試してみてください!

 

github.com