2024/02/24

JavaScriptランタイム（実行環境）について（図解）

目次

• JavaScriptの実行環境（ランタイム）とは
• JavaScript実行環境の比較
  • ブラウザ
  • Node.js
  • Deno
  • Bun
  • Cloudflare Workers

JavaScriptの実行環境（ランタイム）とは

• Webブラウザやサーバー上でJavaScriptコードを実行するためのプラットフォーム
  • 実行エンジン
    • JavaScriptコードを解釈し、マシンコードに変換して実行する役割を持つ
      • 代表的な実行エンジンには・・・
        • V8（Google Chrome, Node.js）
        • SpiderMonkey（Firefox）
        • JavaScriptCore（Safari）
  • 発展の歴史
    • 初期段階のJavaScript
      • ブラウザ上でのみ使用されるスクリプト言語
      • ウェブページを動的にする機能を提供
        • 例：ページ上の要素の操作、フォームの正しい入力の検証
    • Node.jsの登場による変化
      • JavaScriptをサーバーサイドで使用可能に
      • ウェブサイトのバックエンド開発にも適用されるようになる
      • Node.jsの特徴
        • 非同期I/Oを採用し、イベント駆動型のプログラミングを実現
          • ウェブサーバーが複数のリクエストを同時に処理するときに力を発揮する

+---------------------------------+
|        JavaScriptランタイム       |
+----------------+----------------+
|     ブラウザ     |     Node.js    |
|  (クライアント)  |     (サーバ)    |
+----------------+----------------+
|  +----------+  |  +----------+  |
|  |  V8      |  |  |  V8      |  |
|  |  Engine  |  |  |  Engine  |  |
|  +----------+  |  +----------+  |
|  +----------+  |  +----------+  |
|  | Web APIs |  |  |  Node.js |  |
|  | (DOM,    |  |  |  APIs    |  |
|  |  Fetch)  |  |  +----------+  |
|  +----------+  |                |
+----------------+----------------+

JavaScript実行環境の比較

ブラウザ

• ブラウザ
  • 実行エンジン:
    • ウェブページの動的な振る舞いを制御
      • DOMの操作やイベントの処理を担う
    • 種類
      • V8 (Google Chrome, Opera)
      • SpiderMonkey (Firefox)
      • JavaScriptCore (Safari)
      • Chakra (旧Microsoft Edge)
  • APIスタイル:
    • Web標準
  • セキュリティ:
    • サンドボックス
  • パッケージ管理:
    • 無し（CDNまたはモジュール、ESモジュールのサポートによるnpmパッケージの利用増加）
  • 用途:
    • クライアントサイド

内部構成：

[ブラウザ]
|
|-- [V8 JavaScriptエンジン]
|    |
|    |-- [JavaScriptコードの実行]
|
|-- [その他のコンポーネント（例：HTMLレンダリングエンジン、CSS解析器など）]

処理の流れ：

[JavaScript コード]
        ↓
┌────ブラウザ────┐
│               │
│ [実行エンジン]<─ JavaScriptエンジン (V8, SpiderMonkey, JavaScriptCore, etc.)
│       ↓       │
│ [Web APIs]  <─ DOM API, Fetch API など
│       ↓       │
│ [イベントループ] │
│       ↓       │
│ [レンダリング  <─ Blink (Chrome),
|  エンジン]     |  Gecko (Firefox), etc.
│               │
└───────────────┘
        ↓
    [画面表示]

Node.js

• Node.js
  • 実行エンジン:
    • V8
  • APIスタイル:
    • Node固有
      • ブラウザ特有のAPIに代わり、サーバーサイド操作やファイルシステムアクセスなどの機能を提供
  • セキュリティ:
    • ファイルシステムやネットワークへのフルアクセス許可（実行時フラグやポリシーファイルによるアクセス制御可能）
    • サンドボックスではない
  • パッケージ管理:
    • npm
      • JavaScriptのパッケージマネージャ
        • Node.jsエコシステム内のサードパーティモジュールやライブラリを管理
  • 用途:
    • サーバーサイド、CLI

内部構成：

[Node.js]
|
|-- [V8 JavaScriptエンジン]
|    |
|    |-- [JavaScriptコードをコンパイル・実行]
|
|-- [Node.jsのライブラリ]
|    |
|    |-- [ファイルシステムアクセス]
|    |-- [ネットワーク操作]
|    |-- [HTTPサーバー機能]
|    |-- [その他のネイティブ機能]
|
|-- [npm (Node Package Manager)]

