🤖

JavaScript関数の実行メカニズム：エンジンから CPU までの旅

2025/03/01に公開

JavaScriptプログラミングにおいて、関数は基本的な構成要素です。しかし、function myFunc() { ... } と書いたコードが実際にどのように実行されるのか、その内部的なプロセスについて深く理解している開発者は多くありません。この記事では、JavaScriptエンジンが関数を実行する過程を、コードの解析から実際のCPU実行までステップバイステップで解説します。

 JavaScriptエンジンとはJavaScriptエンジンとは、JavaScriptコードを解釈し実行するためのソフトウェアコンポーネントです。主要なJavaScriptエンジンには以下のようなものがあります：

V8: Google Chrome と Node.js で使用される高性能エンジン

SpiderMonkey: Mozilla Firefox で使用されるエンジン

JavaScriptCore: Apple Safari で使用されるエンジン

Chakra: かつて Microsoft Edge で使用されていたエンジン
これらのエンジンは、基本的な役割は同じですが、実装の詳細やパフォーマンス最適化のアプローチには違いがあります。

 関数実行の流れ：4つの主要ステップJavaScriptエンジンが関数を実行する過程は、大きく分けて4つのステップから成り立っています。

 1. コードの読み込みと解析（パース）function calculateTotal(price, quantity) {
  const tax = 0.08;
  return price * quantity * (1 + tax);
}

const total = calculateTotal(100, 5);
上記のようなコードがブラウザやNode.jsなどの環境に読み込まれると、まず最初に行われるのが「パース」です。
パース処理の内容：
コードを文字列として読み込み、トークン（意味のある最小単位）に分解
構文エラーがないかチェック
トークンから抽象構文木（AST: Abstract Syntax Tree）を構築
AST はコードの構造を表す木構造のデータで、以下のようなイメージになります：
Program
 ├── FunctionDeclaration (calculateTotal)
 │    ├── Parameters: [price, quantity]
 │    └── Body:
 │         ├── VariableDeclaration (tax = 0.08)
 │         └── ReturnStatement (price * quantity * (1 + tax))
 └── VariableDeclaration (total = calculateTotal(100, 5))
      └── CallExpression (calculateTotal)
           └── Arguments: [100, 5]

 2. バイトコードへの変換（コンパイル）パースが完了すると、多くの現代的なJavaScriptエンジンは、ASTをバイトコードに変換します。バイトコードとは、CPUが直接実行できる機械語よりは抽象度が高く、しかしASTよりは低レベルな中間表現です。
このステップでは以下のような最適化が行われます：
変数のアクセスパターンの分析
インライン展開などの初期的な最適化
関数の型情報の推測

 3. 実行コンテキストの作成関数が呼び出されると、JavaScriptエンジンは「実行コンテキスト」と呼ばれるデータ構造を作成します。実行コンテキストには以下の情報が含まれます：

変数環境：ローカル変数、引数、関数宣言などの情報

スコープチェーン：親スコープへの参照

this の値：関数がどのコンテキストで呼ばれたか

レキシカル環境：クロージャのための参照
これらの実行コンテキストは「コールスタック」（または「実行スタック」）と呼ばれるデータ構造に積まれていきます。例えば：
function outer() {
  console.log('Outer function');
  inner();
}

function inner() {
  console.log('Inner function');
}

outer();
このコードを実行すると、コールスタックは以下のように変化します：
グローバル実行コンテキストが作成される

outer() が呼ばれると、outer の実行コンテキストがスタックに積まれる

inner() が呼ばれると、inner の実行コンテキストがスタックに積まれる

inner の実行が完了すると、その実行コンテキストがスタックから取り除かれる

outer の実行が完了すると、その実行コンテキストもスタックから取り除かれる

 4. CPUによる実際の実行最終的に、関数のコードは CPU によって実際に実行されます。この段階では：
JavaScriptエンジンがバイトコードの命令をCPUの命令に変換
CPUがレジスタやキャッシュを使用してデータを処理
メモリ（RAM）から変数の値を読み取り、計算を実行
結果をメモリに書き戻す
多くの現代的なJavaScriptエンジンでは、Just-In-Time（JIT）コンパイルという技術を使って、実行時に頻繁に使われるコードを機械語に直接変換し、パフォーマンスを向上させています。

 メモリの役割：スタックとヒープJavaScriptエンジンは、関数の実行時に2種類のメモリ領域を使用します：

 スタックメモリスタックは構造化されたメモリ領域で、以下のデータが格納されます：
