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.
Upcoming SlideShare
ipad smtp settings for hotmail | How to set up Hotmail account on iPad | Hotmail on iPhone
Next
Download to read offline and view in fullscreen.

20

Share

Download to read offline

JS非同期処理のいま

Download to read offline

JS非同期処理のいま

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 !
  • shunkudou5

    Apr. 4, 2016
  • AkihikoKigure

    Feb. 13, 2016
  • tacarz

    Feb. 9, 2016
  • kawakawa__

    Feb. 9, 2016
  • Uemmra3

    Feb. 9, 2016
  • ShunSonohara

    Feb. 9, 2016
  • luccafort

    Feb. 9, 2016
  • MasayukiAmano

    Feb. 4, 2016
  • tetsuoyutani

    Feb. 3, 2016
  • Koooooohei

    Feb. 3, 2016
  • kwaka1208

    Feb. 3, 2016
  • naoaki011

    Feb. 2, 2016
  • ssuser43bf86

    Feb. 2, 2016
  • hyoshita

    Feb. 2, 2016
  • itokami1123

    Feb. 2, 2016
  • yasushihagai

    Feb. 2, 2016
  • HidetakaOkamoto

    Feb. 2, 2016
  • toshihirokawachi

    Feb. 2, 2016
  • yutakiyama

    Feb. 1, 2016
  • KanSakamoto

    Feb. 1, 2016

JS非同期処理のいま

Views

Total views

3,396

On Slideshare

0

From embeds

0

Number of embeds

166

Actions

Downloads

6

Shares

0

Comments

0

Likes

20

×