PR：この記事にはアフィリエイトリンクが含まれます。
RxJSの本を探すと、Observableやオペレーター、非同期処理と専門用語が次々に出てきます。どれから読むと実務に結び付くのか、迷いますよね。TypeScriptで画面やAPIを扱う人には、概念をコードで確かめられる本が役立ちます。
ここではRxJS 5の入門書からAngular 18の実践書まで4冊を取り上げました。扱う範囲もページ数も異なるため、まず一覧で全体をつかむと、各書の特徴を見通しやすくなります。
4冊の早見表
刊行年やページ数に加え、各書が扱うテーマも並べました。RxJS 5を明示する本とAngularアプリから学ぶ本があります。気になるテーマを見つけてください。
| 書名 | 刊行・分量 | 主なテーマ |
|---|---|---|
 RxJS in Action | 2017年・352ページ | RxJS 5、ストリーム、テスト、React・Redux連携 |
 Reactive Programming with RxJS 5 Untangle Your Asynchronous JavaScript Code | 2018年・144ページ | RxJS 5、ES6、Schedulers、非同期テスト |
 Build Reactive Websites with RxJS Master Observables and Wrangle Events | 2018年・194ページ | イベント、AJAX、switchMap、Angularの実例 |
 Reactive Patterns with RxJS and Angular Signals | 2024年・254ページ | Angular 18、Signals、テスト、購読管理 |
