AngularでRxJSの練習 #1 - クリック・ダブルクリックカウンターを作る

初めに

Angular + Reduxでアプリを作ることになり、RxJSに初めて触れたものの、オペレーターを使わずになんでもsubscribe、combineLatestで解決しようとする習性がなかなか抜けない.........特訓だ！目指せ、RP（リアクティブプログラミング）マスター💪💪💪

開発環境

RxJSの環境を作るのが面倒なので、Angular CLIで環境を作る

• Angular: 5.2.3

• rxjs: 5.5.2

• Typescript: 2.4.2

• OS: darwin x64

• Node: 8.1.4

練習

AngularとRxJSを使って簡単なデモを作っていく。

練習1: クリックカウンター

クリックした回数を画面に表示するデモ。

1. Observable.fromEventでクリックイベントを検知

2. クリックイベントをmap(_ => 1)で数値の1に変換

3. scan()で数値の合計を計算

4. subscribe()してクリック数を画面に表示する～といった流れになっています

src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `{{ value }}`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  value = 0;

  ngOnInit() {
    Observable.fromEvent(document, 'click') // クリックイベントを検知
    .map(_ => 1) // イベントを数値の1に変換
    .scan((acc, value) => acc + value) // 数値の合計を計算
    .subscribe(value => this.value = value);
  }
}

練習2: ダブルクリックカウンター

ダブルクリック(正確にはダブル以上)した時だけカウント数を画面に表示するデモ。

.bufferTime(250)を使用して、イベントを配列に変換し、配列の要素数が2以上の場合のみ、ダブルクリックと判定している。

src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `{{ value }}`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  value = 0;

  ngOnInit() {
    Observable.fromEvent(document, 'click')
      .bufferTime(250) // 250ms以内のイベントを配列にまとめる
      .map(x => x.length) // 配列を配列の長さに変換
      .filter(length => length >= 2)
      .do(_ => console.log('double click'))
      .map(_ => 1)
      .scan((acc, value) => acc + value)
      .subscribe(value => this.value = value);
  }
}

参考サイト

ninjinkun.hatenablog.com

qiita.com

qiita.com