コールスタック
関数呼び出しがどのように追跡されるかを確認します。
「コールスタック」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
コールスタックとは
コールスタックは、現在実行中の関数と、処理の戻り先をJavaScriptが追跡する仕組みです。関数を呼び出すたびにスタックの最上部へ積まれ、処理が終わると取り除かれます。
これはLIFO構造です。つまり、後入れ先出しです。
積み上げと取り出し
関数を呼び出すと、スタックフレームが積まれます。関数が戻ると、そのフレームが取り除かれます。呼び出しがネストしたときのログの順序を確認してください。
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();LIFOの動作
最も新しく呼び出された関数は、その下にある関数の処理が再開する前に完了しなければなりません。内側の呼び出しは、最後に開始されたにもかかわらず先に完了します。
function a() {
console.log('enter a');
b();
console.log('exit a');
}
function b() {
console.log('enter b');
c();
console.log('exit b');
}
function c() {
console.log('c runs');
}
a();同期処理はブロックする
JavaScriptは、1つのスレッド上で一度に1つの処理を実行します。スタックにフレームがある間は、ほかの処理は実行されません。同期コードは完了するまでブロックします。
console.log('start');
function busy() {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
return sum;
}
console.log(busy());
console.log('end');戻り値は下へ流れる
各フレームが取り除かれると、その戻り値はスタックの下で待機している呼び出し元へ返されます。
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));再帰によってスタックが増える
再帰呼び出しのたびに、新しいフレームが追加されます。ベースケースに到達するまでスタックは増え続け、その後、フレームが1つずつ解かれていきます。
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);スタックオーバーフロー
スタックのサイズには上限があります。ベースケースのない再帰では、エンジンがRangeError: Maximum call stack size exceededをスローするまでフレームが積み上がり続けます。
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}実行順序は予測できる
スタックは厳密なLIFOで動作し、処理も同期的であるため、同期ログの順序は常に決定的です。手作業で追跡できます。
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);非同期処理が登場する場所
コールスタックが実行するのは同期コードだけです。setTimeoutなどの関数は処理を環境に渡し、環境は後でコールバックをキューに入れます。これらのコールバックは、スタックが空になって初めて実行されます。
これがイベントループへの橋渡しになります。
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');まずスタックを空にする
0ミリ秒のタイマーであっても、すべての同期コードが完了するまで待機します。スタックにフレームが残っている間は、コールバックを実行できません。
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');コールスタックが重要な理由
コールスタックを理解すると、長い同期ループでページが固まる理由、再帰がオーバーフローする理由、非同期コールバックが常に最後に実行される理由がわかります。これはイベントループのすべての基礎です。
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');理解度チェック
コールスタックが従う順序の原則は何ですか。
まとめ：コールスタック
エンジンの実行の中心について学びました。
- コールスタックは、実行中の関数をLIFO順に追跡します。
- JavaScriptはシングルスレッドであり、同期コードはブロックします。
- 再帰によってスタックが増加し、オーバーフローすることがあります。
- 非同期コールバックはスタックが空になるまで待機し、そこからイベントループへつながります。
よくある質問
「コールスタック」レッスンは無料ですか？
はい。「コールスタック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「コールスタック」で何を学びますか？
関数呼び出しがどのように追跡されるかを確認します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「コールスタック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。