【RxJS】EMPTYとは？「特徴」や「使い方」などを解説！

この記事ではRxJSの『EMPTY』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • RxJSのEMPTYとは
  • EMPTYの使い方
  • EMPTYの用途
  • EMPTY、NEVER、throwErrorの違い

RxJSのEMPTYとは

EMPTYは値を何も発行せず、即座に完了通知を発行するObservableです。

EMPTYの特徴

  • 値を発行しない
    • EMPTYは、ストリーム内でnextを一切呼び出しません。
  • 即座に完了する
    • サブスクライブするとすぐにcomplete通知を発行して終了します。

EMPTYの使い方

以下のサンプルコードでEMPTYの動作を確認してみましょう。

import { EMPTY } from 'rxjs';

EMPTY.subscribe({
  next: (value) => console.log(`Next: ${value}`),  // 呼び出されない
  error: (err) => console.log(`Error: ${err.message}`), // 呼び出されない
  complete: () => console.log('Observableが完了しました'), // 呼び出される
});

// 実行結果
// Observableが完了しました

上記のサンプルコードを実行するとわかる通り、completeだけが呼び出されることが分かります。

EMPTYの用途

EMPTYは実際のアプリケーションでは以下の用途で使用することが多いです。

  • 条件によって処理をスキップしたい場合
  • エラーが発生した際に代替処理を提供する場合

各用途について順番に説明します。

条件によって処理をスキップしたい場合

EMPTYは、条件によって処理をスキップしたい場合に便利です。サンプルコードを以下に示します。

import { EMPTY, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const condition = false;

of('データ取得リクエスト')
  .pipe(
    switchMap((message) => {
      if (condition) {
        return of(`条件が真: ${message}`);
      } else {
        return EMPTY; // 条件が偽の場合は何も返さない
      }
    })
  )
  .subscribe({
    next: (value) => console.log(`Next: ${value}`),
    complete: () => console.log('Observableが完了しました'),
  });

// 実行結果
// Observableが完了しました

条件がfalseの場合は何も発行されず、completeのみが呼び出されます。

エラーが発生した際に代替処理を提供する場合

EMPTYは、エラーが発生した際に代替処理を提供する場合にも利用されます。サンプルコードを以下に示します。

import { EMPTY, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

throwError(() => new Error('エラーが発生しました'))
  .pipe(
    catchError((error) => {
      console.error(error.message);
      return EMPTY; // エラー時に何も返さない
    })
  )
  .subscribe({
    next: (value) => console.log(`Next: ${value}`),
    complete: () => console.log('Observableが完了しました'),
  });

// 実行結果
// エラーが発生しました
// Observableが完了しました

エラーが発生すると、キャッチして、EMPTYによってストリームを安全に終了しています。

EMPTY、NEVER、throwErrorの違い

EMPTYは完了通知だけを発行して即座に終了するObservableであり、completeのみが呼び出されます。似たようなObservableにNEVERとthrowErrorがあるので、その違いを以下の表でまとめます。

動作通知されるイベント特徴
EMPTY完了通知 (complete) を即座に発行し、終了する。complete のみ。next や error は呼び出されず、complete を発行してただストリームを終了させる。
NEVER何も発行せず、通知も終了もしない。なし。next、error、complete のいずれも呼び出されない。無限に動作し続けるようなストリームです。

throwError

エラー(error)を即座に発行し、終了する。error のみ。next や complete は呼び出されず、error を発行してストリームを終了させる。

各動作が分かるサンプルコードを以下に示します。

EMPTY

import { EMPTY } from 'rxjs';

EMPTY.subscribe({
  next: (value) => console.log(`Next: ${value}`),
  error: (err) => console.log(`Error: ${err.message}`),
  complete: () => console.log('Observableが完了しました'),
});

// 実行結果
// Observableが完了しました

completeのみが呼び出されます。

NEVER

import { NEVER } from 'rxjs';

NEVER.subscribe({
  next: (value) => console.log(`Next: ${value}`),
  error: (err) => console.log(`Error: ${err.message}`),
  complete: () => console.log('Observableが完了しました'),
});

// 実行結果
// (何も表示されず、next/error/completeのコールバックも呼び出されない)

nextもerrorもcompleteも呼び出されません。

throwError

import { throwError } from 'rxjs';

throwError(() => new Error('エラーが発生しました')).subscribe({
  next: (value) => console.log(`Next: ${value}`),
  error: (err) => console.log(`Error: ${err.message}`),
  complete: () => console.log('Observableが完了しました'),
});

// 実行結果
// Error: エラーが発生しました

errorのみが呼び出されます。

本記事のまとめ

この記事ではRxJSの『EMPTY』について、以下の内容を説明しました。

  • RxJSのEMPTYとは
  • EMPTYの使い方
  • EMPTYの用途
  • EMPTY、NEVER、throwErrorの違い

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