chooblarin’s blog

ReactiveXが好き

June 07, 2018

  • #RxJS

実は最近，ブログを更新するチャレンジをしている．ブログを書くにはネタが無いんだけど言い訳として白状させて欲しい．これはブログチャレンジだ．

...

3, 4 年ほど前，Android アプリの開発をしていた頃の RxJava に触れたのが僕の ReactiveX との出会いだ．

Rx のパラダイムはあらゆる言語にも影響を与えた．僕は今，Web フロントエンドのエンジニアとして働いている．ReactiveX が強力な武器であることを実感する．

RxJS で遊ぶ

UI のプログラミングは，Rx と相性が良い．(UI イベントは全て非同期ストリームなので．)

以下のデモのように，ドラッグ&ドロップも直感的に実装できる．

See the Pen RxJS 6 mouse drag with Spiderman by Sota Hatakeyama (@chooblarin) on CodePen.

こちらのデモは下記のスライドをみてつくった．

Reactive Animations with RxJS and CSS Variables by David Khourshid

非同期プログラミング (Promise, async/await)

JavaScript では，ES2015 に導入されるずっと前から Promise が使われていた．最近では async/await のコードをよく目にする．この前読んだ面白い記事を紹介したい．

この記事を書いた Staltz さんは，Cycle.js の作者でもあり，Rx の有名な (おそらく最も有名) 入門記事の筆者でもある．

彼は記事の中で Promise についてこう述べている．

Basically Promises are not neutral enough because they introduce 4 opinions:

  • Eager, not lazy
  • No cancellation
  • Never synchronous
  • then() is a mix of map() and flatMap()

Promise が opinionated である(Staltz 氏曰く)理由について，いくつかみてみようと思う．


Promise は即時評価

Promise を作成するとにに渡すコールバックは即時評価である．then() を呼び出す前に評価される．

const promise = new Promise((resolve, reject) => {
  console.log("hello");
});

一方，RxJS についてみてみる (以下のコード)．

const observable = Observable.create(subscriber => {
  console.log("hello");
});

上記の方法で作成した Observable は Cold Observable である．subscribe() するまで hello はコンソール出力されません．(但し，subscribe() の度に実行される．)


Promise はキャンセルできない

Promise にはキャンセルの術がない．

あまり関係が無いけどキャンセル処理といえば，以下のトークがおすすめ．RxJS ならキャンセル処理をエレガントに実装することが出来る．

YouTube - Netflix JavaScript Talks - RxJS + Redux + React = Amazing!


then() の振る舞い

Promise のthenの振る舞いについて，以下のコードをみて欲しい．

const promise1 = Promise.resolve("hello").then(x => `${x}!!`);
const promise2 = Promise.resolve("hello").then(x => Promise.resolve(`${x}!!`));

promise1 と promise2 は同じ値 hello!! を表す．更には...

const promise3 = Promise.resolve("hello").then(x =>
  Promise.resolve(Promise.resolve(Promise.resolve(`${x}!!`)))
);
promise3.then(console.log);
// > hello!!

...どんなに包んでも同じである．この振る舞いはそこまで自明ではないと思う．例えば以下のような誤解もみられる．

おわり 👋

RxJS で遊ぶと楽しい．（でも正直，RxJS の pipe() は面倒くさい．|> まだかなあ...)