Typescript とrxjs でマイナス100から100までのランダムな数字を1秒ごとに生成する

Angular rxjs stackblitz

はじめに

Angular とchart.js でサンプルを作成している際にTypescript で毎秒ランダムなダミー数値を生成したくなる時がありました。
rxjs に intervalという 指定間隔で subscribeできる便利な関数があるのでそれを利用し毎秒乱数を生成する方法をまとめます。

stackblitz貼っておきます。
stackblitz.com

Rxjs interval

Angular から利用しているので RandomService というサービスクラスを作成しています。

import { Injectable } from '@angular/core';
import { interval } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Injectable()
export class RandomService {

  public subjectdata() {
    return interval(1000).pipe(map(x => Math.floor(Math.random() * 200) - 100), startWith(0));
  }
}

Subscribe

Component から subscribeします。

this.subscription = this.randomService.subjectdata().subscribe(
  (value: number) => {
    this.randomNumber = value;
  }
)

htmlにバイディングします。
interval(1000)としているので、描画された最初の1秒は値が入りません。今回は雑に || 0 としています。

randomNumber: {{ randomNumber || 0}}

Unsubscribe

subscribeしたものは きちんと ngOnDestroy しましょう。
ページ遷移した後も虚空に乱数を放り投げることになってしまいます。
template変数として利用するのであれば、最近話題の asyncpipeでも良いかもしれません。

ngOnDestroy() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

まとめ

Typescript とrxjs でマイナス100から100までのランダムな数字を1秒ごとに生成することができました。
次はchart.js 向けに毎秒 Dateを生成する方法をまとめます。