KATUBLO | エンジニアの日常BLOG
2019年04月20日

【RXJS】Obeservable型とは?初心者が解説

こんにちは。KATUOです。

今回はバイト先で直面した訳がわからなかったjavascriptsのobservable型について書いていこうとと思います。

 

RXJSについて

RXJSとは?

僕は知りませんでした。これはangularが公式に使用している外部ライブラリです。このRXJSの中で使われているものがobservable型というものですね。RXJSですが、いつ起きるかわからない処理をコントロールする為に開発されました。javascriptを扱ったことのある方ならご存知かと思うのですが、javascriptにはいつ処理されるかわからない、レンダリングに間に合わない処理などを扱うことが多々あります。これらをの処理ラップすることでコントロールするプログラムを綺麗に書けるのがRXJSの特徴です。

 

RXJSを使うと、今までpromiseを使ってネストをしながら書いていたコードを簡単に書くことができるようになります。

 

 

上の処理は1回目のfetchで値を取ってきて、それをidを取得。そのidを使ってBの処理を行うというプログラムです。これ以上ネストが続いたら非常に読みにくいですよね。RXJSではこれらを一貫性をもったコードで書くことができます。

RXJSRXの略は何の略だかわかりますか?reactive programmingの略です。これは時間と共に変化する値に対する処理を宣言的に記述するプログラミングダイアグラムのことを指します。ダイアグラムっていうのは分岐処理とかを矢印とか四角を使って表記するやつです。時間と共に変化する値というのはタイマーとかHTTP通信で送られてくるデータなんかのことを指しますね。これは変化するが故、川の流れに例えられて別名ストリームとかと呼んだりもします。

 

RXJSを簡単に実装してみる

 

 

上のコードは実際にRXJSを実装したコードになります。

Rx.Observable.fromEvent(buttonEl, ‘click’)

にてボタンクリックをストリーム化しています。filter関数を用いて、条件を満たした場合のみsubscribeの処理を行うように実装しています。subscribe内でif分を使ってないので、どの処理も処理速度が一定になるというプログラムを書く上で良いコードが書けます。

 

observerとsubscribe

observerってなに?

observerはオブジェクトです。このオブジェクトはnext,error,completeを含みます。ではこの3つのnext,error,completeとはなんでしょう?

 

subscribeってなに?

subscribe関数はobserverを受け取ります。そういえば、僕のインターンの同期がこれについて熱く語っていました。笑  そして受け取ったあとにobserverオブジェクトの中に含まれるnext,error,completeを実行します。

 

 

↑のコードはobserverをsubscribeを受け取り、observer内のメゾットを実行するという状況を模式的に表したものです。

 

Obeservable型について

Obeservableってなに?

名前が非常にobeserverオブジェクトに似ていますが、別物です。このオブジェクトはsubscribeメゾットを持ちます。つまりobeserverオブジェクトはsubscribeオブジェクトを包含していて、それと同時にobserverオブジェクトの中に含まれるnext,error,completeもobeserverオブジェクトが含んでいることになりますね。

 

obeservableを実装してみる

 

Rx.Observable.of(1,2,3);
の引数,1,2,3がsubscribe→obeserverのnextに渡っていることかわかります。

 

obeservableを使用するメリット

非同期処理が可能になります。って非同期処理とはなんでしょうか?僕みたいな初心者はちゃんとに説明できないかたも多いのかもしれません。一言でいうと、処理が実行できるようになるのを待って、実行できるようになってから実行するといった処理ですのことを指します。そのような実装がobeservableで実装できるので見てみましょう。

 

 

出力結果をみるとafterの後にObserver1 got a value: 3が出力されているため、1000ミリ秒待って、observer.next(3)が実行できるようになってから実行していることがわかると思います。

 

いかがでしたか?簡単にobservable型について簡単に説明しました!まだまだRXJSに関しても知らないことばかりなのでどんどん調べていこうと思います!

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習を開始。現在は「ToC向け大規模サービスを運営するメガベンチャー」と「AIスタートアップ」でインターンで修行中。2020年4月からwebエンジニアとして社会人生活スタート。

Twitterアカウント

広告

スポンサー