【初心者必読】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のプロパティの値を変更することができます。

 

参考文献

AngularのRxJSを使ってデータの受け渡しをする - Qiita
> この記事は(のエントリーです。 > 前記事:[...
Overview

エンジニアのスキルを底上げする本を紹介

コードの可読性を高める

自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。

ネットワークの基礎を押さえる本

ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑

基本情報技術者試験の参考書

これからエンジニアを目指す方は受けておきたい国家試験です。IPA、独立行政法人情報処理推進機構が出題している為、大学入試のような試験ですが、それ故に資格合格の為に勉強することでITの基本をしっかり抑えることができます。

(全文PDF・単語帳アプリ付)かんたん合格 基本情報技術者教科書 2019年度

自分が合格した時の勉強方法も記事にまとめているので興味があったら読んでください。

【おすすめ参考書】当時大学2年生だった僕が、3ヵ月で基本情報受かった時の勉強方法
こんにちは。KATUOです。 今回の記事では「基本情報に合格するための勉強法」について書いていこうと思います。 基本情報技術者試験について どんな資格なの 「情...

 [番外編] 低反発座布団

会社エンジニアは座って作業することがほとんどです。1日12時間くらい座席に座っている方も多いのではないでしょう。椅子の座り心地が良けばよりプログラミングに集中できると思った僕は以下のアイテムを購入して、オフィスに設置。

IKSTAR クッション 低反発 座布団 椅子 腰楽クッション オフィス 車用 自宅用 体圧分散 座り心地抜群 プレゼント 持ち運ぶ便利 ブラック

会社の座椅子なのにまるで自分が選んで買った椅子みたいに大変身。「座り心地最高」+「姿勢が安定」腰痛にも成ることもほとんどなくなりました。なのでエンジニアのみなさんにはおすすめしています。お金に余裕のある方は買って、座ってみてください。

タイトルとURLをコピーしました