Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS非同期処理のいま

JS非同期処理のいま

JS非同期処理のいま

  1. 1. JS非同期処理のいま 2016.1.29
 Developers in KOBEVol. 3 Bathtimefish 村岡 正和 Promise, Generator, async/awat
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー 日本ウェアラブルデバイスユーザー会共同発起人 / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング 神戸デジタル・ラボ 社外取締役 @bathtimefish HTML5-WEST.jp
  3. 3. 個人的に約2年ぶりのネタです。 http://www.slideshare.net/bathtimefish/async-flow-controll-basic-and-practice
  4. 4. function() { callback( function() { callback( function() { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () {
  5. 5. いろんな解決方法が提示されてきたけど、 だいたい標準がまとまってきたと思う。
  6. 6. 「MongoDBに接続してドキュメントをひとつ取得する」 という処理をいまっぽい非同期処理で書き分けてみた。
  7. 7. ベタなコールバック
  8. 8. https://github.com/bathtimefish/async-example-201601/blob/master/sample1.js
  9. 9. コールバックがネストしてると DB接続、ドキュメント取得をきれいに 独立した関数にするのがめんどい。。
  10. 10. Promise
  11. 11. https://github.com/bathtimefish/async-example-201601/blob/master/sample2.js
  12. 12. Promiseのメソッドチェーンで 斜めじゃなく縦に読めるようになった。 それぞれ独立した関数でデザインできるのは いいけどそれぞれがthen()内のスコープに 依存するのが柔軟性に欠ける。
  13. 13. ES6 Generators
  14. 14. https://github.com/bathtimefish/async-example-201601/blob/master/sample3.js
  15. 15. coを利用するとPromiseでresolve()したものを yieldで呼べる。function* () で定義した関数が Generatorを返すという仕様。 ようやく非同期処理が縦に読めるようになった。 co()がクロージャになってるのがおしい感。
  16. 16. ES7 async/await
  17. 17. https://github.com/bathtimefish/async-example-201601/blob/master/sample4.js
  18. 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. 19. https://github.com/bathtimefish/async-example-201601/blob/master/sample5.js
  20. 20. C#で使われている書き方。 asyncでラベリングされた関数内でawaitキーワード が使える。Generatorと同様resolve()されたものが awaitの関数に返る。try catchするとreject()された ものがcatchに返る。だいぶ直感的。 やっとここまできた感。
  21. 21. まとめ
  22. 22. PromiseはWebブラウザでも当たり前になったし Generatorsはnode.jsで普通に使えるようになった。 2年前よりだいぶすっきりしたよね。 あとはnode.js/Webブラウザでasync/awaitが ネイティブになってほしいですはよ。
  23. 23. Thanks !

×