Submit Search
Upload
Promiseでコールバック地獄から解放された話
•
18 likes
•
10,483 views
Sota Sugiura
Follow
about Promise(JavaScript)
Read less
Read more
Technology
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
itamae + Serverspecで テスト駆動インフラやってみた #shibuyarb
itamae + Serverspecで テスト駆動インフラやってみた #shibuyarb
Go Sueyoshi (a.k.a sue445)
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
JavaScript非同期処理 入門
JavaScript非同期処理 入門
Ishibashi Ryosuke
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Masahiro Wakame
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
Takuma Morikawa
WCO2012「PHP教室」
WCO2012「PHP教室」
Takuma Morikawa
Kink: invokedynamic on a prototype-based language
Kink: invokedynamic on a prototype-based language
Taku Miyakawa
Recommended
コンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
itamae + Serverspecで テスト駆動インフラやってみた #shibuyarb
itamae + Serverspecで テスト駆動インフラやってみた #shibuyarb
Go Sueyoshi (a.k.a sue445)
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
JavaScript非同期処理 入門
JavaScript非同期処理 入門
Ishibashi Ryosuke
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Masahiro Wakame
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
Takuma Morikawa
WCO2012「PHP教室」
WCO2012「PHP教室」
Takuma Morikawa
Kink: invokedynamic on a prototype-based language
Kink: invokedynamic on a prototype-based language
Taku Miyakawa
Start!! Ruby
Start!! Ruby
mitim
英語コーダー大阪 ー 初めての英語コーダー教室
英語コーダー大阪 ー 初めての英語コーダー教室
Martin Heidegger
Closures and methodMissing are real
Closures and methodMissing are real
Takahiro Sugiura
No skk, no life.
No skk, no life.
digitalghost
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
Oda Shinsuke
Perl 非同期プログラミング
Perl 非同期プログラミング
lestrrat
最近の単体テスト
最近の単体テスト
Ken Morishita
Programming camp 2010 debug hacks
Programming camp 2010 debug hacks
Hiro Yoshioka
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Koichi Sasada
Constexpr 中3女子テクニック
Constexpr 中3女子テクニック
Genya Murakami
「データベース実践入門」から学ぶリレーショナルモデル
「データベース実践入門」から学ぶリレーショナルモデル
Sota Sugiura
TechCrunchTokyo Hackathon 2015
TechCrunchTokyo Hackathon 2015
Sota Sugiura
コミットメッセージの話
コミットメッセージの話
Sota Sugiura
HTTP2入門
HTTP2入門
Sota Sugiura
HTTP入門
HTTP入門
Sota Sugiura
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
各ブラウザでの均等割り付け比較
各ブラウザでの均等割り付け比較
Sota Sugiura
GitHubにおける開発フローについてのお話
GitHubにおける開発フローについてのお話
Sota Sugiura
Web Audio API 入門
Web Audio API 入門
Sota Sugiura
More Related Content
Similar to Promiseでコールバック地獄から解放された話
Start!! Ruby
Start!! Ruby
mitim
英語コーダー大阪 ー 初めての英語コーダー教室
英語コーダー大阪 ー 初めての英語コーダー教室
Martin Heidegger
Closures and methodMissing are real
Closures and methodMissing are real
Takahiro Sugiura
No skk, no life.
No skk, no life.
digitalghost
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
Oda Shinsuke
Perl 非同期プログラミング
Perl 非同期プログラミング
lestrrat
最近の単体テスト
最近の単体テスト
Ken Morishita
Programming camp 2010 debug hacks
Programming camp 2010 debug hacks
Hiro Yoshioka
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Koichi Sasada
Constexpr 中3女子テクニック
Constexpr 中3女子テクニック
Genya Murakami
Similar to Promiseでコールバック地獄から解放された話
(10)
Start!! Ruby
Start!! Ruby
英語コーダー大阪 ー 初めての英語コーダー教室
英語コーダー大阪 ー 初めての英語コーダー教室
Closures and methodMissing are real
Closures and methodMissing are real
No skk, no life.
No skk, no life.
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
Perl 非同期プログラミング
Perl 非同期プログラミング
最近の単体テスト
最近の単体テスト
Programming camp 2010 debug hacks
Programming camp 2010 debug hacks
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Constexpr 中3女子テクニック
Constexpr 中3女子テクニック
More from Sota Sugiura
「データベース実践入門」から学ぶリレーショナルモデル
「データベース実践入門」から学ぶリレーショナルモデル
Sota Sugiura
TechCrunchTokyo Hackathon 2015
TechCrunchTokyo Hackathon 2015
Sota Sugiura
コミットメッセージの話
コミットメッセージの話
Sota Sugiura
HTTP2入門
HTTP2入門
Sota Sugiura
HTTP入門
HTTP入門
Sota Sugiura
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
各ブラウザでの均等割り付け比較
各ブラウザでの均等割り付け比較
Sota Sugiura
GitHubにおける開発フローについてのお話
GitHubにおける開発フローについてのお話
Sota Sugiura
Web Audio API 入門
Web Audio API 入門
Sota Sugiura
More from Sota Sugiura
(9)
「データベース実践入門」から学ぶリレーショナルモデル
「データベース実践入門」から学ぶリレーショナルモデル
TechCrunchTokyo Hackathon 2015
TechCrunchTokyo Hackathon 2015
コミットメッセージの話
コミットメッセージの話
HTTP2入門
HTTP2入門
HTTP入門
HTTP入門
今さら聞けないXSS
今さら聞けないXSS
各ブラウザでの均等割り付け比較
各ブラウザでの均等割り付け比較
GitHubにおける開発フローについてのお話
GitHubにおける開発フローについてのお話
Web Audio API 入門
Web Audio API 入門
Promiseでコールバック地獄から解放された話
1.
Promiseでコールバック地獄から解放された話 杉浦颯太(sugiuras)
2.
はじめまして • 杉浦 颯太(すぎうら
そうた)と申します • 2015年入社予定のクソザコ大学生です • 現在はアルバイトとして働かせてもらっています • 音楽好きです • Twitter / GitHub: @sota1235
3.
バイト初めて一ヶ月… • 14入社の方とかに「来年上司になる方ですカァ!!!」って られる •
みんなすぐ僕より(物理的に)低い位置でお話しようとする • あんまりいじめないでください
4.
アジェンダ 1. コールバック地獄の話 2. Promiseの話 3.
実装例
5.
アジェンダ 1. コールバック地獄の話 2. Promiseの話 3.
実装例
6.
例えば • こんなコードが書きたい • 「hoge
APIを叩いて∼」 • 「その結果を元にリクエスト作ってmoge APIを叩いて∼」 • 「さらにその結果をもとにfuga APIを叩いて∼」 • 「それをページに表示させたいヾ(ó `o)ノ」
7.
書いてみた\(^0^)/
8.
こうなる/(^0^)\ $.get("http://api.hoge.com?hoge=hoge", function(err, hoge)
{ if(err) { console.error(err); return; } $.get(“http://api.moge.com?moge="+hoge, function(err, moge) { if(err) { console.error(err); return; } $.get(“http://api.fuga.com?fuga="+moge, function(err, fuga) { if(err) { console.error(err); return; } $('body').val(fuga); }); }); });
9.
これぞコールバック地獄 • きれいな書き方もあるかもしれないが、安直に書けばこんな感じ • 「さらにこのAPIも噛ませて…」とかなるとどんどんネストが… •
「あ、この処理をパラメータ変えて3回飛ばして」とか上司に言 われたらもう… • 読むのも書くのもつらいですよね
10.
そこでPromise Promiseとはなんぞやと、この地獄の抜け出し方を見てみましょう
11.
アジェンダ 1. コールバック地獄の話 2. Promiseの話 3.
実装例
12.
Promise is 何 •
非同期処理の結果を抱え込むオブジェクト • 処理の結果に影響されることなく値を返す約束手形を渡してくれる のがPromiseオブジェクト • この約束手形をつないだりすることでネストが深くなるのが防げ る • また、処理の順序等の制御が簡単になる
13.
なるほどわからん(́・ω・`)
14.
インスタンス生成 • new Promise();
←こんだけ! • 基本的な使い方は 1. 関数を作る 2. Promiseインスタンスを生成する 3. インスタンスの引数に処理を書き、約束を取り付ける
15.
Promise化された関数 /* not Promise
*/ var func = function(num, callback) { if(num % 2 == 0) { callback(null, num / 2); } else { callback("Error", null); } } ! /* Promise */ var pfunc = function(num) { var promise = new Promise(function(resolve, reject) { if(num % 2 == 0) { resolve(num / 2); // success } else { reject(“Error"); // failure } }); return promise; }
16.
Promise化された関数を使う /* not Promise
*/ func(4, function(err, result) { if(err) { console.error(err); return; } console.log(result); }); ! /* Promise */ pfunc.then(function(result) { console.log(result); // success }).catch(function(err) { console.error(err); // failure });
17.
.then() • resolve()された結果を受け取るメソッド ! var
p = new Promise(function(resolve, reject) { resolve("Hello, World!"); }); ! p.then(function(result) { console.log(result); // Hello, World! });
18.
.catch() • reject()された結果を受け取るメソッド • いわゆるエラー処理 ! ! var
p = new Promise(function(resolve, reject) { reject(“ERROR!!”); }); ! p.catch(function(err) { console.error(err); // ERROR!! });
19.
.all() • Promiseオブジェクトが持つメソッド • 引数にPromiseインスタンスの配列を渡す •
全てのインスタンスの処理が終わった時、配列の順番に結果が格納 された配列が帰ってくる ! !
20.
.all() var p1 =
new Promise(function(resolve, reject) { resolve(“1”); }); var p2 = new Promise(function(resolve, reject) { resolve(“2”); }); var promises = [p1, p2]; Promise.all(promises).then(function(results) { console.log(results); // [1, 2] });
21.
.race() • Promiseオブジェクトが持つメソッド • 引数にPromiseインスタンスの配列を渡す •
全てのインスタンスのどれか1つでも処理が終わるとその結果だけ を返す • 1つの処理が終わった時点で他の処理が破棄されるわけではないの で注意 !
22.
var p1 =
new Promise(function(resolve, reject) { resolve("1"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(function() { resolve("2"); }, 1000); }); var promises = [p1, p2]; Promise.race(promises).then(function(result) { console.log(result); // 1 }); .race()
23.
結局Promiseの何が嬉しいの • ネストが浅くなる • 非同期処理の制御が容易になる •
メソッドチェーンで読みやすく • 非同期関数のエラー処理の仕様が強制的に統一される • reject()でエラー処理を行うため • 全てはcatch()に吸収される
24.
注意すべきとこ • テストをするのに工夫が必要(らしい) • サポートしてないブラウザがある •
→ polyfillライブラリを使用することで解決できる • es6-promiseというのが一番よさげ
25.
アジェンダ 1. コールバック地獄の話 2. Promiseの話 3.
実装例
26.
さっきのコールバック地獄 $.get("http://api.hoge.com?hoge=hoge", function(err, hoge)
{ if(err) { console.error(err); return; } $.get(“http://api.moge.com?moge="+hoge, function(err, moge) { if(err) { console.error(err); return; } $.get(“http://api.fuga.com?fuga="+moge, function(err, fuga) { if(err) { console.error(err); return; } $('body').val(fuga); }); }); });
27.
関数化 & Promise化 •
先ほどの3つのAPIを叩く処理を別々に関数化する • かつPromise化する
28.
関数化 & Promise化(hoge
API) var hoge = function() { return new Promise(function(resolve, reject) { $.get("http://api.hoge.com?hoge=hoge", function(err, hoge) { if(err) reject(err); resolve(hoge); }); }); }
29.
関数化 & Promise化(moge/fuga
API) var moge = function(hoge) { return new Promise(function(resolve, reject) { $.get("http://api.moge.com?moge"+hoge, function(err, moge) { if(err) reject(err); resolve(moge); }); }); } var fuga = function(moge) { return new Promise(function(resolve, reject) { $.get("http://api.fuga.com?fuga"+moge, function(err, fuga) { if(err) reject(err); resolve(fuga); }); }); }
30.
つなげる!!!! hoge.then(moge) .then(fuga) .then(function(result) { $('body').val(result); }) .catch(function(err) { console.error(err); });
31.
つなげる!(補足) hoge .then(moge) /* * hoge.then(function(result) {
moge(result) }) と同じ */
32.
浅くなったー(*́ω`*) • then()とcatch()をつなげて処理を渡していくのでネストが深くな らない • Promiseオブジェクト以外の処理も渡すことができる •
Promiseでなくても明示的にreturnすることでまたthen()をつな げることができる
33.
参考 • Promiseの本 • http://azu.github.io/promises-book/
34.
ご静聴ありがとうございました
Download now