【Rxjs基礎講座】deferとfromでPromiseをObservableへ変換するときの注意点

今回もrxjsのお勉強したい方のためのテクニカルメモです。
javascriptのライブラリーには

Promise

を利用したものがかなり存在しますが、これを

rxjs

に取り込んで使う場合には、一旦

Promise

ベースの関数を

Observable

ベースの関数に変換する必要がでてきます。
そこで大活躍するのが、

defer

と

from

です。
これらの標準メソッドはどちらも

Promise

をうまく

Observable

へと変換してくれるのですが、実際に使ってみるときの挙動が若干違います。
公式では

Rxjs Learing - Defer

でだいたい分かったような気にはなるのですが、今回はその差異をもうちょい深堀してみます。
なお関連記事でasync/awaitをdeferへ変換する方法を解説した内容もよろしけばご参照ください。

【Rxjs基礎講座】deferでasync/await関数からObservableへ変換する

asycn/awaitで実装された関数をRxjs#deferオペレーターでObservableに変換する方法を解説します。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

deferとfromでコールバック関数の応答が違う

Rxjsで同期処理を行う際に、Javascriptネイティブの関数である

Promise

クラスのインスタンスを

Observable

クラスのインスタンスに変換するのには

defer

か

from

を用いるのが最も手っ取り早い方法です。
でもこの2つのオペレーターの挙動の違いを理解せず混同して利用していると、意図としないタイミングで同期処理されて、期待した結果がコールバックのレスポンスから返って来ない可能性もあります。
今回の内容のキモとしては以下の点を予め考慮しておくことです。

開く/閉じる

            + fromオペレーター:
    コールバックで返される値のタイミングの調整が不要な場合に利用

+ deferオペレーター:
    コールバックで返される値がタイミング・クリティカルな場合に利用

このような違いがあるので、同期的な処理を設計する場合には、まず

defer

を使っておくのが無難な選択肢かと思います。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

簡単な同期を与えるサンプルプログラム

deferとfromの作用の違いを比較する前に、簡単な同期処理を与えるストリームを作成します。
以下のコードで実行された時間を出力します。

開く/閉じる

            import { EMPTY, tap, defaultIfEmpty } from 'rxjs';

const empty$ = EMPTY.pipe(
    defaultIfEmpty(null),
    tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力
);

empty$.subscribe();

これは

EMPTY

から流されたストリームから流された値を後続の

defaultIfEmpty

が同期的に検知して、値がヌルだったら下流の

tap

のストリームを開始するだけのプログラムです。
このコードを実行すると、ストリームがアタッチされたときの時間が得られます。

開く/閉じる

            2020-03-13T03:47:07.948Z

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

fromとdeferの比較実験

では先程のプログラムを修正しながらfromとdeferの作用のObservable変換後の作用の違いを具体例をあげて見ていきましょう。

実験① ~ fromの場合

挙動がもっとも単純な

from

からやってみます。さきほどのコードを以下のように修正します。

開く/閉じる

            import { EMPTY, from, tap, delay, defaultIfEmpty, switchMap } from 'rxjs';

const empty$ = EMPTY.pipe(
    defaultIfEmpty(null),
    tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力①
);

const from$ = from(new Promise(resolve => {
    resolve(new Date()); // 👈ここに到達した時の時間を出力②
})).pipe(
    tap(time => console.log(time))
);

empty$.pipe(
    delay(2000), // 👈2秒遅らせてfrom$に遷移
    switchMap(_ => from$) // 👈from$の内部のPromiseのコールバックは2秒遅れる？遅れない？
).subscribe();

実行すると、

開く/閉じる

            2020-03-13T04:04:11.330Z #①の時間
2020-03-13T04:04:11.329Z #②の時間

というように、マークされた時間はほぼ同着です。
つまりは、

empty$

と

from$

がコード内で定義された時間と同じであり、Promiseを

from

メソッドでObservable変換された場合には、ストリームが呼び出されたタイミングで内部が処理されるようです。

実験② ~ deferの場合

これを

defer

でやると以下のようになります。

開く/閉じる

            import { EMPTY, defer, tap, delay, defaultIfEmpty, switchMap } from 'rxjs';

const empty$ = EMPTY.pipe(
    defaultIfEmpty(null),
    tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力①
);

const defer$ = defer(() => new Promise(resolve => {
    resolve(new Date()); // 👈ここに到達した時の時間を出力②
})).pipe(
    tap(time => console.log(time))
);

empty$.pipe(
    delay(2000), // 👈2秒遅らせてdefer$に遷移
    switchMap(_ => defer$) // 👈defer$の内部のPromiseのコールバックは2秒遅れる？遅れない？
).subscribe();

ほとんどコード自体は先程の

from

のときと変わりませんが、

from

が引数にPromiseのインスタンスを指定するのに対して、

defer

はPromiseを返す関数を指定します。詳しくはAPIリファレンスをご参照のこと。
出力のほうが、

開く/閉じる

            2020-03-13T04:17:36.233Z #①の時間
2020-03-13T04:17:38.238Z #②の時間

どうでしょうか、今回は2秒ほど遅延して実行されているのが分かります。
よって

from

とは違い、処理がアタッチされるタイミングは、ストリームが定義されるタイミングではなく、

subscribe

後に、

defer

で生成したストリームが流れる直後のようです。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

まとめ

では再度今回のおさらいをしておきます。
今回のことをざっくりとまとめると、

開く/閉じる

            + fromオペレーター:
    コールバックで返される値のタイミングが不要な場合に利用する
+ deferオペレーター:
    コールバックで返される値のタイミングが重要な場合に利用する

Promise

を

Observable

に変換するときのちょっとした違いでしたが、

defer

と

from

の挙動の違いを理解せず混同して利用していると、たまにあれれ？と意図としないタイミングで処理されて返ってくるコールバックのレスポンスがいるかも知れません。
特に

defer

は割と良く利用しますので、同期的な処理を設計する場合には、今回の特性は抑えておくと良いと思います。