この記事ではRxJSの『takeWhileオペレータ』について、以下の内容を図とサンプルコードを用いて分かりやすく解説します。
takeWhileオペレータとはtakeWhileオペレータの「使い方」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は、特定の条件が満たされる間だけデータを取得したい場合に便利なオペレータです。例えば、ユーザーの入力が一定の条件を満たしている間だけ処理を続けるようなケースで活用できます。
お読み頂きありがとうございました。