RxJSアンチパターン集
RxJSは強力なリアクティブプログラミングのライブラリですが、誤った使い方をすると、バグの温床や保守性の低下を招きます。このセクションでは、TypeScriptでRxJSを使う際によくある間違いと、それを避けるためのベストプラクティスを紹介します。
このセクションの目的
- バグを未然に防ぐ: よくある間違いを事前に理解することで、実装時のトラブルを回避
- 保守性を向上させる: 読みやすく、テストしやすいコードパターンを習得
- パフォーマンスを最適化: メモリリークや不要な処理を防ぐテクニックを学習
アンチパターン一覧
このセクションでは、以下の17のアンチパターンを取り上げています。
🔴 重大な問題
これらのパターンは、アプリケーションに深刻な影響を与える可能性があります。
| パターン | 問題 | 影響 |
|---|---|---|
| Subject の外部公開 | Subject をそのまま公開し、外部から next() を呼べる状態にする | 状態管理の予測不可能性、デバッグ困難 |
| ネストした subscribe | subscribe の中でさらに subscribe を呼ぶ | コールバック地獄、エラー処理の複雑化 |
| 状態管理フラグの乱立 | 17個のbooleanフラグで状態を管理、命令型思考の残存 | 可読性低下、保守困難、バグの温床 |
| subscribe内のif文ネスト | subscribe 内での複雑な条件分岐（3つ以上のネスト） | 可読性低下、テスト困難、宣言的思想に反する |
| unsubscribe 忘れ | 無限ストリームの購読を解除しない | メモリリーク、リソース浪費 |
| shareReplay の誤用 | shareReplay の動作を理解せずに使う | 古いデータの参照、メモリリーク |
🟡 注意が必要な問題
これらは特定の状況で問題になる可能性があります。
| パターン | 問題 | 影響 |
|---|---|---|
| map での副作用 | map オペレーター内で状態を変更する | 予測不可能な動作、テスト困難 |
| Cold/Hot の無視 | Observable の性質を考慮しない | 重複実行、予期しない動作 |
| Promise との混在 | Promise と Observable を適切に変換しない | キャンセル不可、エラーハンドリングの不備 |
| バックプレッシャー無視 | 高頻度イベントの制御を怠る | パフォーマンス低下、UI のフリーズ |
🔵 コード品質に関する問題
これらは直接的なバグではありませんが、コードの品質を下げる要因です。
| パターン | 問題 | 影響 |
|---|---|---|
| エラーの握りつぶし | エラーを適切に処理しない | デバッグ困難、ユーザー体験の低下 |
| DOM イベントリーク | DOM イベントリスナーを解放しない | メモリリーク、パフォーマンス低下 |
| 型安全性の欠如 | any を多用する | 実行時エラー、リファクタリング困難 |
| 不適切なオペレーター選択 | 目的に合わないオペレーターを使う | 非効率、予期しない動作 |
| 過度な複雑化 | シンプルに書ける処理を複雑にする | 可読性低下、保守困難 |
| ワンライナー地獄 | ストリーム定義・変換・購読が混在 | デバッグ困難、テスト困難、可読性低下 |
| subscribe 内での状態変更 | subscribe 内で直接状態を変更する | テスト困難、バグの原因 |
| テストの欠如 | RxJS コードのテストを書かない | リグレッション、リファクタリング困難 |
学習の進め方
- よくある間違いと対処法 で15のアンチパターンを詳しく学習
- 各アンチパターンには「悪い例」と「良い例」のコードを掲載
- アンチパターン回避チェックリスト で自分のコードを見直し
- ベストプラクティスを実践し、チーム内で共有
関連セクション
アンチパターンを学んだ後は、以下のセクションも参照してください。
次のステップ
- まずは よくある間違いと対処法 から始めて、実践的なアンチパターンとその解決策を学びましょう。
- 学習後は アンチパターン回避チェックリスト で実際のコードをレビューしましょう。
重要: これらのアンチパターンは、実際のプロジェクトで頻繁に見られるものです。早い段階で理解することで、品質の高いRxJSコードを書けるようになります。