KATUBLO
2019年05月01日

【ReactiveX入門】ReactiveXとは?初心者がサンプルコードを用いてわかりやすく解説

こんにちは。KATUOです。今回の記事では「ReactiveX」の基本的な部分をサンプルコードなどを使いながら解説していこうと思います。

 

ReactiveXとは?

一言でいうなら「Reactive Programmingができるライブラリ」ですね。

 

特徴として、streamというものとobserver patternという考えを使ってデータの受け渡し・処理し、functionalな実装にすることで非同期な処理もハンドリングしやすいなどが理由として挙げられます。また、数多くのプログラミング言語や環境で開発ができるようにライブラリを提供しているためです。

参考文献:「ReactiveXとは?RxJSの入門と導入手順」

https://creatorhiro.com/archives/312

 

非同期な処理を求められている現代の開発において、このライブラリを使うことによって開発の負荷が軽減されるってことで最近流行っているらしいです。

 

 

ReactiveX 公式サイト

こちらが公式サイトになります。

http://reactivex.io/

「Language」→「RXJS」

でRXJSをクリックして、githubに飛べます。実際にサンプルコードを打って練習するためにローカルにcloneしましょう。

 

開発環境を構築してみる

 

この「DesignCourse」の動画を参考にして解説していくので、じっくりみたい方はこちらをどうぞ。

 

webpack.config.jsを作成

webpack.config.jsを以下のコードを入力して作成します。webpack.config.jsはwebpackを利用するために設定しなければいけないファイルです。以下のサイトが非常に参考になりそうです。

https://qiita.com/soarflat/items/28bf799f7e0335b68186

参考文献:「webpack 4 入門」

 

今回の設定は以下の通り。

 

tsconfig.jsonを作成

 

index.htmlを作成

 

code.ts(rxjsを各ファイル)を作成

「src」というフォルダを作ったのち、「code.ts」というRXJSのサンプルコードを記述するファイルを書きます。

 

 

以下のコマンドで実行。

ブラウザでhttp://localhost:8081/にアクセスすると

こんな感じでconsole.logで出力したRxをみることができます。

 

RXJSのStream(ストリーム)の概念

 

Stream(ストリーム)とは

Rxではストリームと呼ばれるものを扱います。ストリームはデータの流れるシーケンスであり、時間軸も存在しています (非同期とか考えないならスルーしてもOK)。ストリームはObservableとも呼ばれ、型のある言語バージョンのRxであれば、Observable<T>型でT型のデータが流れるストリームになります。ちなみにストリームに流れるデータの事をメッセージと呼びます。

 

https://qiita.com/erukiti/items/6a82dfd3506e9773d592

参考文献:「RxJSで始めるRx(Reactive Extensions)入門1」

 

ストリーム=データの流れるシーケンス=Obeservable

*シーケンス:並んでいる順番で処理を行うこと

 

RXJSの代表的なオブジェクト

Observer

Observer=オブジェクトであり、「next」「error」「complete」の3つの関数を包含します。

 

Subscribe

Subscribe=関数であり、Observerを受け取り、Observerの中にある関数(next,error,complete)を実行します。

 

RXJSの理解のためのサンプルコードを解説

 

 

createでoveservableを生成

「next」「error」「complete」を使用して、oveservableを生成します。今回のサンプルコードにおいては、「next」を使用して、subscribeで呼ばれたときの実行処理を書いています。また「complete」を書くことでそこで処理を終了することができます。よって「これは送信されません」の部分は処理されないことを意味します。

 

subscribeで実行

obeservableはsubscribeで実行することができます。[1]~[3]の処理をみてみると、[1]の部分でnextの部分を処理、[2]の部分でエラーが会った時の処理、[3]の部分で終了した時の処理を書いています。

 

ではこのプログラムの実行結果をみてみましょう。

 

 

↑のような処理結果になりました。

今回は切りがいいのでここまで。次回もまたRXJSについて書いていこうと思います。

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

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

大学生必見就活イベント