全体をじっくり学ぶ本、短く要点を押さえる本、画面イベントやAngularを例にする本。Observableを扱う点は共通でも、学びの入り口はさまざまです。読みたい範囲が見えてきますね。
型とストリーム
TypeScriptでRxJSを使うときは、値の型と、その値が時間に沿ってどう流れるかを一緒に考えます。たとえば Observable<User[]> は、ユーザー一覧を何度か通知する流れとして扱える型です。
Promiseは基本的に一度の成功か失敗を表します。一方、Observableなら入力イベントやHTTP応答のように、時間とともに届く値をまとめられます。この違いを押さえると、オペレーターの役割も読み解きやすくなります。
型推論も助けになります。pipe の中を通る値の形を追いやすく、検索語の string を User[] に変える処理なら、入力と出力の食い違いを見つけやすいでしょう。画面側の取り違えを早めに防げます。
Observableの基本
Observableは値が届く流れを表す仕組みです。クリックや入力欄の変更、一定間隔の通知、HTTP応答まで、異なる種類の非同期処理を共通の形で扱えます。組み合わせるときに力を発揮します。
多くのObservableは subscribe して初めて処理が始まります。値の流れを pipe で組み立て、最後に subscribe で画面表示やログ出力へつなぐ。まずはこの形を押さえておきましょう。
購読は始めたら終わりまで面倒を見るものです。画面を閉じたあとも購読が残ると、不要な処理やメモリーリークにつながりかねません。購読解除まで一つの処理として考えるのが大切ですね。
オペレーターの役割
オペレーターはストリームに届く値を変換したり、通す値を絞ったりする関数です。map で値の形を変え、filter で条件に合う値を残す。配列操作に似ているため、理解の入り口にしやすいでしょう。
検索欄では、連続入力を少し待つ debounceTime や、同じ値の重複を抑える distinctUntilChanged が使われます。一文字ごとに検索せず、入力のまとまりを扱えるんです。
非同期処理をつなぐ switchMap、順番に処理する concatMap、並行して処理する mergeMap。名前は似ていても動きは別です。値がいつ届き、どの処理が続くかを図で追うと、違いを理解できます。
非同期処理の整理
検索欄なら、入力を受け取り、少し待って検索し、結果を画面へ流す構成が考えられます。新しい入力が来たとき古い検索結果を採用したくない場合は、switchMap が役立ちます。入力から結果まで一本の流れで追えるのも利点です。
すべてを switchMap に任せるわけにはいきません。最新の検索結果だけ欲しい場面と、注文処理のように操作を順番に完了させたい場面では、適切なオペレーターが異なります。判断の基準は処理の要件です。
エラー処理もストリーム設計の一部です。失敗した時点で全体が止まるのか、次の入力を受け続けるのかを考え、catchError などを置きます。非同期テストではSchedulerやマーブル図が、時間と値の流れを確かめる助けになります。
RxJS in Action
RxJS in Actionは2017年刊、352ページのペーパーバックで、対象はRxJS 5です。ストリームの変換や合成から非同期処理、エラー処理、単体テストへと進みます。理論と実例を重ねながら、リアクティブな考え方を学べます。
ReactやReduxとの連携も扱います。Observableの知識をWebアプリケーションの構成に結び付けたい人におすすめです。関連テーマまで腰を据えて読みたい読者に合います。
参考価格は公式希望小売価格で49.99米ドルです。実売価格は時期や販売店で変わります。RxJS 5が対象なので、現行プロジェクトのAPIとの差を確かめながら読むと、実務に生かしやすいでしょう。
144ページの入門書
Reactive Programming with RxJS 5 Untangle Your Asynchronous JavaScript Codeは2018年刊、144ページ。RxJS 5とES6を対象に、Observableや非同期処理、並行処理の基本をコンパクトに学べます。長い本を読む時間がない人にも取り組みやすい一冊です。
Schedulersや非同期テストも扱います。値がいつ実行されるのか、テストで時間をどう捉えるのかを学びたい人におすすめです。RxJS 5の概念を一通り見て、用語の見通しをつけたいときにも役立ちます。
対象環境はNode.js 6系とモダンブラウザーです。新しいプロジェクトへコードを移す際は、サンプルの書式と手元の環境を照らし合わせましょう。Observableの組み立て方や並行処理の考え方を活用できます。
Reactive Programming with RxJS 5 Untangle Your Asynchronous JavaScript Code
Pragmatic Bookshelf
Amazonで見るイベントを学ぶ一冊
Build Reactive Websites with RxJS Master Observables and Wrangle Eventsは2018年刊、194ページです。小さなアプリの例から始まり、イベントやAJAX、エラー処理、競合状態の回避へと進みます。画面の動きを追いながらRxJSを学びたい人におすすめです。
Typeaheadや株価ティッカー、AngularのHTTP通信とフォーム、リアクティブなゲームなど、題材は多彩です。switchMap で古い検索結果を扱わない例もあり、ユーザー操作が重なる画面の動きを具体的に考えられます。
フロントエンド経験者にも初学者にも役立つ内容です。対象バージョンを明示したRxJS 5の本と読むなら、サンプルのAPI表記を見比べつつ、操作の考え方を中心に吸収するとよいでしょう。
Build Reactive Websites with RxJS Master Observables and Wrangle Events
Pragmatic Bookshelf
Amazonで見るAngular 18の実践
Reactive Patterns with RxJS and Angular Signalsは2024年刊、254ページの第2版です。Angular 18のアプリ構築を通して、Observable、Subject、オペレーター、Signalsとの連携を段階的に扱います。AngularとTypeScriptの基礎がある人向けです。
マーブル図や非同期ストリームのテストに加え、メモリーリークやマルチキャストも扱います。オペレーターの書き方や購読の管理、アプリ内でのデータの流し方まで知りたい人に役立ちます。
Angular SignalsとRxJSの役割分担を学びたい開発者にもおすすめです。基本的なRxJSと関数型プログラミングの知識が前提なので、AngularのコードでObservableを使っている人の次の一冊に合います。
結論
RxJSを広く学び、テストやReact・Redux連携まで押さえるなら、RxJS in Actionを第一候補にしてください。RxJS 5が対象のため、現行環境とのAPI差を見ながら基礎と実例を読み進めるのがおすすめです。
短時間でRxJS 5の概念をつかむなら144ページの本、画面イベントの実例を追うならBuild Reactive Websites with RxJS Master Observables and Wrangle Eventsが合います。Angular 18とSignalsの実践パターンには、2024年刊のReactive Patterns with RxJS and Angular Signalsを選んでください。
TypeScriptでObservableやオペレーターを学ぶなら、知りたい範囲と開発環境に近い本を選びましょう。本で考え方をつかみ、APIの細部は手元のプロジェクトで確かめると、知識を仕事のコードへつなげられます。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
