RxJSとはなんぞや？③カウンターからObservable を作成と他のObservableとマージ
前回同様、まずAngular公式のサンプルコードを試してみます。
Angular 日本語ドキュメンテーション｜RxJSライブラリー
https://angular.jp/guide/rx-library
かなり短めのコードです。
------------------------------------------
import { interval } from 'rxjs';
// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
const subscription = secondsCounter.subscribe(n =>
console.log(`It's been ${n + 1} seconds since subscribing!`));
------------------------------------------
前回のイベントからobservable を作成するを読んだ後だと拍子抜けするくらいシンプルですね。
私が引っ掛かったのは、
・secondsCounter.subscribe(n =>の"n"が自動的に増えるのかと言う点と初期値の設定可能?
・${n + 1}はなんぞや？
の2点です。
最初の疑問は、カウンターと言う名前が示しているのがすべてで、interval()内の1000分の1秒単位で指定した時間間隔で、X回目の(初回0)カウントを返すObservableを作成したという事のようです。
※これの定義している部分を見て多分そうだろうと思っただけですので違う可能性もあります。
2番目の疑問は、変数を文字列中に埋め込みたい場合は変数を${}で囲むことで実現との事です。
TypeScriptの基礎が判っていないので、以下のサイトは役に立ちそうです。
Angularを使いこなすための第一歩「TypeScript」の基本を勉強する【あっさり系まとめ】
https://qiita.com/tanimoto-hikari/items/9822b0a28f08fd201eda#%E5%A4%89%E6%95%B0%E3%81%AE%E8%A9%B1
これだけでは短いので、もう少し試してみました。
前ページで作ったイベントから作ったObservableと併用を試しましたが、問題なく動きます。
こんな感じでたくさんのObservableを使用すると厄介な事になるかもしれませんが、複数のObservableをマージ(一つにまとめてしまう)事も出来るようで、試してみました。
なにぶん返す値が異なるので処理をどうするかは工夫の必要がありますが、色々出来そうな気もしますね。
サンプルコードはこちらです。(細部は割愛です)
---------------------------------------------------------------
import { fromEvent, interval, merge} from 'rxjs';
中略
const el = document.getElementById('my-element')!;
const mouseMoves = fromEvent<MouseEvent>(el, 'mousemove');
const secondsCounter = interval(1000);
const mTest=merge(
mouseMoves,
secondsCounter
);
mTest.subscribe((value)=>console.log(value));
---------------------------------------------------------------
さすがに、ちょっとなじんできた気もします。次は『promise から observable を作成する』を試します。
