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