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

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

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

RxJSのtakeWhileとは

RxJSのtakeWhileとは

RxJSのtakeWhileは、Observableの値を条件が満たされている間は流し続け、条件が満たされなくなった時点でObservableを完了させるオペレータです。

以下にtakeWhileを用いたサンプルコードを示します。

import { of } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

// 値が5未満の間は流し続ける
const filtered$ = source$.pipe(takeWhile((value) => value < 5));

filtered$.subscribe((value) => console.log(value));

// 出力結果
// 1
// 2
// 3
// 4

上記のサンプルコードでは、takeWhileを使用して、source$の値が5未満の間はデータを流し続け、5以上になった時点でObservableが完了します。

takeWhileの特徴

takeWhileの特徴を以下に示します。

  • 条件がfalseになった時点でストリームが完了する
    • takeWhileは、条件がfalseになった瞬間にObservableの発行を停止し、完了する。
    • 一度でも条件がfalseになったら、その後の値は流れない。
  • inclusiveオプションを指定すると条件がfalseになった値を1回だけ出力する

上記の特徴が分かるサンプルコードをこれから説明します。

条件がfalseになった時点でストリームが完了する

takeWhileは、条件がfalseになった瞬間にObservableの発行を停止し、完了します。サンプルコードを以下に示します。

import { of } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

const filtered$ = source$.pipe(takeWhile((value) => value !== 5));

filtered$.subscribe((value) => console.log(value));

// 出力結果
// 1
// 2
// 3
// 4

このコードでは、値が5になった時点でストリームが完了するため、6以降の値は発行されません。

inclusiveオプションを指定すると条件がfalseになった値を1回だけ出力する

takeWhileにはinclusiveオプション（デフォルトはfalse）があり、これをtrueに設定すると、条件がfalseになった値を1回だけ出力した後にストリームを完了させます。サンプルコードを以下に示します。

import { of } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

const filtered$ = source$.pipe(takeWhile((value) => value !== 5, true));

filtered$.subscribe((value) => console.log(value));

// 出力結果
// 1
// 2
// 3
// 4
// 5

通常のtakeWhileでは5は出力されませんが、inclusiveオプションにtrueを指定することで5が出力された後にストリームが完了します。

本記事のまとめ

この記事ではRxJSの『takeWhileオペレータ』について、以下の内容を説明しました。

  • takeWhileは、条件が満たされている間は値を流し、満たされなくなった時点でストリームを完了させる。
  • 一度でも条件がfalseになったら、その後の値は流れない。
  • inclusive: trueオプションを指定すると、条件がfalseになった値を1回だけ出力してから完了する。

takeWhileは、特定の条件が満たされる間だけデータを取得したい場合に便利なオペレータです。例えば、ユーザーの入力が一定の条件を満たしている間だけ処理を続けるようなケースで活用できます。

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

スポンサーリンク