このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Call stack (コールスタック)

コールスタック (call stack) は、インタープリター(ウェブブラウザー内の JavaScript インタープリターなど)の仕組みの一つで、複数階層の関数を呼び出したスクリプト内の位置を追跡し続けることです。 — どの関数が現在実行されているのか、その関数の中でどの関数が呼び出されたか、などです。

  • スクリプトが関数を呼び出すとき、インタープリターはそれをコールスタックに追加し、それから関数の実行を始めます。
  • その関数から呼び出されたどの関数も、コールスタックのその上に追加され、呼び出し先を実行します。
  • 現在の関数が終了すると、インタープリターはスタックからそれを外し、最後のコードがリストされている場所から実行を再開します。
  • スタックが割り当てられている量よりも多くのスペースを使用した場合、 "stack overflow" エラーとなります。

js
function greeting() {
  // [1] ここにコードを配置
  sayHi();
  // [2] ここにコードを配置
}
function sayHi() {
  return "Hi!";
}

// `greeting` 関数を呼び出す
greeting();

// [3] ここにコードを配置

実行を始める時点ではコールスタックは空の状態であり、以上に記載されたコードは次のようには実行されます。

  1. greeting() 関数の呼び出しまで、すべての関数を無視する。

  2. greeting() 関数をコールスタックリストに追加する。

    - greeting
    
  3. greeting() 関数の中にあるコードのすべての行を実行する。

  4. sayHi() 関数の呼び出しまで移動する。

  5. コールスタックリストに sayHi() 関数を追加する。

    - sayHi
    - greeting
    
  6. sayHi() 関数の中にあるコードのすべての行を、末尾に達するまで実行する。

  7. 実行を sayHi() を呼び出した行に戻し、 greeting() 関数の残りの実行を続ける。

  8. コールスタックの一覧から sayHi() 関数を削除する。これで、コールスタックは次のようになります。

    - greeting
    
  9. greeting() 関数の中のすべてを実行したら、これを呼び出した行に戻り、残りの JavaScript コードの実行を続ける。

  10. コールスタックの一覧から greeting() 関数を削除しする。繰り返しになりますが、コールスタックは再び空になります。

まとめると、最初はコールスタックは空の状態です。関数を呼び出すたびに、その関数は自動的にコールスタックに追加されます。関数がすべてのコードを実行し終えると、自動的にコールスタックから除去されます。最終的に、スタックは再び空の状態になります。

関連情報