処理の流れ：

[JavaScript コード]
      ↓
┌── Node.js ────┐
│               │
│ [エンジン]<─ V8 JavaScriptエンジン
│     ↓         │
│ [Node.js API]<─ fs, http, crypto など
│               │
└───────────────┘
       ↓
[オペレーティングシステム]

さらに詳細な流れ：

        [JavaScript コード]
                 ↓
┌─────── Node.js ランタイム ────┐
  ┌─────────────────────────┐
  │        V8エンジン        |
  │     (jsをコンパイル)      |
  └─────────────────────────┘
              ↓ 実行時にさらにJITコンパイラが
  ┌─────────────────────────┐ マシン語に最適化
  │ コンパイルされたマシンコード │
  │ (Node.jsのAPI           │
  │     呼び出し命令含む)     │
  └─────────────────────────┘
              │
  ┌─────────────────────────┐
  │      Node.jsのAPI       │<── コンパイルされたマシンコードが
  │      (C++/JSで実装)      │    実行されるとき、Node.jsのAPIへの
  └─────────────────────────┘    呼び出し命令が実行される
              │
  ┌─────────────────────────┐
  │       libuv(Cで実装)     │
  │ (非同期I/O,イベントループ) │<── Node.jsのAPIを通じて非同期操作が
  └─────────────────────────┘    リクエストされると、libuvがこれらの
└──────────────────────────────┘  非同期I/Oやイベントループを管理
              ↓
    [オペレーティングシステム]

Deno

• Deno
  • 実行エンジン:
    • V8
  • APIスタイル:
    • Web標準 + Deno固有
      • Rustで構築されたランタイムがAPIを提供する
  • セキュリティ:
    • サンドボックス、明示的な権限
  • パッケージ管理:
    • URLをベースにしたモジュールのインポートと配布をサポート
      • 従来のnpmのようなパッケージマネージャを使用しない
      • Deno自体がパッケージマネージャの役割を果たす
    • Deno v1.25以降ではnpmパッケージが使える
  • 用途:
    • サーバーサイド、CLI、スクリプティング

内部構成：

[Deno]
|
|-- [V8 JavaScriptエンジン]
|    |
|    |-- [JavaScriptコードをコンパイル・実行]
|
|-- [Denoのコア部分(Rustで実装)]
|    |
|    |-- [セキュリティ制御]
|    |-- [ファイルシステムアクセス]
|    |-- [ネットワーク操作]
|    |-- [その他のOSレベル機能]
|
|-- [Denoの標準ライブラリ]
|    |
|    |-- [HTTPユーティリティ]
|    |-- [Web API (Web標準APIのサポート)]
|    |-- [ウェブアセンブリ]
|    |-- [テストフレームワーク]
|    |-- [その他のユーティリティ]
|
|-- [Denoのモジュール管理]

処理の流れ：

[JavaScript/TypeScript コード]
      ↓
┌── Deno ──────────┐
│                  │
│ [エンジン]   <─ V8エンジン
│     ↓            │
│ [セキュリティレイヤ │
│  /サンドボックス]  │
│     ↓            │
│ [DenoのAPI] <─ Web API + Deno固有のAPI
│                  │
└──────────────────┘
        ↓
[オペレーティングシステム]

さらに詳細な流れ：

[JavaScript/TypeScript コード]
            ↓
┌────── Deno ランタイム ───────┐
  ┌─────────────────────────┐
  │        V8エンジン         │<── tsはjsにトランスパイルされる
  │ (js/tsコードをコンパイル)  │
  └─────────────────────────┘
            ↓ 実行時にさらにJITコンパイラがマシン語に最適化
  ┌─────────────────────────┐
  │ コンパイルされたマシンコード │<── Denoのセキュリティレイヤーと
  └─────────────────────────┘    API呼び出し処理命令を含む
            ↓
  ┌ サンドボックス /    ┐ <── セキュリティレイヤーを通して
  └ セキュリティレイヤー ┘     安全に、Web API/Bun固有の
                &           APIが提供される
  [ Web API / Deno固有API 呼出し ]
            ↓
  ┌─────────────────────────┐
  │   Denoコア部分（Deno API）│<── Rustで実装
    (セキュリティ制御、
     OSレベルの機能を担当)
  └─────────────────────────┘