プリミティブ値（数値、文字列、真偽値など）
オブジェクトや配列への参照
関数の呼び出し情報
実行コンテキスト
スタックは「後入れ先出し」（LIFO: Last-In, First-Out）の原則で動作し、関数が呼び出されるたびに新しいスタックフレームが作成されます。

 ヒープメモリヒープは構造化されていないメモリ領域で、以下のようなデータが格納されます：
オブジェクト
配列
関数
その他の参照型のデータ
function createPerson() {
  // personオブジェクトはヒープに作成される
  const person = {
    name: "田中",
    age: 30
  };
  
  // personへの参照はスタックに格納される
  return person;
}

 パフォーマンス最適化：JITコンパイラの役割JavaScriptは元々インタプリタ型の言語でしたが、現代のJavaScriptエンジンはJIT（Just-In-Time）コンパイルという技術を使ってパフォーマンスを大幅に向上させています。
JITコンパイラの動作の流れ：

プロファイリング：コードの実行パターンを監視

ホットスポットの特定：頻繁に実行される箇所を検出

最適化コンパイル：ホットスポットをネイティブな機械語にコンパイル

脱最適化：想定と異なる条件が発生した場合、最適化を取り消す
例えば、以下のようなループがあるとします：
function sumArray(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

// この関数が大きな配列で何度も呼ばれると...
const result = sumArray([1, 2, 3, /* ...何千もの要素... */]);
このsumArray関数が何度も呼び出されると、JITコンパイラはこれをホットスポットとして特定し、最適化されたネイティブコードに変換します。その結果、繰り返し実行時のパフォーマンスが大幅に向上します。

 エンジン実装の違い：主要ブラウザ間の比較各ブラウザが採用しているJavaScriptエンジンには、細かな実装の違いがあります：

 V8（Chrome, Node.js）
フルコンパイラアプローチ：Ignition（バイトコードインタプリタ）とTurboFan（最適化コンパイラ）の2段階アーキテクチャ

インライン・キャッシュ：プロパティアクセスの高速化

ガベージコレクション：世代別GCとインクリメンタルGCの組み合わせ

 SpiderMonkey（Firefox）
ベースラインJIT：初期の低レベル最適化

IonMonkey：より積極的な最適化コンパイラ

WarpMonkey：最新の最適化技術

 JavaScriptCore（Safari）
4階層のコンパイル：LLInt、Baseline JIT、DFG JIT、FTL JITの階層構造

各階層で異なるレベルの最適化：実行頻度に応じて適切な最適化レベルを選択

 まとめ：JavaScriptエンジンと関数実行の全体像JavaScriptの関数実行は、以下のような複雑なプロセスを経て行われます：

コードの解析：構文木の構築

バイトコードへの変換：中間表現の生成

実行コンテキストの準備：変数環境とスコープチェーンの設定

JIT最適化：頻繁に使用されるコードの最適化

CPUによる実行：最終的な命令の実行
これらのプロセスはすべて、ブラウザやNode.jsなどの実行環境内のJavaScriptエンジンによって管理されています。最終的には、どんなJavaScriptコードも、CPUが理解できる機械語命令に変換され、実行されるのです。
JavaScriptエンジンの内部動作を理解することで、よりパフォーマンスの高いコードを書くための洞察を得ることができます。特に、関数の呼び出しコスト、オブジェクト生成、メモリ管理などの側面において、より効率的なコードを設計する助けとなるでしょう。

JavaScriptエンジンとは

関数実行の流れ：4つの主要ステップ

1. コードの読み込みと解析（パース）

2. バイトコードへの変換（コンパイル）

3. 実行コンテキストの作成

4. CPUによる実際の実行

メモリの役割：スタックとヒープ

スタックメモリ

ヒープメモリ

パフォーマンス最適化：JITコンパイラの役割

エンジン実装の違い：主要ブラウザ間の比較

V8（Chrome, Node.js）

SpiderMonkey（Firefox）

JavaScriptCore（Safari）

まとめ：JavaScriptエンジンと関数実行の全体像

Discussion