TL;DR: RxJS は、非同期データ ストリームを管理し、イベント処理や API 対話(huà)などの複雑な操作を簡(jiǎn)素化するための強(qiáng)力な JavaScript ライブラリです。オブザーバブルを使用してデータ ストリームを表し、オペレーターを使用してデータ ストリームを変換および操作し、サブスクリプションを使用して発行された値に反応します。

最新の JavaScript 開(kāi)発の動(dòng)的な狀況では、非同期操作を効率的に処理することが最も重要です。 RxJS (JavaScript のリアクティブ拡張機(jī)能) は、この課題に対処するために開(kāi)発された強(qiáng)力なライブラリであり、開(kāi)発者が非同期データ ストリームを優(yōu)雅かつ正確に管理できるようにします。

RxJSとは何ですか?

RxJS は、開(kāi)発者が監(jiān)視可能なシーケンスを使用して非同期およびイベントベースのプログラムを操作できるようにするライブラリです。その中心には、データ ストリームと変更の伝播を中心としたパラダイムであるリアクティブ プログラミングの概念があります。このアプローチは、ユーザー インタラクション、データの取得、アプリの狀態(tài)変化などのさまざまなイベントをデータの流れるストリームとして扱うことができるユーザー インターフェイスを扱う場(chǎng)合に特に役立ちます。リアクティブ プログラミングでは、各イベントに直接応答するのではなく、ストリーム內(nèi)で変更が発生したときにアプリがどのように動(dòng)作するかを宣言することが開(kāi)発者に推奨されます。

中心となる概念

RxJS の力を理解するには、その基本的な構(gòu)成要素を理解することが不可欠です。

• Observables: Observable は RxJS の中心であり、時(shí)間の経過(guò)とともに値を出力するデータのソースを表します。イベント、約束、既存のデータなど、さまざまなソースから作成できます。オブザーバブルは、データが流れるパイプラインと考えてください。
• オブザーバー: オブザーバーは、オブザーバブルをサブスクライブし、発行された値にどのように反応するかを定義するオブジェクトです。これはリスナーとして機(jī)能し、新しいデータが到著したときに実行するアクションを指示します。
• サブスクリプション: サブスクリプションは、オブザーバーとオブザーバブル間の接続を表します。これは、オブザーバーがオブザーバブルから値を受け取ることを許可する契約のようなものです。 Observable をサブスクライブすると、明示的にサブスクライブを解除するまでデータの受信が開(kāi)始されます。
• 演算子: 演算子は、オブザーバブルの変換、フィルタリング、および組み合わせを可能にする純粋な関數(shù)です。これらは修飾子として機(jī)能し、観測(cè)可能なストリームを流れるデータを形成および調(diào)整します。これらは、元のソースを変更せずにデータ ストリームを操作する宣言的な方法を提供します。

寒冷観測(cè)點(diǎn)と高溫観測(cè)點(diǎn)

RxJS のオブザーバブルは、コールドまたはホットに分類(lèi)できます。

• コールドオブザーバブル はオンデマンドで作成され、サブスクライブされた場(chǎng)合にのみ値の発行を開(kāi)始します。新しいサブスクリプションごとに、オブザーバブルの新たな実行がトリガーされます。たとえば、HTTP リクエストから作成されたオブザーバブルは、サブスクライバーが関心を示した場(chǎng)合にのみリクエストを行うため、コールドとみなされます。
• ホットオブザーバブル はサブスクリプションとは獨(dú)立して存在し、誰(shuí)かがリッスンしているかどうかに関係なく値を発行します。これらは、すべての加入者間で共有される継続的なデータ ストリームを表します。例としては、観察者の數(shù)に関係なくデータ ストリームが継続するマウス イベントや株式相場(chǎng)などが挙げられます。

簡(jiǎn)単な例でこれらの概念を説明しましょう。

オブザーバブルの作成

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

この例では、first5Numbers$ は 0 から 4 までの數(shù)値を出力するコールド オブザーバブルです。subscribe メソッドはオブザーバーをオブザーバブルにアタッチします。 next メソッドは、オブザーバブルから値を出力するために使用されます。 complete メソッドは、ストリームの終了を通知します。

演算子の使用

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

ここでは、毎秒値を出力する監(jiān)視可能な first5SpacedNumbers$ を作成します。 take 演算子は、ストリームを最初の 5 つのエミッションに制限するために使用されます。

