<html>
<head>
<meta charset="UTF-8">
<title>RxJs</title>
<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
</head>
<body>
<button type="button">BUt</button>
</body>
<script>
const {fromEvent} = rxjs;
let count = 0;
const button = document.querySelector('button');
//javascript 書き方(即時関数で記述した)
// button.addEventListener('click', (() =>{
// return (event) => console.log(`cont: ${++count}`)
// })(0));
//RxJS 書き方
// fromEvent(button,'click').subscribe(
// (count)=> console.log(`count: ${++count}`)
// );
</script>
</html>
RxJSを使用するため、今回head部にCDNを読み込ませています。
fromEventを使用してbuttonのclickイベント処理を記述しています。
https://rxjs.dev/api/index/function/fromEvent
(count)=> console.log(`count: ${++count}`)の部分を、
(event)=> console.log(event.type)に書き換えるとconsoleでの出力結果は変わります。
event.typeというのは、fromEvent(button,'click').subscribe(の行で記載している、
'click'イベントのことです。
RxJSの書き方をレベルアップしてみる
上記のコードから、改善します 結果は、一番上のコードと同じです。pipe()が追加されました。//省略
const {fromEvent} = rxjs;
const {scan} = rxjs.operators;
//let count = 0;
const button = document.querySelector('button');
//RxJS 書き方
fromEvent(button,'click')
//subscribeで実行された結果pipeがバケツのように蓄積するイメージ。
//
.pipe(
//アロー関数で記述。第一引数:どういう処理にするか記述、第二引数：初期値を入力
scan((count) => ++count, 0)
)
.subscribe(
(count)=> console.log(`count: ${count}`)
);
//省略
補足
他にも便利なオペレータが沢山あります。 scan関数や、他にも様々な使用する関数がありますが それはrxjsではオペレータと呼ぶらしい。例えば、throttleTimeとかもオペレータと呼びます。
.pipe( //subscribeの前に処理を挟む際に、pipeを記載
throttleTime(3000),//3秒たたないと、次の処理を送らない処理(いくらクリックしても3秒以内は処理を送らない。)
scan((count)=> ++count, 0)//受け取る値をどうするかを関数で書く。
)
以下のRxJS公式サイトで、色々見ると勉強なると思います。
https://rxjs.dev/guide/operators