KATUBLO | エンジニアの日常BLOG

プログラミング、数学、旅行などを中心に役立つ情報をお届け

2019年06月14日

【初心者必読】AngularのRxjsの使い方をサンプルコードで解説

Rxjsについて

Rxjsって何

reactive programing の略です。reactive programingというのは「いつ起こるかわからない非同期の処理を綺麗に書くこと」を可能にしてくれる概念、ライブラリのことを指します。

ストリーム(stream)の概念を理解する

ストリーム(stream)はユーザーのボタンのクリックや、タイマー、APIで取得するデータが流れる経路の部分を指します。Rxjsではこの川のような経路にそって流れてくるデータやイベントを順番に処理します。

observable

observableの役割

英語の直訳は「観察できる」「識別できる」という意味を持つobservableですが、Rxjsにおいての役割はストリームから流れてくるデータやアクションを監視して、observerにデータやアクションを渡します。これがobservableの大まかな役割です。

observer

3つのメソッドを抑える

まずobeserverというオブジェクトを押さえておきましょう。obeserverは以下の3つのメソッドを持ちます。

・next

・error

・complete

これらはsubscribe(後に説明)にobeserverを引数として渡して、実行されます。ではそれぞれが呼び出されるタイミングがあるので整理しておきましょう。

 

・next:データが流れてくる度に呼び出される

・error:エラーが発生した時に呼び出される

・complete:処理が完了した時に呼び出される

 

呼び出しのタイミングの話は置いておいて、observerをコードでさくっと実装してみるとこんな感じ。

 

subscribe

subscribeとは

subscribeというのは先ほど紹介したobeserverを受け取って、その中の next, error , completeを実行してくれる関数です。ここでちょっと紛らわしいのですが、subscribeといのは「obeservable」の中に含まれるメソッドです。「obeserver」と「obeservable」は名前は似ていますが異なるものなのでご注意を。

 

Subject

Subjectとは

subjectを使うと任意のタイミングでデータを流すことが可能となります。通常のobservableではインスタンス生成時にしか、データを流すことできないのです。次に紹介するコードだとsubjectを呼び出す毎にデータを流すことができることが確認できます。

 

Subjectを使ったコード

 

implementsを使うことでインターフェイスを実装することができます。これはclassのextendに似ています。ちなみに今回は < number > と書かれているので流す値の型はnumberですね。

 

他のコンポーネントのデータを使用

サービスをDIすることで他コンポーネントのデータを使用

providedIn: ‘root’とすることでシングルトンのサービスならば
どこからでもデータを取得することが可能になります。

 

他コンポーネントのプロパティを変える

ログインとログアウト状態を判別するboolean値をobservarbleバターンを使って実装してみます。

 

データやりとりの中心となるSessionService

 

このserviceでboolean値であるloginプロパティの値をlogin、logoutメソッドで変えています。

 

他コンポーネントでserviceを呼び出す

 

 

それぞれのコンポーネントからserviceのプロパティの値を変更することができます。

 

参考文献

https://qiita.com/Yamamoto0525/items/efc0e5617c7427fea86a

http://reactivex.io/rxjs/manual/overview.html#subscribing-to-observables

 

Rxjsの技術書

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

プロフィール

@KATUO

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

広告

特集記事