テクノロジー

ReactiveXで使うStreamとObserverとは?RxJSでわかりやすく解説

あらすじ

前回は、ReactiveXとは?RxJSの入門と導入手順について話しました。今回は、その中で紹介したObservable・Streamがどういうものなのか解説します。

Observable・Streamは、ReactiveXを使ってコードを書く上でも最も重要な要素の1つになります。これらがないとReactiveXのコードを書くことはできないと言っても過言ではないとも言えます。

それぞれの動作と特徴

Observable

Streamに流れてきたデータをフィルタリングしたり、加工したりして必要なデータに変換をした後、定義された処理を実行するものです。Observableは、Next・Completd・Errorの3つの処理を持っています。Observableなものを接続して、変換されたデータを扱ったり・処理を実行したりすることもできます。

Stream

各Observerに渡すためのデータを流すところです。あらゆるデータ・イベントはここへ流されて、必要なデータをObserverが監視して処理していきます。

今回作るもの

今回は、前回例に挙げた水道をモチーフにしたプログラムを書いていってみます。実際にObservableな要素をどう定義していくと、どう処理をすることが可能なのか説明します。

 目指すところ

  • 各Functionを宣言的に書くことができる
  • 非同期処理をもっとシンプルに扱いやすくする

具体的な実装

水道に水(データ、イベント)を流し、各蛇口(Observableな要素)で必要な処理をして、水やお湯・ろ過処理などを実装してみます。

貯水

Streamにデータを流すところです。ろ過装置で不必要なデータを処理できるか検証するため、あえてノイズを含めたデータを流します。この貯水には、ごみ(DUST)・ 汚れた水(DARTY_WATER)・ 綺麗な水(WATER)の3種類のデータが存在します。これらを配列で保持し、Streamへ流します。

今回は、DUSTが3つ、DARTY_WATERが2つ、WATERが4つ用意します。

水出力

変換されたデータをアウトプットとして出力するところです。コントローラー、もしくはお湯変換装置からデータを受け取ってデータを外部にアウトプットします。

まず、Streamを通って流れてきたデータを出力するロジックを書いていきます。

from関数は、Steamにデータを1つずつ流します。

subscribe関数を使うことで、Streamに流れてきたデータに対してObserverが1つずつ出力処理を行っていきます。すると出力が以下の通りになります。

まだろ過を行わずに、そのまま処理を行っているのでDUSTとDARTY_WATERがそのまま表示されています。

このままでは、飲める水にはならないのでろ過装置を実装していきます。

ろ過装置

データに混ざっているノイズを除去するところです。貯水から流れてきたデータを見て、不要なデータをフィルタリングしたあとお湯変換装置と水出力へ流します。
ここでは2つのフィルタリングを使って綺麗な水に変換していきます。

  1. filter関数を使ってDUSTを除きます。流れてきたデータがDUSTだった場合にStreamから除外します。
  2. map関数を使って、DARTY_WATERをWATERに変換します。DARTY_WATERが流れてきた場合、WATERに変換してStreamに流します。

まず1の実装です。

先ほどのsubscribe関数の前に追加をします。そうすると出力する処理の前に、DUSTをフィルタリングをすることができるようになります。
出力は以下の通りです。

DUSTがデータから除外されてデータが表示されています。

次に2の処理を実装します。

filter関数とsubscribe関数の間にmap関数を追加します。このmap関数は、filter関数で処理されたフィルタリングされたデータを受け取り、DARTY_WATERをWATERに変換して出力へ渡しています。

実行結果は以下の通りです。

これで流れてくる水が全て飲める水に変換されましたね。

これを実装したコードをGitHubに上げているので、気になる人はぜひ見てみてください。
>https://github.com/hiro-nagami/rx-sample/tree/master/water_supply

結論

このようにReactiveXでは、StreamとObservableを使ってデータをフィルタリングしたり変換したりすることをシンプルに実装することができます。データ=>フィルタ=>データ=>変換=>データ=>出力と構造もわかりやすくなります。

上手く使うことによって構造をよりシンプルに書くことができ、よりバグなどが少ないコードを書くことができるようになるのです。

次回は、このコードをSubjectというものを使って実装置き換えていきます。

Related post

  1. テクノロジー

    今週のITニュースハイライト 6/25 – 7/1

    Twitterの@nagami_hiroでは毎日きになるITニュースや…

  2. Pythonでスクレイピング

    BeautifulSoup4でid, classを持つDOMを取得して効率化しよう!

    前回は、"スクレイピングでヘッダー情報を付与する方法とその目的"を紹介…

  3. テクノロジー

    IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

    iOSアプリ開発をStoryboardを使って開発している方も増えてき…

  4. テクノロジー

    ReactiveXとは?RxJSの入門と導入手順

    Rx (Reactive Extension)とはここ数年で話題になっ…

  5. iOSアプリ開発

    iOSアプリ開発者が本当にオススメする6つの技術系サイト

    今回は、iOSアプリエンジニアとして実際に良く参考にしているサイトを紹…

  6. Pythonでスクレイピング

    Pythonスクレイピングの導入と利用の注意ポイント

    気象データの監視や研究用途、情報分析するといった際に必要なデータを収集…

  1. Book

    マネジメント

    本を読むことから何が生まれるのか
  2. テクノロジー

    iOSアプリ開発が簡単にできるStoryboard入門
  3. iOSアプリ開発

    Firebase iOSの解説・セットアップ編
  4. 便利

    WiMAX 2+を3週間使って分かったメリットと制限のこと
  5. 日記

    謹賀新年。明けましておめでとうございます。
PAGE TOP