RxJS を使用する理由

RxJS はいくつかのシナリオで威力を発揮します。

• 複雑な非同期操作の処理: RxJS は、複雑な非同期フローを管理するための構(gòu)造化されたアプローチを提供し、コールバック地獄や深くネストされた Promise を防ぎます。その宣言的な性質(zhì)により、複雑なロジックを簡(jiǎn)潔に表現(xiàn)できるため、コードがより読みやすく、保守しやすくなります。
• リアルタイム アプリケーション: ホット オブザーバブルのサポートにより、RxJS はチャット アプリ、株価表示ツール、共同編集ツールなどのリアルタイム アプリの構(gòu)築に優(yōu)れています。
• イベント処理: RxJS は、ユーザー インタラクション、DOM イベント、その他の非同期イベントの処理を簡(jiǎn)素化し、イベントの伝播と応答を管理する合理的な方法を提供します。

RxJS と Promise および async/await の比較

Promise と async/await は単一の非同期操作を処理するのに役立ちますが、RxJS は非同期イベントのストリームの管理を目的としています。比較は次のとおりです:

• Promises: 単一の値で解決され、主に 1 回限りの非同期タスクに役立ちます。
• Async/await: Promise を操作するための、より同期的に見(jiàn)える構(gòu)文を提供しますが、それでも個(gè)々の非同期操作に重點(diǎn)を置きます。
• RxJS: 時(shí)間の経過(guò)とともに複數(shù)の値を処理し、これらの値を変換、フィルター、結(jié)合する演算子を提供します。データが連続的にまたはバーストで到著するシナリオに最適です。

RxJS のセットアップ

インストール

npm または Yarn を使用してプロジェクトに RxJS をインストールできます。

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

または

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

または、CDN リンクを介して HTML ファイルに RxJS を含めることもできます。

npm install rxjs

簡(jiǎn)単な Observable を作成してサブスクライブしましょう。

yarn add rxjs

この例では、of 演算子を使用して、値 1、2、および 3 を出力するオブザーバブルを作成します。

RxJS の演算子

オペレーターは RxJS のバックボーンであり、データ ストリームを操作するための豊富な語(yǔ)彙を提供します。演算子のいくつかのカテゴリを次に示します:

• 作成演算子: of、from、interval、fromEvent など、さまざまなソースからオブザーバブルを作成します。
• 変換演算子: map、 flatMap、switchMap、scan などの出力値を変更します。
• フィルタ演算子: filter、distinctUntilChanged、take などの基準(zhǔn)に基づいて値を選択的に出力します。
• 結(jié)合演算子: merge、concat、zip、combineLargeなど、複數(shù)のオブザーバブルをマージまたは結(jié)合します。

実際の使用例

キーオペレーターの実世界の例をいくつか見(jiàn)てみましょう:

• map: オブザーバブルによって放出された値を変換します。たとえば、map を使用して、HTTP 応答から特定のデータを抽出できます。

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

• filter: 特定の條件を満たす値のみを出力します。たとえば、イベントのストリームをフィルタリングして、特定の領(lǐng)域內(nèi)のマウス クリックのみを処理することができます。

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

• merge: 複數(shù)のオブザーバブルを 1 つのストリームに結(jié)合し、到著時(shí)にすべてのソースから値を出力します。これは、ユーザー入力やサーバー応答など、さまざまなソースからのイベントを処理する場(chǎng)合に役立ちます。

npm install rxjs

• switchMap: ソース オブザーバブルが値を発行すると、新しい內(nèi)部オブザーバブルをサブスクライブし、以前の內(nèi)部オブザーバブルをキャンセルします。これは、ユーザー入力によってトリガーされる API 呼び出しのような、最新のリクエストのみを考慮するシナリオに役立ちます。

yarn add rxjs

• catchError: 監(jiān)視可能なストリーム內(nèi)でエラーを適切に処理します。これにより、エラーをキャッチしたり、ログ記録や再試行などのアクションを?qū)g行したり、オプションで新しいオブザーバブルを返してストリームを継続したりすることができます。

<script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.min.js"></script>

RxJS でのエラー処理

RxJS は、監(jiān)視可能なストリーム內(nèi)のエラーを管理するための堅(jiān)牢なメカニズムを提供します。

