ホームページ >ウェブフロントエンド >jsチュートリアル >RxJS で非同期 JavaScript をマスターする

RxJS で非同期 JavaScript をマスターする

Mary-Kate Olsenオリジナル: 2024-12-12 10:59:10942ブラウズ

Master Asynchronous JavaScript with RxJS

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

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

RxJSとは何ですか?

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

中心となる概念

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

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

寒冷観測点と高温観測点

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

コールドオブザーバブル はオンデマンドで作成され、サブスクライブされた場合にのみ値の発行を開始します。新しいサブスクリプションごとに、オブザーバブルの新たな実行がトリガーされます。たとえば、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.

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

演算子の使用

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

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

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

RxJS を使用する理由

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

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

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

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

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

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

簡単な Observable を作成してサブスクライブしましょう。

yarn add rxjs

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

RxJS の演算子

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

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

実際の使用例

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

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: 特定の条件を満たす値のみを出力します。たとえば、イベントのストリームをフィルタリングして、特定の領域内のマウスクリックのみを処理することができます。

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

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

merge: 複数のオブザーバブルを 1 つのストリームに結合し、到着時にすべてのソースから値を出力します。これは、ユーザー入力やサーバー応答など、さまざまなソースからのイベントを処理する場合に役立ちます。

npm install rxjs

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

yarn add rxjs

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

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

RxJS でのエラー処理

RxJS は、監視可能なストリーム内のエラーを管理するための堅牢なメカニズムを提供します。

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

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

import { of } from "rxjs";

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

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

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

実際の応用例

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

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

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

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

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

よくある落とし穴

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

結論

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