【Angular】AngularにおけるRxJSについて

2024年11月18日

Angularを学び始めてまずつまづいたRxjsですが、ここで一度RxJSとはどういうものか、
そもそもリアクティブプログラミングって何なのかをまとめておきたいと思います。

リアクティブプログラミングとは？

リアクティブプログラミングは、データの流れを時間軸上で扱い、
データの変化を自動的に反映させるプログラミングパラダイムです。
従来の命令型プログラミングが「状態を変化させる」という考え方であるのに対し、
リアクティブプログラミングは「状態の変化を観察する」という考え方をします。

例えば、スプレッドシートをイメージしてください。
セルに入力された値が変更されると、その値を参照している他のセルが自動的に更新されます。
この自動更新の仕組みがリアクティブプログラミングの考え方です。

リアルタイムアプリケーション:

これらのアプリケーションでは、データが頻繁に変化し、
その変化をUIに即座に反映させる必要があります。
リアクティブプログラミングは、このようなリアルタイムなデータの更新を効率的に行うことができます。

データストリーム処理:

大量のデータが連続的に生成される環境において、
リアクティブプログラミングは、データを効率的に処理し、
リアルタイムに分析結果を表示することができます。

複雑な状態管理:

複数のコンポーネントが相互に依存し、
状態が複雑に絡み合うようなアプリケーションでは、
リアクティブプログラミングが状態管理の複雑さを軽減し、コードの可読性を向上させることができます。

ユーザーインタラクションが頻繁なアプリケーション:

ユーザーの操作に即座に反応し、
UIを動的に更新するようなアプリケーションでは、リアクティブプログラミングがスムーズなユーザー体験を提供します

RxJS (Reactive Extensions for JavaScript) は、JavaScriptでリアクティブプログラミングを実践するための代表的なライブラリです。
RxJSを使うことで、非同期処理やイベントの処理を直感的に記述できます。

Angularは、フロントエンド開発で使われるJavaScriptフレームワークの一つです。
Angularは、RxJSをコアの機能として採用しており、標準で実装されています。
リアクティブプログラミングの考え方を積極的に取り入れています。

Observable: 時間の経過とともに値を配信するオブジェクトです。
イベントストリームを表現します。
Observer: Observableから値を受け取るオブジェクトです。
next, error, completeの3つのメソッドを持ち、それぞれ値の配信、エラーの発生、ストリームの完了を通知します。
Operator: Observableを変換したり、新しいObservableを作成するための関数です。
map, filter, mergeMapなど、多様なオペレータが用意されています。