Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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 !

×