この記事ではRxJSの『filterオペレータ』について、以下の内容を図とサンプルコードを用いて分かりやすく解説します。
filterオペレータとはfilterオペレータの「使い方」filterオペレータの「特徴」
RxJSのfilterとは
RxJSのfilterは、Observableから流れるデータのうち、指定した条件を満たすものだけを流すオペレータです。
以下にfilterを用いたサンプルコードを示します。
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
// 偶数のみを流す
const filtered$ = source$.pipe(filter((value) => value % 2 === 0));
filtered$.subscribe((value) => console.log(value));
// 出力結果
// 2
// 4
// 6
// 8
// 10上記のサンプルコードでは、filterを使用して、source$の値のうち偶数のみを流し、それ以外の値は破棄しています。
filterの特徴
filterの特徴を以下に示します。
- 条件を満たさない値は流れない
- 全ての値が条件を満たさない場合、出力は何もされない
上記の特徴が分かるサンプルコードをこれから説明します。
条件を満たさない値は流れない
filterオペレータは、指定した条件を満たさない値をすべて除外します。以下のサンプルコードでは、3の倍数のみを流すようにしています。
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
const filtered$ = source$.pipe(filter((value) => value % 3 === 0));
filtered$.subscribe((value) => console.log(value));
// 出力結果
// 3
// 6
// 9このコードでは、3の倍数（3, 6, 9）のみが出力され、それ以外の値はすべて除外されます。
全ての値が条件を満たさない場合、出力は何もされない
filterオペレータを適用した結果、全ての値が条件を満たさない場合、Observableの出力は何も行われません。以下のサンプルコードでは、11以上の値のみを流すようにしています。
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
const filtered$ = source$.pipe(filter((value) => value > 10));
filtered$.subscribe({
next: (value) => console.log(value),
complete: () => console.log('完了'),
});
// 出力結果
// 完了このように、条件を満たす値が1つもない場合、データは出力されず、ストリームは完了します。
本記事のまとめ
この記事ではRxJSの『filterオペレータ』について、以下の内容を説明しました。
filterオペレータは、指定した条件を満たす値のみを流し、それ以外の値を除外する。- 条件を満たさない値はすべて破棄される。
- 条件を満たす値が1つもない場合、出力は何もされない。
filterオペレータは、偶数のみを取得したり、特定の条件に合致するデータのみを取得したり、無意味な値（nullやundefined）を排除したりしたい場合に便利です。
お読み頂きありがとうございました。