コールバック、Promise、async/await をキーワードに、現代 JavaScript の非同期処理についてまとめました。 （ニュージーランド日本人エンジニアコミュニティ engnz の勉強会資料です）

1. モダン JavaScript における
非同期処理
- Promise, async/await -
12/7/2017
Kazunori Hassy Hashikuchi

2. 「非同期処理」って
なんだ？

3. 非同期処理とは
• プログラム全体の流れを止めずに、時間のかかる処
理を実行させる仕組み
• 例：ファイルの読み込み、外部APIの実行、ネット
ワーク通信
• Amazon での画像読み込みとか

4. 今日のテーマ
• 前近代的な実装 （ コールバック ）
• Promise によるコールバックの問題解決
• async/await による Promise の問題解決

5. 前近代的な実装

6. コールバック関数
var req = new XMLHttpRequest();
req.open('GET', 'http://www.some.url', true);
req.onload = function () {
if (req.status === 200) {
onSuccess(req.responseText); // 通信が終わったら何かやる
} else {
onError();
}
};
req.onerror = function () {
onError();
};
req.send();
});

7. なにか問題でも？

8. var req = new XMLHttpRequest();
req.open('GET', 'http://www.some.url', true);
req.onload = function () {
if (req.status === 200) {
var secondReq = new XMLHttpRequest(); // 新たな通信
secondReq.open('GET', ‘http://www.another.url?param='
+ req.responseText, true);
secondReq.onload = function() {
var thirdReq = new XMLHttpRequest(); // 新たな通信
thirdReq.open('GET', ‘http://www.onemore.url?param='
+ secondReq.responseText , true);
thirdReq.onload = function() {
……………….
}
}
} else {
onError();
}
};

9. ネスト地獄

10. そこで Promise ですよ

11. Promise とは
• 従来のコールバックよりも非同期処理を簡潔に記述
できる仕組み
• 「この処理が終わったら次の処理に行く」というパ
ターンに強い

12. 書いてみよう！

13. Promise を返す関数を作る
function getURL(URL) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', URL, true);
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText);
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function () {
reject(new Error(req.statusText));
};
req.send();
});
}

14. // すべて Promise を返す関数
var firstReq = function() {
return getURL('http://www.some.url');
}
var secondReq = function(param) {
return getURL(‘http://www.another.url?' + param);
}
var thirdReq = function(param) {
return getURL('http://www.onemore.url' + param);
}

15. // firstReq が終わったら secondReq を呼ぶ
// secondReq が終わったら firstReq を呼ぶ
firstReq().then(secondReq) // firstReq の値を受け取る
.then(thirdReq) // secondReq の値を受け取る
.catch(function(error){
console.log(error);
});

16. ネストがなくなった！

17. ではもうちょい詳しく

18. Promiseオブジェクトの作り方
• new Promise(function(resolve, reject){…});
• function は何らかの非同期処理
• 引数の resolve と reject は関数
• 正常時には resolve、例外時には reject を呼ぶ

19. Promise の状態
• Pending: 処理が完了していない状態（オブジェク
ト生成直後など）
• Fulfilled: 処理が成功(resolve)した状態
• Rejected: 処理が失敗(reject)した状態

20. Promise チェーン
firstReq().then(secondReq)
.then(thirdReq)
.catch(function(error){
console.log(error);
});
直前の Promise が Fulfilled になったら実行
どこかで Rejected になったら実行

21. then と catch で
つなげるだけ！

22. all と race
// すべての Promise が Fulfilled になったら then を実行する
Promise.all([aReq, bReq, cReq]).then(function(values) {
console.log(values); // すべての非同期処理の返り値の配列
}).catch(function() {
// どれかが Rejected になったら実行
})
// いずれかの Promise が Fulfilled か Rejected になったら処理を進める
Promise.race([aReq, bReq, cReq]).then(function(value) {
console.log(value); // 最初に Fulfilled になった非同期処理の返り値
}).catch(function() {
// 最初に Rejected になったら実行
})

23. めでたしめでたし！

24. ……ほんとに？

25. 非同期処理を
繰り返したい場合
// firstReq を 100回繰り返したいだけ
firstReq().then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
.then(firstReq)
………..// ひたすら繰り返す
.catch(function(error){console.log(error;)});

26. then地獄

27. then 地獄の原因と対策
• 非同期処理が完了した次の処理を、then の中、ま
たは Promise チェーンにつなげて書かなければな
らない
• 「非同期処理が終わるまで待つ」ことが書ければ、
独立した処理として for文で解決するのでは……？

28. そこで
async/await ですよ

29. async / await とは
• async: function につくキーワード。async function
は Promise を返す
• await: async function の中で使えるキーワード。
Promise が解決されるまで処理の実行を待機する

30. 非同期処理のループ
async function firstReq() {
// Promise が Fulfilled か Rejected になるまで待つ = then/catch と同じ
var result = await getURL('http://www.some.url');
return result; // 実際には result で resolve された Promise が返る
}
// ふつうのループ
(async function() {
for(var i=0; i<100; i++) {
console.log(‘value is ’ + firstReq());
}
})().then(() => {
console.log('すべて成功！');
}).catch(() => {
console.log(‘どっかで失敗……’)
});

31. まとめ
• Promise オブジェクトには resolve と reject の関数を設定す
る
• 連続する非同期処理は、Promiseチェーン（then, catch) で簡
潔に記述できる
• 複数の非同期処理を同時に実行したい場合は、Promise.all ま
たは Promise.race を使う
• 非同期処理をループさせたい場合は async / await と併用する
としあわせ

32. 参考文献
• JavaScript Promiseの本
https://azu.github.io/promises-book/
• JavaScriptは如何にしてAsync/Awaitを獲得したの
か Qiita版
http://qiita.com/gaogao_9/items/5417d01b46413579
00c7

33. おわり