JS非同期処理のいま

1. JS非同期処理のいま
2016.1.29
Developers in KOBEVol. 3
Bathtimefish 村岡 正和
Promise, Generator, async/awat

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
日本ウェアラブルデバイスユーザー会共同発起人 / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
神戸デジタル・ラボ 社外取締役
@bathtimefish
HTML5-WEST.jp

3. 個人的に約2年ぶりのネタです。
http://www.slideshare.net/bathtimefish/async-flow-controll-basic-and-practice

4. function() {
callback( function() {
callback( function() {
callback( function () {
callback( function () {
callback( function () {
callback( function () {
callback( function () {
callback( function () {
callback( function () {

5. いろんな解決方法が提示されてきたけど、
だいたい標準がまとまってきたと思う。

6. 「MongoDBに接続してドキュメントをひとつ取得する」
という処理をいまっぽい非同期処理で書き分けてみた。

7. ベタなコールバック

8. https://github.com/bathtimefish/async-example-201601/blob/master/sample1.js

9. コールバックがネストしてると
DB接続、ドキュメント取得をきれいに
独立した関数にするのがめんどい。。

10. Promise

11. https://github.com/bathtimefish/async-example-201601/blob/master/sample2.js

12. Promiseのメソッドチェーンで
斜めじゃなく縦に読めるようになった。
それぞれ独立した関数でデザインできるのは
いいけどそれぞれがthen()内のスコープに
依存するのが柔軟性に欠ける。

13. ES6 Generators

14. https://github.com/bathtimefish/async-example-201601/blob/master/sample3.js

15. coを利用するとPromiseでresolve()したものを
yieldで呼べる。function* () で定義した関数が
Generatorを返すという仕様。
ようやく非同期処理が縦に読めるようになった。
co()がクロージャになってるのがおしい感。

16. ES7 async/await

17. https://github.com/bathtimefish/async-example-201601/blob/master/sample4.js

18. $ npm install -g babel-cli
$ npm install --save babel
$ npm install --save babel-plugin-syntax-async-functions
$ npm install --save babel-plugin-transform-regenerator
$ npm install --save babel-preset-es2015
$ vi .babelrc
̶
{
"presets": ["es2015"],
"plugins": ["syntax-async-functions", "transform-regenerator"]
}
̶
$ babel-node sample4.js

19. https://github.com/bathtimefish/async-example-201601/blob/master/sample5.js

20. C#で使われている書き方。
asyncでラベリングされた関数内でawaitキーワード
が使える。Generatorと同様resolve()されたものが
awaitの関数に返る。try catchするとreject()された
ものがcatchに返る。だいぶ直感的。
やっとここまできた感。

21. まとめ

22. PromiseはWebブラウザでも当たり前になったし
Generatorsはnode.jsで普通に使えるようになった。
2年前よりだいぶすっきりしたよね。
あとはnode.js/Webブラウザでasync/awaitが
ネイティブになってほしいですはよ。

23. Thanks !