新人エンジニア向け！JavaScriptの実行順序をわかりやすく解説
山崎講師
こんにちは。ゆうせいです
JavaScriptを書いていると、「なんでこの処理が先に動くの？」「思った順番で実行されない！」と混乱することはありませんか？
実は、JavaScriptの実行順序（実行フロー）にはしっかりとしたルールがあるんです。でも最初はちょっと分かりづらいですよね。
今回は、新人エンジニアの方に向けて、図や例を使いながら、JavaScriptの実行順序の基本をわかりやすく解説していきます！
h2: まず大前提：JavaScriptは「上から順に」動く
最初に覚えておきたいことは、とてもシンプル。
JavaScriptは基本的に、上から下に向かって順番に処理されるということです。
たとえば、以下のコードを見てください：
console.log("①");
console.log("②");
console.log("③");
このコードを実行すると、次のように表示されます：
①
②
③
当たり前のように見えるかもしれませんが、ここが出発点です。
h2: でも実は「例外」もある！それが非同期処理
JavaScriptの実行順序を複雑にしている原因は、非同期処理（ひどうきしょり）です。
h3: 非同期処理ってなに？
非同期処理とは、ある処理が終わるまで待たずに、先に別の処理を進める仕組みです。
例えば次のようなコード：
console.log("スタート");
setTimeout(() => {
console.log("3秒後のメッセージ");
}, 3000);
console.log("エンド");
これを実行すると、こうなります：
スタート
エンド
3秒後のメッセージ
「えっ、setTimeout が真ん中にあるのに、なんで最後に出るの？」と驚いた方も多いのではないでしょうか。
ここで大事になるのが、「イベントループ」という仕組みです！
h2: 実行の流れを管理する「イベントループ」
JavaScriptの実行順序は、以下のような仕組みで制御されています：
- コールスタック（Call Stack）
- Web APIs（タイマーなどの処理）
- タスクキュー（Task Queue）
- イベントループ（Event Loop）
これらの関係を図で表すとこんな感じです：
+-------------------+
| コールスタック | ← 今すぐ実行する処理
+-------------------+
↓
+-------------------+
| Web API | ← setTimeoutなどの非同期処理を一時的に預ける場所
+-------------------+
↓（完了後）
+-------------------+
| タスクキュー | ← 完了した処理を並べておく列
+-------------------+
↑
イベントループがチェックして
空きがあれば実行へ
**ポイントは、「非同期の処理はすぐに実行されない」**ということです。
h2: よく出てくる非同期処理
以下は、JavaScriptでよく使われる非同期処理の例です：
| 非同期処理の種類 | 具体例 |
|---|---|
| タイマー | setTimeout, setInterval |
| ネットワーク | fetch, XMLHttpRequest |
| ユーザー操作 | addEventListener（クリックなど） |
| 非同期API | Promise, async/await |
h2: Promise と async/await の実行順序
非同期処理の中でも、最近よく使われるのが Promise や async/await です。
以下のコードを見てみましょう：
console.log("①");
Promise.resolve().then(() => {
console.log("②");
});
console.log("③");
結果はこうなります：
①
③
②
「②」が最後なのは、then() の中身が マイクロタスク（microtask） としてキューに追加されるからです。
h2: async/await も実は Promise
async function run() {
console.log("①");
await Promise.resolve();
console.log("②");
}
run();
console.log("③");
この結果は？
①
③
②
await のところで一旦中断し、③が先に出力されてから、②が出力されます。ここでもやはりPromiseの非同期処理として扱われているんですね！
h2: まとめ
| 処理の種類 | 実行タイミング |
|---|---|
| 通常のコード | すぐに実行（コールスタック） |
setTimeout | 最低指定時間後に実行（タスクキュー） |
Promise.then | 直後のマイクロタスクとして実行 |
await | then と同様マイクロタスク |
h2: 今後の学習のポイント
JavaScriptの実行順序は、最初は少し混乱します。でも、以下の点に注目していくと理解が深まりますよ！
setTimeoutやPromiseをたくさん試して、実行順を予想してみるasync/awaitの中断ポイントに注目する- 「同期」「非同期」の違いを説明できるようにしてみる
コードを書いて動きを観察するのが、いちばんの近道です！
分かりづらい点があれば、どんどん質問してください！一緒に理解を深めていきましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
