RxJSでリアクティブプログラミングを学ぶ - より良いエンジニアを目指して

リアクティブプログラミングは革新的なプログラミング手法なのではないかな、と思う反面、なんか難しそうだなと敬遠してました。

実際にアプリ開発に取り入れられそうな機会もありませんでした。

StackBlitzではRxJSのテンプレートとして用意されているので、試すには良さそうだなと言うことで試してみることに

リアクティブプログラミングとは？

下記の記事は丁寧に説明はしているとは思います。

codezine.jp

ですが、正直、記事を読んでもなんかこれまでとは異なるが、よくわからないというのが本音です。

何が起きるかわからないので、今回手を動かしてみようと考えました。

行ったこと

英語ですがRxJSの公式サイトを参考に手を動かすことにします。

rxjs-dev.firebaseapp.com

Get Started

FirstExamples

いきなりFirstExamplesでつまづきました。

index.html

<h1>FirstExamples</h1>

<button>click</button>

index.ts

import * as rxjs from 'rxjs';

const { fromEvent } = rxjs;

const button = document.querySelector('button');
fromEvent(button, 'click')
  .subscribe(() => alert('clickされました'));

import * as rxjs from 'rxjs';

を宣言する必要があります。

TypeScriptで使う場合は下記などを参考にすると良さそうです。

scan · learn-rxjs

結局は

import * as rx from 'rxjs';
import * as op from 'rxjs/operators';

とimportしておき

rx.fromEvent

などと取得する形が私にはしっくりきました。

pythonなどでimport numpy as npと宣言して、np.mean()などとメソッドを呼び出すような感覚です。

さいごに

私の中の印象では、JavaScriptだけでMVVMを実現したいのに向いてそうなライブラリといったところです。

SubscribeやUnsubscribeなどを行うあたりは、職場でやったWPFのObservableCollectionとかPrismのSubscribeやUnsubscribeの仕組みに近いです。

公式ドキュメントを試す限りでは、その仕組みを扱うことに徹したライブラリのようです。

やっていると面白い感触。使い所としてはどうなのでしょう。

項目の追加とかですかね。