【RxJS】filterオペレータとは？「使い方」や「特徴」などを解説！

この記事ではRxJSの『filterオペレータ』について、以下の内容を図とサンプルコードを用いて分かりやすく解説します。

  • filterオペレータとは
  • filterオペレータの「使い方」
  • filterオペレータの「特徴」

RxJSの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）を排除したりしたい場合に便利です。

お読み頂きありがとうございました。

スポンサーリンク