ES6からデフォルトでサポートされるようになったのがPromiseです。すでにjQueryやその他のライブラリで使えるようになっています。whenやallなどの機能があり、その実行順番などについて分かりづらいと感じている方も多いのではないでしょうか。 そこで使ってみたいのがPromiseesです。Promise処理をビジュアル化してくれる学習用ソフトウェアです。

Promiseesの使い方

Promiseesでは多くのデモが用意されています。それを表示したところです。

左側にコード、右側にそれをビジュアル化した結果が表示されています。アニメーションしながら実行順番が確認できます。

Promise.allを使った例。

より複雑な例もあります。こうなるとPromiseを理解していても順番が分からないのではないでしょうか。

デモを実行しているところです。

Promiseesは非同期実行なので実行順番を保証するものではありません(thenでつないだ場合は別)。allやwhenなどをうまく使って処理を行うことで全体のコードが見通し良くなるでしょう。Promiseを使いこなすためにもPromiseesを使ってみてください。

PromiseesはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

bevacqua/promisees Promisees · Courtesy of ponyfoo.com