【Angular】Pipeでフィルターやソートをしてはいけない
Angularの*ngForでリストを生成するときに「ソートしたい」「フィルタリングしたい」という気持ち、ありますよね。 そして 「Angular Pipe のデフォルト機能にないのか〜自作のPipe作るか〜」 ってなりますよね。
私もそうやってソート用、フィルタリング用のPipeを自作してました。
しかし、ある日 Pipe のデバッグのためにconsole.log()を仕込んでみたら、思いの外、発火しまくってました。
「もしや、根本的に間違えているのでは？」
と思い、Angular公式のドキュメントをみてみると、はっきりと書いてありました。
Angularはリストのフィルタリングやソートにパイプを提供しません。
AngularJSに精通している開発者は、それをfilterやorderByとして知っていますが、Angularに同じものはありません。
これは見落としではありません。
このようなパイプは性能が悪く、積極的な最小化を阻害するため、Angularは提供していません。
filterとorderByは両方とも、オブジェクトのプロパティを参照するパラメータが必要です。
このページの前半では、このようなパイプは不純である必要があり、Angularはほぼすべての変更検知サイクルで不純なパイプを呼び出すことを学びました。
フィルタリング、特にソートは高価な操作です。
Angularがこれらのパイプメソッドを毎秒何度も呼び出すと、ユーザー体験は中程度のサイズのリストでもひどく低下します。
filterそしてorderByはAngularJSアプリの中でよく濫用され、Angular自体が遅いという苦情につながります。
そもそもfilterとorderByを提供することでAngularJSがパフォーマンスの罠を用意しているという間接的な意味では、それは正しいです。
引用元: Appendix: 付録：FilterPipeあるいはOrderByPipeの不在
AngularJS時代にfilter, orderByを提供してしまったがために、AngularJSは重いと評価されてしまったんですね。
どおりで低スペックのAndroidだと重いとは思ってたんですよね〜。 パフォーマンスのことを考えると、フィルタリングやソートはコンポーネント側で必要な時だけ行うようにすべきでした。
