初心者のための RxJS 入門

---

1 はじめに

RxJSとは何ですか? 一般化を一言で表すと、「RxJS は JavaScript 用の ReactiveX ライブラリであり、シーケンスの変化を観察することで非同期イベント処理を習得できる優れたツールです」となります。

RxJS を学習する前に、まず次の前提知識を理解する必要があります。

• リアクティブ拡張機能(Rx)

  は、監視可能なシーケンスと LINQ スタイルのクエリ演算子を使用して、非同期およびイベントベースのプログラムを作成するためのライブラリです。

• リアクティブX

  これは、オブザーバー パターン、イテレーター パターン、および関数型プログラミングの最良のアイデアを組み合わせたものです。

• リアクティブプログラミング

  非同期データ フローを使用したプログラミングです。

• ストリーム

  ストリーム - 安価でどこにでも存在し、あらゆるものをストリームにすることができます。たとえば、変数、ユーザー入力、属性、キャッシュ、データ構造はすべてストリームと呼ばれます。

  プログラム的な例を挙げると、オブザーバーがクリック イベントをサブスクライブしている場合、ユーザーがページ上でマウスをクリックすると、クリックするたびにクリック イベントがトリガーされ、クリック イベント データ (マウス イベント) がオブザーバーに送信されます。または、ユーザーが連続して複数回クリックすると、オブザーバーは一連のイベント データを受信します。この一連のイベント データをストリーム (Stream) と呼びます。

  非同期イベントの別の例を挙げると、非同期イベントを通じてサーバーに Ajax リクエストを送信し、サーバーから応答データを取得します。このプロセス中に、複数の Ajax リクエストが連続して送信される可能性があり、応答データはクライアントに送信されます。異なる時間と異なる順序で返されます。このようなプロセスがストリーミングの概念です。

非同期イベントでは、イベント応答の時間と順序が不確実であるため、JavaScript では非同期イベントの処理に一定の困難が生じ、バグが発生しやすくなりますが、RxJS はそのような非同期イベントの処理を簡単に支援します。

要約すると、RxJS を使用する目的は、非同期環境でイベント データを効果的に管理することです。

RxJS が非同期またはイベントの処理に使用できる JavaScript ライブラリのセットであることはわかっていますが、非同期またはイベントの種類は何でしょうか?

• 非同期

  Ajax/XHR/フェッチ API

  Service Worker/ノードストリーム

  setTimeout/setInterval

  約束

• イベント

  さまざまな Dom イベント (click/dbclick/keyup/mousemove...)

  CSSアニメーションイベント（CSS3transitionEndイベント）

  HTML5 地理位置情報/WebSocket……

2. 中心となる概念

• 観測可能な観測可能なオブジェクト

  将来生成される一連のイベント データ (観測オブジェクト) を表します。上記の例から、クリック イベントは Observable です。つまり、クリック イベントがトリガーされると、何らかのイベント データ (ストリーム) がオブザーバーに送信されます。

• オブザーバー オブザーバー

  観測結果を受け取るために使用されるオブジェクトを表します(Observerはイベントデータ、つまりStreamを受け取ります)。

• サブスクリプション

  Observable の実行を表し、主にサブスクライブ解除に使用されます。

• オペレーター オペレーター

  これは一連のイベント データ収集を処理するために使用され、Operator が一連のフィルタリング、スクリーニングなどの操作を通じて Observable を処理し、最終的にイベント データをオブザーバーに送信することが理解できます。

  一般的な演算子には、map/filter/concat/ flatMap... が含まれます。

• サブジェクト サブジェクト オブジェクト

  主に、受信したイベント データを複数のオブザーバーにブロードキャストするために使用されます。

• スケジューラ スケジューリング コントローラ

  これは、複数のイベント間のデータを集中管理およびスケジュールし、イベントの同時実行性を制御するために使用されます。

3. 基本的な操作手順

上記のコードは、作成オペレーター (Creation) の API (間隔) を使用して RxJS を通じて Observable を作成することを意味し、この Observable は 0.5 秒ごとに (0 から開始して) 数値を出力します。次に、フィルター オペレーターがパイプ (中国語は水道管を意味し、流れの概念と組み合わせることで理解できます) を介して、最初の 4 つのデータのみがオブザーバーに送信されます。オブザーバー (console.log) は、subscribe を通じて Observable によって送信されたデータをサブスクライブします。

上記のコードを実行した結果は次のようになります。

上で述べた中心的な概念の中で、サブスクリプションの概念について言及しましたが、ここで理解を深めるのに役立つ例を示します。ここで、上記のコードで take メソッドを使用して、最初の 40 データを取得するのではなく、最初の 4 データのみを取得し、観測結果を subs に保存します。ここで、subs はサブスクリプションと呼ばれるものです。最後に、subs を通じて unsubscribe メソッドを呼び出して、オブザーバーと監視可能なオブジェクトの間のサブスクリプション関係をキャンセルします。つまり、監視可能なオブジェクトによって送信されたサブスクリプション データを受け入れなくなります。

