JavaScript と RxJS を使用したリアクティブ プログラミング

リアクティブ プログラミングは、非同期データ フローを処理するプログラミング パラダイムです。これは、変更により迅速に対応し、イベントとデータ フローをより効率的に処理するコードを作成する方法です。

リアクティブ プログラミングでは、データはイベントのストリームとして表されます。これらのイベントには、ユーザー入力からネットワーク要求、データベース更新まで、あらゆるものが含まれます。次に、プログラムはこれらのイベントをサブスクライブし、イベントが発生したときに反応します。

このプログラミング方法には多くの利点があります。まず、非同期データの操作が容易になります。従来のプログラミングでは、データがいつ利用可能になるかを知ることが難しいため、非同期データの処理が難しい場合があります。一方、リアクティブ プログラミングは、非同期データをイベントのストリームとして扱うことで、より自然な方法で処理します。

第二に、リアクティブ プログラミングはコードのパフォーマンスの向上に役立ちます。イベントをサブスクライブすると、新しいデータが利用可能になるとすぐにコードに通知されるため、データをポーリングしたり、イベントの発生を待つ必要がなくなります。

最後に、リアクティブ プログラミングは、コードの保守性を高めるのに役立ちます。データをイベントのストリームとして扱うことで、コードがより宣言的になり、コードのさまざまな部分がどのように相互作用するかを理解しやすくなります。

RxJS

RxJS は、リアクティブ プログラミング API を提供する JavaScript ライブラリです。これは、Angular や React などの多くの人気のある JavaScript フレームワークで使用される人気のあるライブラリです。

RxJS は、リアクティブ プログラミングに最適な多くの機能を提供します。これらの機能には -

が含まれます

• Observable オブジェクト− Observable は RxJS の基本的な構成要素です。これらはイベントのストリームを表し、数値、文字列、オブジェクト、配列などのあらゆる種類のデータを表すために使用できます。

• 演算子− 演算子は、Observable の変換、フィルター、結合に使用できる関数です。 RxJS では多数の演算子を使用でき、Observable でさまざまな操作を実行できます。

• スケジューラ− スケジューラは、Observable の時間を制御するために使用されます。これらを使用すると、Observable を特定の時間に起動したり、イベントの発行を遅らせたりすることができます。

RxJSをインストールする

RxJS の使用を開始するには、RxJS をインストールする必要があります。ターミナルを開いて次のコマンドを実行します -

リーリー

インストールが完了したら、RxJS リアクティブ プログラミングの力を試し始めることができます。

監視可能なオブジェクトを作成する

Observable は RxJS の中心です。これらは、サブスクライバーが観察できるデータのストリームを表します。

まず、一連の数値を出力する単純な Observable を作成しましょう -

Example

リーリー

イラスト

上記のコードでは、RxJS の Observable クラスを使用して Observable を作成します。コンストラクター内で、値を出力するためのロジックを定義します。この例では、setInterval を使用して 1 秒ごとに数値を出力します。カウントが 5 に達すると、間隔を停止し、observer.complete() を呼び出してストリームの終了を通知します。

Observable によって発行された値を観察するには、subscribe メソッドを呼び出し、コールバック関数を提供します。この場合、コールバック関数は単に出力された数値をコンソールに記録します。

＃＃＃出力＃＃＃ リーリー

RxJS の演算子

RxJS は、Observable によって発行されたデータを変換、フィルター、結合、操作できるようにする幅広い演算子を提供します。いくつかの一般的な演算子を見てみましょう。

マップ演算子

マップ演算子を使用すると、Observable によって発行された値を変換できます。たとえば、前の例を変更して、出力される数値を 2 倍にしてみましょう -

Example

リーリー

イラスト

このコードでは、パイプライン メソッドを使用してマッピング オペレーターを Observable にリンクします。マッピング演算子は、出力された各数値を 2 倍にして変換するコールバック関数を受け取ります。結果の値は、サブスクライバーのコールバック関数に渡されます。

＃＃＃出力＃＃＃ リーリー

フィルター演算子

フィルター演算子を使用すると、条件に基づいて Observable によって出力される値を選択的にフィルターで除外できます。偶数のみを出力するフィルターを前の例に追加しましょう -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。

输出

0
2
4

结论

总之，使用 JavaScript 和 RxJS 进行响应式编程提供了一种强大而有效的方法来处理异步数据流和构建响应式应用程序。通过拥抱 Observables 的概念并利用 RxJS 提供的丰富的运算符集，开发人员可以以声明式且优雅的方式轻松操作、转换和组合数据流。

通过本文讨论的示例，我们了解了如何创建 Observables、应用映射和过滤器等运算符来转换和过滤发出的值，以及订阅 Observables 来接收和处理数据。 RxJS 通过提供一致且可组合的方法简化了复杂异步流的管理。

以上がJavaScript と RxJS を使用したリアクティブ プログラミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。