RxJSとはなんぞや？⑨ サイコロ連打と非同期のメリット一例
前回、1秒間にサイコロを1万回約10秒間で10万回振るプログラムを試しました。
0.01秒ごとに、サイコロを100回振る関数を流したわけです。
これくらいなら非同期のメリット判るかなと思ったのですが、ちょっとPCの性能をなめてました。
0.01秒ごとにサイコロを100回振るを10秒間
経過時間：10.23秒
サイコロを(非同期を使わずに)10万回振る
経過時間：0.032秒
そこでプログラムを修正して回数を1000倍にしました。
0.01秒ごとにサイコロを10万回振るを10秒間
経過時間：10.051秒
サイコロを(非同期を使わずに)1億回振る
経過時間：20.572秒
今度は非同期のメリットが判ったのではないでしょうか？
なお、非同期を使わない場合、ブラウザが応答しなくなりStopボタンも押せません。
サーバの応答がいつになるか判らないという消極的な非同期採用の理由以外にも、パフォーマンス上の理由からも非同期プログラムを使う理由はある訳です。
少し説明をしますと、非同期のプログラムでは、複数のサイコロ処理関数が同時に動いています。
より正確に言うと、前のサイコロ処理関数が終わっていても、あるいは終わっていなくても0.01秒後には次のサイコロ処理関数を走らせます。
ですのでPCの性能と関数の処理時間にもよりますが、最終的な処理時間は大きくは異ならない事が期待できます。(最初の例のように非同期を使わない方が早いケースも当然あります)
どういう風に(この場合ですと関数を投げるタイミングとその処理の重さ)非同期を使うかは、プログラムよりも実機の状況を勘案すべき問題になるでしょう。
(多少は参考になるかもしれない)ストレージへの記録については、一旦投稿して、後程、追加したいと思います。
すんなりいくかと思いましたが、少々長引きそうです。
テスト中に多少理解したpromiseから作成するobservableについてのサンプルコード関連について記して次回に回します。
Angular日本語ドキュメンテーション｜RxJSライブラリ
https://angular.jp/guide/rx-library
promise から observable を作成する
---------------------------------------------------------------
import { from, Observable } from 'rxjs';
中略
// Create an Observable out of a promise
const data = from(fetch('/api/endpoint'));
// Subscribe to begin listening for async result
data.subscribe({
next(response) { console.log(response); },
error(err) { console.error('Error: ' + err); },
complete() { console.log('Completed'); }
});
---------------------------------------------------------------
上の例ではfromを使い、またwebからのレスポンスをもらって処理しています。
適切な値(型)が返るならば"fetch('/api/endpoint')"の代わりに内部の関数でも構いません。
fromを使用した場合は配列限定で、各要素ごとにnextが実行されます。
ofの場合は、jsonや配列など変える値の融通は効きます。ただし、nextは返り値全体を一回のみ実行です。(判っていれば問題は無いでしょうが)
fromaruihaofの中は、定義した配列の値でも構いませんが、next内でpushで値追加等は実行時エラーになります。
この辺はちゃんと理解はしていないのでご注意を！
今回のサンプルは、LocalStorageを使うのでサーバ側と処理を分けたりはしないし出来ませんが、promiseを使ったObservableの例を考えています。(次回に続く)
追記:
色々出来そうなので頑張っていますが、理解にまだまだ時間かかりそうです。
正直、難しいけれど面白いです。
