Movatterモバイル変換


[0]ホーム

URL:


Masakazu Muraoka, profile picture
Uploaded byMasakazu Muraoka
PDF, PPTX3,531 views

JS非同期処理のいま

JS非同期処理のいま

Embed presentation

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

Recommended

PPTX
react-jsonschema-formについて
PPTX
Fetch apiについて
PDF
Swaggerのさわりだけ
PPTX
Mozapps installがなくなったことへの不平不満
PDF
Espruinoの紹介
PDF
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
PDF
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
PPTX
Thing.jsについて
PDF
FxOSはウェアラブルデバイスの夢を見るか?
PDF
Htmlのコトバ
PDF
Yeomanではじめる爆速webアプリ開発
PDF
業務系WebアプリケーションがStrutsから旅立つ日
PDF
次世代Web業務アプリケーション
PDF
Gaiaのソースコードに見るちょっと未来のweb app開発
PDF
イマドキのフロントエンドエンジニアの道具箱
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PDF
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
PDF
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
PDF
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
PDF
【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ
PDF
Html5 and Graphics
PDF
HTML5でOpen Dataをやってみた
PDF
AMD basic and practice
PDF
HTML5が最近どうなっていて何があぶなっかしいのか?
PDF
これからのモバイルWebと最新動向
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PDF
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
KEY
JavaScript on GitHub (#kyotojs)
 
PDF
Disaster Risk Reduction
PPT
DNA of Automation - Sudeep Somani

More Related Content

PPTX
react-jsonschema-formについて
PPTX
Fetch apiについて
PDF
Swaggerのさわりだけ
PPTX
Mozapps installがなくなったことへの不平不満
PDF
Espruinoの紹介
PDF
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
PDF
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
PPTX
Thing.jsについて
react-jsonschema-formについて
Fetch apiについて
Swaggerのさわりだけ
Mozapps installがなくなったことへの不平不満
Espruinoの紹介
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Thing.jsについて

What's hot

PDF
FxOSはウェアラブルデバイスの夢を見るか?
PDF
Htmlのコトバ
PDF
Yeomanではじめる爆速webアプリ開発
PDF
業務系WebアプリケーションがStrutsから旅立つ日
PDF
次世代Web業務アプリケーション
PDF
Gaiaのソースコードに見るちょっと未来のweb app開発
PDF
イマドキのフロントエンドエンジニアの道具箱
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PDF
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
PDF
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
PDF
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
PDF
【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ
PDF
Html5 and Graphics
PDF
HTML5でOpen Dataをやってみた
PDF
AMD basic and practice
PDF
HTML5が最近どうなっていて何があぶなっかしいのか?
PDF
これからのモバイルWebと最新動向
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PDF
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
KEY
JavaScript on GitHub (#kyotojs)
 
FxOSはウェアラブルデバイスの夢を見るか?
Htmlのコトバ
Yeomanではじめる爆速webアプリ開発
業務系WebアプリケーションがStrutsから旅立つ日
次世代Web業務アプリケーション
Gaiaのソースコードに見るちょっと未来のweb app開発
イマドキのフロントエンドエンジニアの道具箱
オープンソースで始めるオフラインアプリケーション開発入門
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ
Html5 and Graphics
HTML5でOpen Dataをやってみた
AMD basic and practice
HTML5が最近どうなっていて何があぶなっかしいのか?
これからのモバイルWebと最新動向
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
JavaScript on GitHub (#kyotojs)
 

Viewers also liked

PDF
Disaster Risk Reduction
PPT
DNA of Automation - Sudeep Somani
DOC
Guia de estudio saso ii
PPTX
Skadoosh ! Lessons in Self Management from Kung Fu Panda
PPTX
気象庁発表の地震情報
PPTX
Xsi unity pipeline
PPTX
Hashtags & Retweets: Using Twitter to aid Community, Communication and Casual...
PDF
Grafico diario del dax perfomance index para el 09 12-2011
PDF
Faerie Glen Photos from Isle of Skye, Scotland - It's like visiting The Shire!
PPTX
Championing the Golden Quarter with Google Shopping - IN
DOC
Zaragoza turismo 234
PDF
Social Network Analysis Of Intangibles
PDF
Getting the fish (ball) in the net
PDF
off grid solar product UNIVPO
PDF
Snaky assumptions a creative approach
PPTX
AMA INA you two are role models for everyone who believes in eternal love, fo...
PDF
PRywatki na Wykładzinie bez krawatów vol.1 - Po co dane w komunikacji w socia...
DOCX
8th grade founding father project[1]
PPTX
Simple School Lunch Ideas
Disaster Risk Reduction
DNA of Automation - Sudeep Somani
Guia de estudio saso ii
Skadoosh ! Lessons in Self Management from Kung Fu Panda
気象庁発表の地震情報
Xsi unity pipeline
Hashtags & Retweets: Using Twitter to aid Community, Communication and Casual...
Grafico diario del dax perfomance index para el 09 12-2011
Faerie Glen Photos from Isle of Skye, Scotland - It's like visiting The Shire!
Championing the Golden Quarter with Google Shopping - IN
Zaragoza turismo 234
Social Network Analysis Of Intangibles
Getting the fish (ball) in the net
off grid solar product UNIVPO
Snaky assumptions a creative approach
AMA INA you two are role models for everyone who believes in eternal love, fo...
PRywatki na Wykładzinie bez krawatów vol.1 - Po co dane w komunikacji w socia...
8th grade founding father project[1]
Simple School Lunch Ideas

Similar to JS非同期処理のいま

PPTX
モダン JavaScript における非同期処理 - Promise, async/await -
PPTX
JavaScript 非同期処理 入門
PDF
Async flow controll basic and practice
PDF
Async Enhancement
PDF
Promiseでコールバック地獄から解放された話
PDF
Flow.js
 
PDF
JavaScriptの非同期処理
PPTX
Reactive
PDF
About promise
 
PPTX
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
PDF
東京Node学園#3 Domains & Isolates
PDF
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
PDF
async/await不要論
PDF
非同期プログラミング養成ギブスとしてのNode.js
PDF
Promise async await
PDF
Observableで非同期処理
PDF
Introduction pp.js
PDF
Nodeについて
KEY
非同期処理をちょっとはラクに。Promises:aほか
PDF
AngularJSでの非同期処理の話
モダン JavaScript における非同期処理 - Promise, async/await -
JavaScript 非同期処理 入門
Async flow controll basic and practice
Async Enhancement
Promiseでコールバック地獄から解放された話
Flow.js
 
JavaScriptの非同期処理
Reactive
About promise
 
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
東京Node学園#3 Domains & Isolates
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
async/await不要論
非同期プログラミング養成ギブスとしてのNode.js
Promise async await
Observableで非同期処理
Introduction pp.js
Nodeについて
非同期処理をちょっとはラクに。Promises:aほか
AngularJSでの非同期処理の話

More from Masakazu Muraoka

PPTX
Kerasで可視化いろいろ
PPTX
Async awaitでの繰り返し処理についての小話
PDF
実はとれました。System xhrでcsv形式のopen dataを取得する
PDF
Html5でOpen Dataをやってみる
PDF
HTML5 and Graphics
PDF
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
PDF
MarkupCafe - html5j Markup group
PDF
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
PDF
ボクたちのWWW Webクリエイターのこれからを考える
PDF
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
PDF
Yeoman RIAビルドツール超入門
PDF
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
PDF
IE6をやめようと思ってももう手遅れ
Kerasで可視化いろいろ
Async awaitでの繰り返し処理についての小話
実はとれました。System xhrでcsv形式のopen dataを取得する
Html5でOpen Dataをやってみる
HTML5 and Graphics
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
MarkupCafe - html5j Markup group
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
ボクたちのWWW Webクリエイターのこれからを考える
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
Yeoman RIAビルドツール超入門
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
IE6をやめようと思ってももう手遅れ

JS非同期処理のいま


[8]ページ先頭

©2009-2025 Movatter.jp