• retry: オブザーバブルがエラーを発行した場(chǎng)合、retry オペレーターはソース オブザーバブルを再サブスクライブし、エラーからの回復(fù)を試みます。再試行回?cái)?shù)を指定したり、エラーの種類(lèi)に基づいて再試行ロジックを適用したりできます。
• catchError: 前述したように、catchError オペレーターを使用すると、エラーを適切に処理したり、ログに記録したり、エラーをデフォルト値で置き換えたり、ストリームを継続するために新しいオブザーバブルを返したりすることもできます。
• finalize: このオペレーターは、オブザーバブルが正常に完了するかエラーが発生するかに関係なく、コールバック関數(shù)を?qū)g行します。リソースのクローズや狀態(tài)のリセットなどのクリーンアップ タスクに役立ちます。

RxJS でのエラー処理については、次のコード例を參照してください。

import { of } from "rxjs";

const myObservable$ = of(1, 2, 3);

myObservable$.subscribe((value) => {
  console.log(value); // Outputs: 1, 2, 3
});

この例では、エラーが発生した場(chǎng)合、オブザーバブルは 2 回再試行を試みます。すべての再試行が失敗した場(chǎng)合、catchError オペレーターがエラーを処理します。 finalize オペレーターは、オブザーバブルが完了するかエラーが発生したときにメッセージをログに記録します。

実際の応用例

実際のシナリオで RxJS をどのように適用できるかを見(jiàn)てみましょう:

• フォーム検証: RxJS は、ユーザーが入力するとリアルタイムで検証が行われるリアクティブ フォームの作成に適しています。オブザーバブルを使用すると、入力の変更を監(jiān)視し、検証ルールを適用し、即時(shí)フィードバックを提供できます。
• API ポーリング: RxJS はポーリング メカニズムの実裝を簡(jiǎn)素化します。 interval や switchMap などの演算子を使用して API から定期的にデータを取得し、応答やエラーを適切に処理できます。
• リアルタイム チャット アプリ: RxJS は、リアルタイム チャット アプリの構(gòu)築に最適です。ホットオブザーバブルはメッセージのストリームを表すことができ、map や filter などの演算子を使用してメッセージを処理および表示できます。

ヒントとベストプラクティス

プロジェクトで RxJS を効果的に利用するには:

• 分解: 複雑なロジックを、演算子を使用して結(jié)合できる、より小さく管理しやすいオブザーバブルに分解します。
• エラー処理: catchError と retry を使用してエラーを適切に処理し、アプリの復(fù)元力を強(qiáng)化します。
• Unsubscribe: オブザーバブルが不要になったときにサブスクライブを解除することで、メモリ リークを防ぎます。サブスクリプション管理を簡(jiǎn)素化するには、Angular の takeUntil や async パイプなどのツールの使用を検討してください。
• テスト: TestScheduler などの RxJS テスト ユーティリティを利用して、監(jiān)視可能なロジックを徹底的にテストします。

よくある落とし穴

• RxJS の使い過(guò)ぎ: RxJS は強(qiáng)力ですが、不適切に使用すると複雑さが増す可能性があります。その強(qiáng)みが本當(dāng)に有益であるシナリオに固執(zhí)してください。
• メモリ リーク: オブザーバブルのサブスクライブ解除を怠ると、メモリ リークが発生する可能性があります。常にサブスクリプションを適切に管理してください。

結(jié)論

ブログを読んでいただきありがとうございます！ RxJS は、JavaScript アプリで非同期データ ストリームを処理するための強(qiáng)力かつエレガントな方法を提供します。そのリアクティブ プログラミング モデルと豊富な演算子セットを組み合わせることで、開(kāi)発者は応答性が高く、スケーラブルで保守可能なアプリを構(gòu)築できます。オブザーバブル、オブザーバー、オペレーターの概念を受け入れることで、RxJS の可能性を最大限に引き出し、JavaScript 開(kāi)発スキルを向上させることができます。最初は學(xué)習(xí)曲線(xiàn)が急なように見(jiàn)えるかもしれませんが、コードの明瞭さ、保守性、効率性の點(diǎn)で得られる成果は、努力する価値があります。

関連ブログ

• Axios と Fetch API?適切な HTTP クライアントの選択
• TypeScript ユーティリティの種類(lèi): 完全ガイド
• 単體テスト用の API モッキング: 開(kāi)発者のためのベスト プラクティス
• JavaScript の新機(jī)能: ECMAScript 2024 (エディション 15)

以上がRxJS で非同期 JavaScript をマスターするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。