RxJSをブラウザ上だけ（npm / Node.jsなし）で使ってみる

ドキュメントを見ていると、jQueryなどのようにscriptタグを使ってRxJSを動かすこともできる様子でした。ということで、どこで使うのかはわかりませんが一度npm / Node.jsを使わずに触ってみます。 Rx […]

ドキュメントを見ていると、jQueryなどのようにscriptタグを使ってRxJSを動かすこともできる様子でした。

ということで、どこで使うのかはわかりませんが一度npm / Node.jsを使わずに触ってみます。

RxJS本体を読み込む

unpkg.comから配信されていますので、それを使います。

<html>
  <head>
    <title>example RxJS project</title>
  </head>
  <body>
    <button>Button</button>
    <script src="https://unpkg.com/@reactivex/[email protected]/dist/global/rxjs.umd.js"></script>
    <script src="/script.js"></script>
  </body>
</html>

/script.jsにはこれからコードを書くので、ただファイルを置くだけにします。

RxJSのコードを書く

またObservableしてみる

Observe / subscribeにまだ慣れていないので、とりあえずやってみましょう。

// この行はなくても動く
const rxjs = window.rxjs

const subscriber = (observer) => {
  observer.next(1)
  observer.next(2)
  observer.next(3)
  observer.next(4)
}
const observable = rxjs.Observable.create(subscriber)
observable.subscribe({
  next: x => console.log('got: ' + x),
  error: err => console.log(err),
  complete: comp => console.log('com: %j', comp)
})

これでブラウザからHTMLファイルを開くとログが出力されます。

ボタンクリックから実行してみる

せっかくHTMLを書いているので、「ボタンをクリックしたら動く」サンプルも書いてみましょう。

// この行はなくても動く
const rxjs = window.rxjs

const button = document.querySelector('button');
rxjs.fromEvent(button, 'click')
.subscribe(
  (event) => {
      alert(`${event.target.textContent} is clicked!!`);
  }
);

fromEventでクリックイベントをターゲットにしました。これでボタンをクリックしするとJSが実行されます。