※この記事はアドベントカレンダー当日投稿のため、現在執筆途中です。
近日中に追記します。（最低限読める部分だけ先に公開
はじめに
初めまして、Aliceといいます。
現在、エンジニアを目指してプログラミングを勉強しているのですが、JavaScriptのPromiseという概念の理解にとても苦戦しました。
自戒の意味を込めてつらつらと記事を書いていこうと思います。
技術記事というものを初めて書くので拙い部分がたくさんあるかもしれませんが、温かい目で見ていただけると嬉しいです。
(僕のように、基礎の基礎を勉強している人に見てもらえると特に嬉しいです。)
非同期処理・同期処理とは
Promiseの話をする前に、非同期処理・同期処理の話をします。
Promiseは超ざっくり言うと「非同期処理を扱うための仕組み」のことです。
そのため、そもそも非同期処理・同期処理というものが何なのか分かってないと多分この後苦戦することになってしまいます。
なので、先に整理しておきましょう。
同期処理
同期処理とは、「複数の処理を実行する際に、1つの処理が終わるまで次の処理が開始されない方式」のことです。
文章だけではイメージしづらいので、実際にコードを見ながら理解していきましょう。
例えば以下のように、console.logでアルファベットを出力するプログラムがあるとします。
console.log("A");
console.log("B");
console.log("C");
実行結果は、もちろん以下のようになります。
A
B
C
このプログラムは上から順番に実行されています。
Aを表示 → Bを表示 → Cを表示
ひとつ前の処理が完了してから次の処理が行われる —— これが同期処理です。
非同期処理
続いて、非同期処理です。こっちが本命なので、しっかり理解しておきましょう。
非同期処理とは、「時間がかかる処理を待っている間にも、他の処理が進む方式」のことです。 ちなみに、JavaScriptは非同期処理が得意な言語です。
ここでいう非同期処理とは、ネットワーク通信やファイルの読み込みなど、
「結果が返ってくるまで待ち時間がある処理」のことです。
こちらも実際のプログラムを見ながら理解していきましょう。
console.log("A");
setTimeout(() => {
console.log("B");
}, 2000); // 2秒後に実行される
console.log("C");
この場合、実行結果は以下のようになります。
A
C
B
このプログラムで使われているsetTimeoutという関数は指定した時間(ミリ秒)が経過した後に、一度だけ特定の処理を実行するように指示する関数です。
今回の場合は、第二引数に2000ミリ秒すなわち2秒が渡されているので、
console.log("B")は2秒後に実行されます。
つまり、このような流れになります。
① console.log("A")を実行 → 「A」が表示される
② setTimeoutを登録 (※ここでは「後でBを出力して」と予約するだけ)
③ console.log("C")を実行 → 「C」が表示される
④ 2秒経過した後に、②で登録しておいた処理が実行 → 「B」が表示される
なので、実行結果が上のようになります。