RxJS —— 学習ノート

RxJS は JavaScript のリアクティブプログラミングライブラリです。非同期操作やイベント処理を解決するために、観測可能なシーケンスを使用します。Observable、Observer、Schedulers、Subjects などのコアタイプと、Array のメソッド（map、filter、reduce、every など）に触発された演算子を提供し、非同期イベントをコレクションとして処理することを可能にします。
ReactiveX は、オブザーバーパターンとイテレーターパターン、関数型プログラミングとコレクションを組み合わせて、イベントシーケンスを管理する理想的な方法を満たすために組み合わせています。
RxJS で非同期イベントの管理を解決するための基本的な概念は次のとおりです：

Observable: 値やイベントの未来のコレクションを表す呼び出し可能なアイデアです。
Observer: 値の受け渡しを監視する方法を知っているコールバックのコレクションです。
Subscription: Observable の実行を表し、主にキャンセルに使用されます。
Operators: 演算子は純粋な関数であり、map、filter、concat、reduce などの操作をサポートし、コレクションを処理する関数型プログラミングスタイルをサポートします。
Subject: EventEmitter のようなもので、値やイベントを複数の Observers にマルチキャストする唯一の方法です。
Schedulers: スケジューラは、並行性を制御するための集中的なスケジューラであり、setTimeout や requestAnimationFrame などの計算が発生するときに調整することができます。

例を挙げると
通常、イベントリスナーを登録します

document.addEventListener('click', () => console.log('Clicked!'));

RxJS を使用すると、Observable オブジェクトを作成できます

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

純粋な関数#

RxJS の強力な機能の 1 つは、純粋な関数によって値を生成する能力です。これにより、コードがエラーを起こしにくくなります。
通常、純粋でない関数を作成し、コードの他の部分が状態を乱す可能性があります。

let count = 0;
document.addEventListener('click', () => console.log(`Clicked ${++counts} times`));

RxJS を使用すると、状態を分離できます。

import { fromEvent, scan } from 'rxjs';

fromEvent(document, 'click')
	.pipe(scan((count) => count + 1, 0))
	.subscribe((count) => console.log(`Clicked ${++count} times`));

scan演算子は、配列のreduceと同様の動作をします。コールバックに公開される値を受け取ります。コールバックの戻り値は、次回のコールバックの実行時の引数となります。

ストリーム#

RxJS には、イベントがどのようにオブザーバブルオブジェクトを通過するかを制御するための操作子のセットがあります。
以下は、純粋な JavaScript を使用して、1 秒に 1 回までクリックを許可する方法です。

let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
	if (Date.now() - lastClick >= rate) {
		console.log(`Clicked ${++count} times`);
		lastClick = Date.now();
	}
});

RxJS で実装すると：

import { fromEvent, throttleTime, scan } from 'rxjs';

fromEvent(document, 'click')
	.pipe(
		throttleTime(1000),
		scan((count) => count + 1, 0)
	)
	.subscribe((count) => console.log(`Clicked ${count} times`));

他のストリーム制御演算子には、filter、delay、debounceTime、take、takeUntil、distinct、distinctUntilChangedなどがあります。

値#

Observable オブジェクトを介して値を変換することができます。
以下は、純粋な JavaScript でクリックごとに現在のマウスの x 座標を追加する方法です。

let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', (event) => {
	if (Date.now() - lastClick >= rate) {
		count += event.clientX;
		console.log(count);
		lastClick = Date.now();
	}
})

RxJS で実装すると：

import { fromEvent, throttleTime, map, scan } from 'rxjs';

fromEvent(document, 'click')
	.pipe(
		throttleTime(1000),
		map((event) => event.clientX),
		scan((count, clientX) => count + clientX, 0)
	)
	.subscribe((count) => console.log(count));

他の値変換演算子には、pluck、pairwise、sampleなどがあります。