【RxJS入門】Expand関数を使った再帰的なObservable #JavaScript

こちらに移行しました
こんにちは、ムラびとです。今回は、RxJSで再帰的、While文をObservableでどのように表現するかをまとめてみました。
今回は以下のように解説していきます。
なお、今回はRxjs6を使い、TypeScriptを使って書いていきます。

RxJSとは
expand関数とは
expand関数の使い方

RxJSとは

RxJSを使うと、非同期処理をみやすく簡単に使うことができるよう作られたライブラリです。
考え方としては、ベルトコンベアーに乗せられたHttpリクエストなどの非同期のデータをオペレーターを使って処理していきます。
公式サイトはこちら
詳しく使い方をしりたいひとはこちら
インストール方法は
npm i rxjs
注意：rxという名前のライブラリもありますが、こちらはRxJS5を使っており、書き方が若干異なります。

例としてqiita.comをスクレイピングしてみましょう。

import { from } from 'rxjs'; 
import { map } from 'rxjs/operators';
import * as request from 'request-promise'

from(request('https://qiita.com/'))
  .pipe(
    map(d=>'data:'+d)
  )
  .subscribe(v=>console.log(v))

このようにfrom関数でPromiseからObservableに変換し、map関数でそのデータを加工、subscribe関数でデータの受け取りをしています。
subscribe関数で受け取りを指定するまではObservableはデータを流さないので注意です。

expand関数とは

Observableをスクレイピングで次のページを取得していってほしいなど再帰的に使いたい場合というのは多々あると思います。そのような時にexpand関数を使います。
expand関数はある値を引数にObservableを生成する関数を受け取り、empty()を返すまでその関数を再利用していきます。
リファレンスはこちら

expand関数の使い方

例としてコラッツの問題の過程を出力していきましょう。
比較のため普通の再帰関数を使った場合をみてみましょう。

function collatz(n:number){
  console.log(n)
  if(n===1) return 1
  if(n%2===0) return collatz(n/2)
  if(n%2===1) return collatz(3*n+1) 
}

collatz(250)

テストはこちら

次にObservableで実装してみます。

import { from,of,empty } from 'rxjs'; 
import { expand } from 'rxjs/operators';


of(200)
  .pipe(
    expand(n=>{
      if(n===1) return empty()
      if(n%2==0){
        return of(n/2)
      }
      else{
        return of(3*n+1)
      }
    })
  )
  .subscribe(
    v=>console.log(v)
  )

テストはこちら

終わりに

いかがだったでしょうか？
他にもいくつかRxJSについての記事を書いていますのでみていただけると嬉しいです。