└─────────────────────────────┘
            ↓
  [オペレーティングシステム]

Bun

• Bun
  • 実行エンジン:
    • JavaScriptCore
  • APIスタイル:
    • Web標準 + Bun固有
  • セキュリティ:
    • サンドボックス、明示的な権限（セキュリティメカニズム含む）
  • パッケージ管理:
    • モジュール管理と配布に独自のアプローチを採用
      • URLまたはnpmパッケージ名を用いたインポートと自動キャッシュ管理
    • bun自体がパッケージマネージャーであり、npmと互換性がある
  • 用途:
    • サーバーサイド、CLI、スクリプティング

内部構成：

[Bun]
|
|-- [JavaScriptCore (JSC) エンジン]
|    |
|    |-- [JavaScript/TypeScriptコードのコンパイル・実行]
|
|-- [Bunのコア部分(Zigで実装)]
|    |
|    |-- [セキュリティ制御]
|    |-- [ファイルシステムアクセス]
|    |-- [ネットワーク操作]
|    |-- [その他のOSレベル機能]
|
|-- [Bunの標準ライブラリ]
|    |
|    |-- [HTTPユーティリティ]
|    |-- [Web API (Web標準APIのサポート)]
|    |-- [その他のユーティリティ]
|
|-- [Bunのモジュール管理]

処理の流れ：

      [JavaScriptコード]
             ↓
┌────── Bun ランタイム ──────┐
  ┌───────────────────────┐
  │    JavaScriptCore     │
  │ (jsコードをコンパイル)   │
  └───────────────────────┘
             ↓
  ┌───────────────────────┐
  │      Bunコア部分 <─ Zigで実装
  │ (Web API + Bun固有API) |
  └───────────────────────┘
└──────────────────────────┘
             ↓
    [オペレーティングシステム]

Cloudflare Workers

• Cloudflare Workers
  • 実行エンジン:
    • V8
  • APIスタイル:
    • Web標準 + Cloudflare固有
  • セキュリティ:
    • サンドボックス
  • パッケージ管理:
    • 単一ファイルまたはモジュールの形式でのコード管理をサポート
    • Wrangler CLIツールを通じて開発プロセスを容易にする
  • 用途:
    • エッジコンピューティング

内部構成：

[Cloudflare Workers]
|
|-- [V8 JavaScriptエンジン]
|    |
|    |-- [JavaScriptコードの実行]
|
|-- [Cloudflareの標準ライブラリ]
|    |
|    |-- [HTTPリクエスト/レスポンス操作]
|    |-- [エッジストレージAPI]
|    |-- [クリプトグラフィAPI]
|
|-- [モジュールの管理]
     |
     |-- [単一ファイルまたはモジュール]
     |-- [Wrangler CLIツールによる開発サポート]

処理の流れ：

[JavaScript コード]
      ↓
┌── Cloudflare Workers ────┐
│                          │
│ [エンジン]<─ V8 JavaScriptエンジン
│     ↓                    │
│ [Web API]<─ Fetch API, etc...
│     ↓                    │
│ [グローバルネットワーク]<─ Cloudflareのグローバルネットワーク
└──────────────────────────┘
      ↓
[エンドユーザー]

さらに詳細な流れ：

      [JavaScript コード]
             ↓
      Cloudflare
┌─────  Workers ランタイム ─────┐
 ┌───────────────────────────┐
 │          V8エンジン        │<── V8エンジンがjs/tsのコードを解析し、
 │  (jsをコンパイル・実行)      │    実行可能なマシン語にコンパイル
 └───────────────────────────┘
             ↓ 実行時にさらにJITコンパイラがマシン語に最適化
 ┌──────────────────────────┐
 │  コンパイルされたマシンコード │<── Cloudflare Workers特有のAPIへの
 └──────────────────────────┘    呼び出し命令も含まれる
             │
 ┌──────────────────────────┐
 │  Web API（Fetch API等）   │<─── マシンコードが実行されるとき、
 └──────────────────────────┘     Fetch APIなどのWeb APIへの
             ↓                     呼び出し命令が実行される
 [ Cloudflareのグローバルネットワーク]
     └─ グローバルなエッジネットワークを介して
        ユーザーに近い場所でコードを実行し、
        レイテンシーを最小限に抑える
└───────────────────────────────┘
             ↓
      [エンドユーザー]