RxJS vs rxjs-compat: 本家ライブラリと移行用レイヤーの技術比較

rxjs と rxjs-compat は、同じ ReactiveX のエコシステムに属していますが、その役割と寿命は全く異なります。rxjs は現在も活発に開発されている本家ライブラリであり、rxjs-compat は過去のバージョン（RxJS 5）から新しいバージョン（RxJS 6）へ移行するための一時的な橋渡し役でした。現代のフロントエンド開発において、この二つを並べて比較することは、実は「現在進行形のツール」対「過去の遺産」を比較することに近いです。

📦 パッケージの目的と現状

rxjs は、非同期プログラミングを Observable パターンで処理するための標準ライブラリです。

• 現在バージョン 7 以降が安定版として推奨されています。
• ツリーシェイキング（不要なコードの削除）に対応しており、バンドルサイズを小さく保てます。
• 最新の JavaScript 標準に合わせた API 設計がなされています。

// rxjs: 現在の標準的な使い方
import { of, fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const source = of(1, 2, 3);
source.pipe(map(x => x * 2)).subscribe(console.log);

rxjs-compat は、RxJS 5 の書き方を RxJS 6 環境で動かすための互換性レイヤーです。

• RxJS 6 リリース時に、既存コードをすぐに書き換えられないチームのために提供されました。
• 内部で rxjs をラップして、古い import パスを通るようにしています。
• 現在ではメンテナンスが終了しており、RxJS 7 以降とは互換性がありません。

// rxjs-compat: 古い書き方（現在は非推奨）
import 'rxjs-compat'; // これだけで RxJS 5 のグローバル設定が有効になる
import { Observable } from 'rxjs/Observable'; // 古いパス

// 上記は現在の rxjs では動作しません

🛠️ Import 構文とモジュールシステム

この二つの最大の違いは、コード内でどのように機能を読み込むかです。

rxjs では、ES6 モジュールの標準的な構文を使用します。

• 必要な機能だけをピンポイントで import します。
• これにより、ビルドツールが未使用のコードを削除しやすくなります。

// rxjs: 明示的な import
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

const subject = new BehaviorSubject(0);

rxjs-compat を使っていた頃は、RxJS 5 のような「すべてを一度に読み込む」スタイルが可能でした。

• パッチを当てることで、rxjs/Rx からの import を可能にしていました。
• これはバンドルサイズが増大する主要原因となっていました。

// rxjs-compat: 古いスタイル（パッチ適用後）
import { Observable } from 'rxjs/Rx'; 
// 上記は rxjs-compat を入れていないとエラーになります

🚀 パフォーマンスとバンドルサイズ

アーキテクチャの観点から、rxjs-compat を使い続けることは技術的負債を抱えることを意味します。

rxjs は、モダンなビルドプロセスと相性が良いです。

• 余計な互換性コードが含まれていないため、実行速度が速いです。
• Webpack や Vite などのバンドラと組み合わせた際、最適化が効きます。

// rxjs: バンドル最適化の恩恵を受けられる
// 使っていない operator は最終ビルドから削除される
import { take } from 'rxjs/operators';

rxjs-compat は、互換性を保つために追加のコードをロードします。

• 本家の rxjs に加えて、互換性レイヤー分のサイズが増えます。
• 移行期間を過ぎても使い続けると、アプリケーションが不必要に重くなります。

// rxjs-compat: 余分なレイヤーが存在する
// 内部で古い API を新しい API に変換する処理が走るためオーバーヘッドがある

⚠️ 廃止とサポートの状況

これが最も重要な判断基準です。

rxjs は現在もアクティブに開発されています。

• セキュリティ修正や新機能が定期的にリリースされます。
• 型定義（TypeScript）も最新の状態に保たれています。

// rxjs: 最新の型定義が利用可能
const source: Observable<number> = of(1);

rxjs-compat は事実上廃止（Deprecated）されています。

• RxJS 7 のリリースに伴い、サポート対象から外れました。
• 新しいプロジェクトでこれを選ぶ理由はありません。
• 既存プロジェクトでも、削除する方向でスケジュールを組むべきです。

// rxjs-compat: 型定義が古く、最新の TS と相性が悪い場合がある
// エラーが発生しても、互換性レイヤー経由のため原因特定が難しい

🔄 移行パスの実際

もしあなたが今 rxjs-compat を使っているなら、以下の手順で rxjs へ移行すべきです。

1. rxjs-compat をアンインストールする。
2. import 'rxjs/Rx' などの古い記述を、import { ... } from 'rxjs' に書き換える。
3. rxjs-marbles などのテストツールも最新版に合わせる。

// 移行前 (rxjs-compat 使用)
import 'rxjs-compat';
Observable.of(1).subscribe();

// 移行後 (rxjs 使用)
import { of } from 'rxjs';
of(1).subscribe();

📊 比較サマリー

💡 結論：迷わず rxjs を選ぶ

アーキテクトとしての明確な推奨は、rxjs 一択です。

rxjs-compat は、2018 年頃の RxJS 6 リリース時に発生した「破壊的変更」を吸収するための緊急措置でした。それから数年が経過し、エコシステムは完全に新しい構文に移行しています。今さら互換性レイヤーに依存することは、パフォーマンスの低下と、将来的なバージョンアップの困難さを招くだけです。

もしレガシーなコードベースを維持している場合でも、rxjs-compat に頼り続けるのではなく、少しずつでも標準的な rxjs の import 構文に書き換える「リファクタリングタスク」をバックログに追加すべきです。それが、長期的なプロジェクトの健全性を守ることになります。