上記のコードは、ES5 の構造化代入を使用して簡素化することもできます。

ES モジュールを使用してコードを簡素化することもできます。

以上がRxJSの基本的な動作処理ですが、どのようにコードを書けばよいのでしょうか？

1. 監視可能な Observable オブジェクトの作成

   var clicks$ = rxjs.fromEvent(document,'click'); //在 RxJS 的命名方式中，通常以 $ 结尾的变量都代表这个变量是可观察物件
   

2. オブザーバー Observer オブジェクトを作成する

   var observer = {
         
          next:(x) => console.log(x) }; //观察者可以放函数进去，也可以放一个物件进去，这个物件有三种属性，其中一种属性是 next，next 会取出下一笔资料
   

3. サブスクリプション オブジェクトを作成します (Observable オブジェクトをサブスクライブし、Observer オブザーバー オブジェクトを渡します)。

   var subs$ = clicks$.subscribe(observer);
   

4. 購読オブジェクトの購読を解除する

   subs$.unsubscribe();
   

上記のコードを実行すると、ページ ドキュメントのスコープ内でマウスがクリックされるたびに、コンソールに MouseEvent イベントが出力されます。ここで注意すべき点は、Observable はオブザーバーによってサブスクライブされる必要があり、Observable のイベントがトリガーされることです。サブスクライブされたオブザーバーがなければ、Observable はイベント データを生成しません。

上記は意味を明確にした書き方で、以下は簡単な書き方です。

1. 監視可能な Observable オブジェクトの作成

   var clicks$ = rxjs.fromEvent(document,'click'); 
   

2. サブスクリプション オブジェクトの作成 (Observable オブジェクトをサブスクライブし、オブザーバー オブジェクトを自動的に作成します)

   var subs$ = clicks$.subscribe((x) => console.log(x));
   

3. 購読オブジェクトの購読を解除する

   subs$.unsubscribe();
   

4. RxJS は演算子を介してデータをどのようにフィルタリングするか

ここで、クリック イベントをサブスクライブし、ClientX が 1000 未満のすべてのイベントを返したいとします。コードは次のとおりです。

1. 監視可能な Observable オブジェクトの作成

   var clicks$ = rxjs.fromEvent(document,'click');
   

2. フィルター演算子を適用する

   const {
         
          filter } = rxjs.operators;
   clicks$ = clicks$.pipe(filter(x => x.clientX <1000));
   

3. サブスクリプション オブジェクトの作成 (Observable オブジェクトをサブスクライブし、オブザーバー オブジェクトを自動的に作成します)

   var subs$ = clicks$.subscribe((x) => console.log(x));
   

4. 購読オブジェクトの購読を解除する

   subs$.unsubscribe();
   

ClientX が 1000 未満であるすべてのイベントで最初の 4 つのデータのみを返す必要がある場合は、演算子部分の操作を変更する必要があります。

var subs = clicks$.pipe(
    filter(x => x.clientX <1000),
    take(4)
).subscribe((x) => console.log(x));

ここで、印刷できるのは適格なデータ ストリームのみであり、テイク オペレータが十分な 4 つのイベントを収集すると、サブスクライブ解除操作を自動的に実行することに注意してください。

5. RxJSサブジェクト(Subject)の使い方

1. サブジェクト オブジェクト (Subject を作成し、ブロードキャストにはこのサブジェクト オブジェクトに依存します) を作成します。

   var subject = new rxjs.Subject();
   

2. 監視可能な Observable オブジェクトの作成

   var clicks$ = rxjs.fromEvent(document,'click');
   

3. 最大 2 つのイベント データが取得されたときに完了するように Observable オブジェクトを設定します

   clicks$ = clicks$.pipe(take(2));
   

4. すべてのクリック$がサブジェクトオブジェクトによってブロードキャストされるように設定します

   clicks$.subscribe(subject);
   

5. 最後に、サブジェクトを使用して Observer オブジェクトを作成します。

   var subs1$ = subject.subscribe((x) => console.log(x.clientX));
   var subs2$ = subject.subscribe((x) => console.log(x.clientX));
   

6. 購読オブジェクトの購読を解除する

   subs1$.unsubscribe();
   subs2$.unsubscribe();
   

Subscription イベントを通じて、データは subs1$ と subs2$ にそれぞれ 2 回送信されるのではなく、サブジェクトに 1 回送信されるだけで済みます。

6. 大理石の図表

マーブルダイアグラムは、RxJS の操作オペレーターの操作プロセスをうまく説明できます。

• 取った

  

• 地図

  

• 連結

  

このサイトでさらに大理石の図を参照してください。

アニメーションの大理石図もこのサイトで見ることができます

7. オペレーターの選び方

RxJS には多くの演算子があり、どれを選択すればより効果的であるかわからない場合がありますが、このWeb サイトの対話型の質問と回答を通じて適切な演算子を選択できます。

演算子の分類:

---

この記事は、ステーション b での1 時間の RxJS 入門ビデオから編集されたものです。