JavaScriptの async/await, 非同期処理

1. async await完全に理解した
asuka y
Nov. 25 2021

2. 対象
JavaScript完全に理解した人

3. アジェンダ
1. async awaitとは何か
2. JavaScriptにおけるasync await
3. ベストプラクティス

4. 1. async awaitとは何か

5. async awaitとは何か
async await → 非同期関数の構文
非同期関数
非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。
async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェー
ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。
MDN Web Docs

6. async awaitとは何か
async await → 非同期関数の構文
→ 糖衣構文だとわかる
非同期関数
非同期関数は async キーワードで宣言され、その中で await キーワードを使うことができます。
async および await キーワードを使用することで、 プロミスベースの非同期の動作を、プロミスチェー
ンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。
MDN Web Docs

7. そもそも非同期処理とは何か
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
console.log('calling');
resolveAfter2Seconds();
console.log('called');
}
asyncCall();
①→
❷→
③→
start
end
① calling
③ called
❷ resolved
非同期

8. そもそも非同期処理とは何か
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
await resolveAfter2Seconds();
console.log('called');
}
asyncCall(); // 非同期関数
①→
❷→
③→
start
end
① calling
③ called
非同期
❷ resolved

9. async awaitを利用しない場合
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
return new Promise(resolve => {
console.log('calling');
resolveAfter2Seconds().then(() => {
console.log('called');
});
});
}
asyncCall(); // 非同期関数

10. async awaitを利用しない場合
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
return new Promise(resolve => {
console.log('calling');
resolveAfter2Seconds().then(() => {
console.log('called');
});
});
}
asyncCall(); // 非同期関数
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
await resolveAfter2Seconds();
console.log('called');
}
asyncCall(); // 非同期関数
async awaitによってシンプルな構文になる
(糖衣構文)

11. Promiseとは何か
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
return new Promise(resolve => {
console.log('calling');
resolveAfter2Seconds().then(() => {
console.log('called');
});
});
}
asyncCall(); // 非同期関数
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
await resolveAfter2Seconds();
console.log('called');
}
asyncCall(); // 非同期関数
async awaitによってシンプルな構文になる
(糖衣構文)

12. Promiseとは何か
Promise → 非同期処理の完了の結果およびその結果の値を表す
C#のTask や DartのFuture に相当する
Promise
作成された時点では分からなくてもよい値へのプロキシーです。 非同期のアクションの成功値または
失敗理由にハンドラーを結びつけることができます。 これにより、非同期メソッドは結果の値を返す
代わりに、未来のある時点で値を提供するプロミスを返すことで、同期メソッドと同じように値を返す
ことができるようになります。
MDN Web Docs

13. Promiseとは何か
①→
❷→
③→
start
end
① calling
③ called
❷ resolved
非同期
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
return new Promise(resolve => {
console.log('calling');
resolveAfter2Seconds().then(() => {
console.log('called');
});
});
}
asyncCall(); // 非同期関数
then(成功時)

14. Promiseとは何か
①→
❷→
③→
start
end
① calling
③ called
❷ resolved
非同期
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log('resolved');
resolve();
}, 2000);
});
}
function asyncCall() {
return new Promise(resolve => {
console.log('calling');
resolveAfter2Seconds().then(() => {
console.log('called');
});
});
}
asyncCall(); // 非同期関数
then(成功時)
非同期のアクションの成功値または失敗理由にハンドラーを結び
つけることができる

15. 2. JavaScriptにおけるasync await

16. 2. JavaScriptにおけるasync await
非同期処理

17. JavaScriptにおける非同期処理
GoやC#では非同期処理といえば並行処理であるが，
挙動から推測するにJavaScriptは並行処理ではない
(おそらく歴史的経緯により) Dartもシングルスレッドである
JavaScript
プロトタイプベースで、 シングルスレッドで、動的型付けを持ち、そしてオブジェクト指向、命令型、宣
言型 (関数プログラミングなど ) といったスタイルをサポートするマルチパラダイムのスクリプト言語で
す。
MDN Web Docs

18. スレッド2
並行処理
start
end
any...
any...
非同期
メインスレッド
any...
ランタイム側で同時実行しているように
見せかけるようタスクをスケジュールす
る

19. JavaScriptにおける非同期処理
start
end
any...
any...
非同期
スレッド
any...
1スレッド内で処理が行われるため，同時に複数の処理が
並行して行われることがない

20. JavaScriptにおける非同期処理
start
end
any...
any...
非同期
スレッド
while (true) {...}
1スレッド内で処理が行われるため，同時に複数の処理が
並行して行われることがない
非同期処理を呼び出した後，非同期処理が実行されるまで
の処理が一向に終わらない場合，ブラウザはどうなるのか?

21. JavaScriptにおける非同期処理
start
end
any...
any...
非同期
スレッド
while (true) {...}
1スレッド内で処理が行われるため，同時に複数の処理が
並行して行われることがない
非同期処理を呼び出した後，非同期処理が実行されるまで
の処理が一向に終わらない場合，ブラウザはどうなるのか?
画面が一切応答しなくなる
(呼び出した非同期処理も実行されない )

22. JavaScriptにおける非同期処理
start
end
any...
非同期
スレッド
while (true) {...}
1スレッド内で処理が行われるため，同時に複数の処理が
並行して行われることがない
非同期処理を呼び出した後，非同期処理が実行されるまで
の処理が一向に終わらない場合，ブラウザはどうなるのか?
非同期処理が終わらないのもダメ
any...

23. ベストプラクティス

24. ベストプラクティス
1. 1つの処理が数秒以上実行するような処理を書かない
a. 小さい処理の実行単位で非同期処理にする
2. 非同期処理 ≠ 並行処理である
a. 非同期で呼び出す処理自体も小さくする必要がある
start
end
any...
any...
非同期
スレッド
any...
非同期
...

25. async await完全に理解した
END