JSFiddle - React, Tailwind, and code Playground

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.js"></script>
<button class="button1">click1</button>
<button class="button2">click2</button>

TypeScript

// Rx
// Rx.Observable

Rx.Observable.just(1);
// Rx.Observable.of()で配列を作成
Rx.Observable.of(1,2,3).subscribe(x=>{
	console.log('Rx.Observable.of()',x);
});

// Rx.Observable.range()でリストを流す
Rx.Observable.range(1, 3).subscribe(x=>{
	console.log('Rx.Observable.range()',x);
});

// Rx.Observable.from()で配列からリストを流す
Rx.Observable.from([1,2,3]).subscribe(x=>{
	console.log('Rx.Observable.from()',x);
});

//Rx.Observable.first()で加工
Rx.Observable.range(1, 3).first().subscribe(x=>{
	console.log('Rx.Observable.first()',x);
});

//Rx.Observable.last()で加工
Rx.Observable.range(1, 3).last().subscribe(x=>{
	console.log('Rx.Observable.last()',x);
});

//Rx.Observable.map()で加工
Rx.Observable.range(1, 3).map(x=>{
	return x*2
}).subscribe(x=>{
	console.log('Rx.Observable.map()',x);
});


//Rx.Observable.filter()で加工
Rx.Observable.range(1, 10).filter(x=>{
	return x%2===0
}).subscribe(x=>{
	console.log('Rx.Observable.filter()',x);
});

//Rx.Observable.fromEvent()でDOMイベントを購読
Rx.Observable.fromEvent(
	document.querySelector('.button1'),
  'click'
).subscribe(x=>{
	console.log('Rx.Observable.fromEvent()',x);
});

//Rx.Subject()
var subject = new Rx.Subject();

//Rx.Subject().subscribe()で変更を監視
subject.subscribe(x=>{
	console.log('Rx.Subject.subscribe()',x);
});
subject.next(1);