Promise理解してますか？
みなさん、JavaScriptのPromiseは使いこなしていますか？
業務ではしばしば登場するが、ドキュメントを読んでもよく分からない。「とりあえず.then(res => ...)と書けばいいんでしょ」ということで毎回曖昧に済ましている。
こんな方、多いんじゃないでしょうか。
今回は、そんな方に向けて
「Promise完全に理解した！」となれるようなクイズ
をご用意しました。
ただドキュメントを読むよりも、理解度がグンと上がるはずです。ぜひ取り組んでみてください。
初心者向けの実行方法の解説
ブラウザの検証ツールを使うのが手っ取り早いと思います。「自分が使用しているブラウザ」「検証ツール」「コンソール」「開き方」などで調べてみてください。
ちなみにChrome + Macの場合は option + command + iがショートカットです。
コーディング自体はVScodeなどのエディタを使った方が書きやすいかもしれません。その場合は、エディタで書いたコードを、ブラウザのコンソールにコピペして実行してください。
（これすらメンドウな人は、ブラウザでコードを実行できるサービスを使うのも手です。）
クイズ本編
- 問1: api を完成させてください。
- 問2: fetch2 に対して、 fetch1 と全く同じタイミング（ api() 実行後かつ1000ms経過前）で console.log('② fetch started') を足してみてください。
const api = () => // 1000ms後にresolveされるpromiseを返す関数
const fetch1 = () => {
console.log('① fetch start')
api().then(() => {
console.log('③ fetch completed')
})
console.log('② fetch started')
}
const fetch2 = async () => {
console.log('① fetch start')
await api()
console.log('③ fetch completed')
ヒント
1問目はPromiseクラスの基本的な使い方です。Promiseクラスについて調べると解けます。
2問目は「awaitしようとしているPromiseインスタンスがどこにあるのか」といった感覚をつかむためのものです。
- awaitやthenはPromiseインスタンスに対して使うもの。
- JavaScriptは全てがObject（になりうる）、Promiseインスタンスも例外ではない。変数に代入したりConsoleに出力したり可能。
さえ理解できるば解けるはずです。
特別な関数や構文を使ったり、テクニカルなことをする必要はありません。
Promiseインスタンスはどこにあるのか、というところから考えてみましょう。
こちらのドキュメントが分かりやすいと思います。
解答
解き終わったらスクロールしてください。
// 問1
const api = () => {
console.log('api start')
return new Promise( resolve => {
setTimeout(() => {
console.log('api completed')
resolve()
}, 1000)
})
}
const fetch1 = () => {
console.log('① fetch start')
api().then(() => {
console.log('③ fetch completed')
})
console.log('② fetch started')
}
// 問2
const fetch2 = async () => {
console.log('① fetch start')
const temp = api()
console.log('② fetch started')
const result = await temp
console.log('③ fetch completed')
}
fetch2()
みなさん、解けましたか？
一発で解けたアナタ。できるエンジニアです。胸を張ってPromiseを使っていきましょう。
間違えてしまったアナタ。心配ありません。Promiseは誰しもつまずくところです。ヒントやドキュメントを読んで、再度挑戦してみてください。
おわりに
このクイズは、チームの上司の方が考案してくださったものです。ジュニアレベルのメンバーにとっては大きな助けとなりました。
私もこんな学習コンテンツを考案したいものです。精進します。
第2弾も投稿予定ですしました！
オブジェクト型の"参照"を完全に理解できるかもしれないクイズ