Rx.js 理解のためのロードマップ
とりあえず現状は自分のために、備忘です。
事前知識
まずは一旦 Promise の仕組みを理解しましょう。
Promise の以下のトピックについて不安がある人は、
参考資料等をベースに Promise の理解を深めておくと良いでしょう。
- Promise の 基本処理 ( resolve と reject )
- Promise の then チェーンの仕組み
- async await の書き方
- Promise.all を利用した Promise 操作
RxJS のコンセプト
RxJS は Observable と呼ばれるデータを扱うためのライブラリです。
NgRx と RxJS は混合されがちですが、
RxJS は シンプルに Observable を扱うための実装セットであり、状態管理のライブラリではありません。
RxJS の Observable をベースに、Angular の状態管理の仕組みを構築したライブラリが NgRx です。
RxJS を学ぶ動機
構造を深く理解するのが難しい場合、とりあえず一旦は
「NgRx などの Angular における状態管理を理解するために Observable が避けて通れないから」
という理由で RxJS を学習するのも一つの選択肢です。
Observable は、Promiseと異なるアプローチで非同期処理のハンドリングを実装するものですが、
シンプルなアプリケーション実装では Promise でも十分通用することが多く、
それ故に Observable の必要性が理解しづらい場面も多々あるかと思います。
Observable と Promise の違い
Observable は Promise と異なり複数回のデータ受信を可能とする仕組みです。
通常の Ajax 通信はレスポンスは一回きりですが、
例えば WebSocket などの複数回データを受信するようなケースで Observable は非常に有用です。
その他 setInterval などの定期的に発火するイベントや、
Input イベントの処理など 複数回発行されるイベント処理にも、便利な記法を提供してくれます。
また、様々な非同期処理を宣言的に加工する、多種多様なオペレータが用意されているのも、RxJS の魅力の一つです。
Promise で、then の内部で条件分岐しながら記載していたような各種処理も、
delay や retry , catchError などの各種オペレータを利用して、シンプルに記述することができます。
RxJS の学習方法
RxJS のサンプルコードは、見ただけではわかりにくいものも多いため、
実際にコードを動かしながら動作を確認してみることで、より一層の理解を深めることができます。
Node ファイルを作成して実行する
RxJS のコードはある程度ユニバーサルに作成されており、
シンプルに js ファイルを作成して node コマンドで実行しながらその挙動を確認することもできます。
ライブラリの読み込みに import を利用する場合には、拡張子を mjs にしておくことで、
import 周りのエラーを回避することができます。
なお、ajax などの一部関数は ユニバーサルに実装されていない部分もあるため注意が必要です。
Stackblitz を利用する
RxJS のサンプルコード記述で一番オススメなのは、Stackblitz の活用です。
RxJS 向けのテンプレートも用意されており、簡単に始めることができます。
Observable の使い方
基本的な使い方を理解する
Observable の基本的な使い方は以下の資料を確認してください。
基本的な Observable の生成や subscribe を用いて値を受け取るフローなどを理解することが可能です。
- Promise の各種処理を Observable でどう書くかを理解する
TBA
様々な Observable の作り方
- Observable の creation
TBA
Rx.js オペレータの活用
- 様々な オペレータ
Subject を利用する
- Subject の理解と Angular における活用
Discussion